Skip to content

Commit

Permalink
allow strings or regex in selectorBlackList
Browse files Browse the repository at this point in the history
  • Loading branch information
@cuth
cuth committed Dec 23, 2015
1 parent 1a93ca1 commit a4ed727
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 50 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ Default:
- Set this to an empty array to disable the white list and enable all properties.
- Values need to be exact matches.
- `selectorBlackList` (Array) The selectors to ignore and leave as px.
- If value is string, it checks to see if selector contains the string.
- `['body']` will match `.body-class`
- If value is regexp, it checks to see if the selector matches the regexp.
- `[/^body$/]` will match `body` but not `.body`
- `replace` (Boolean) replaces rules containing rems instead of adding fallbacks.
- `mediaQuery` (Boolean) Allow px to be converted in media queries.
- `minPixelValue` (Number) Set the minimum pixel value to replace.
Expand Down
1 change: 1 addition & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ function declarationExists(decls, prop, value) {
function blacklistedSelector(blacklist, selector) {
if (typeof selector !== 'string') return;
return blacklist.some(function (regex) {
if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
return selector.match(regex);
});
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "postcss-pxtorem",
"description": "A CSS post-processor that converts px to rem.",
"version": "3.2.0",
"version": "3.3.0",
"author": "cuth",
"license": "MIT",
"repository": {
Expand Down
135 changes: 86 additions & 49 deletions spec/pxtorem-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@
// 1. `npm install -g jasmine-node`
// 2. `jasmine-node spec`

/*global describe, it, expect */
/* global describe, it, expect */

'use strict';
var postcss = require('postcss');
var pxtorem = require('..');
var basicCSS = '.rule { font-size: 15px }';

describe('pxtorem', function () {

it('should work on the readme example', function () {
var input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }';
var output = 'h1 { margin: 0 0 20px; font-size: 2rem; line-height: 1.2; letter-spacing: 0.0625rem; }';
Expand All @@ -27,6 +26,57 @@ describe('pxtorem', function () {
expect(processed).toBe(expected);
});

it('should ignore non px properties', function () {
var expected = '.rule { font-size: 2em }';
var processed = postcss(pxtorem()).process(expected).css;

expect(processed).toBe(expected);
});

it('should handle < 1 values and values without a leading 0', function () {
var rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }';
var expected = '.rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }';
var options = {
propWhiteList: ['margin']
};
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

it('should not add properties that already exist', function () {
var expected = '.rule { font-size: 16px; font-size: 1rem; }';
var processed = postcss(pxtorem()).process(expected).css;

expect(processed).toBe(expected);
});
});

describe('value parsing', function () {
it('should not replace values in double quotes or single quotes', function () {
var options = {
propWhiteList: []
};
var rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }';
var expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 1rem; }';
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

it('should not replace values in `url()`', function () {
var options = {
propWhiteList: []
};
var rules = '.rule { background: url(16px.jpg); font-size: 16px; }';
var expected = '.rule { background: url(16px.jpg); font-size: 1rem; }';
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});
});

describe('rootValue', function () {
// Deprecate
it('should replace using a root value of 10 - legacy', function () {
var expected = '.rule { font-size: 1.5rem }';
Expand All @@ -47,7 +97,9 @@ describe('pxtorem', function () {

expect(processed).toBe(expected);
});
});

describe('unitPrecision', function () {
// Deprecate
it('should replace using a decimal of 2 places - legacy', function () {
var expected = '.rule { font-size: 0.94rem }';
Expand All @@ -68,7 +120,9 @@ describe('pxtorem', function () {

expect(processed).toBe(expected);
});
});

describe('propWhiteList', function () {
// Deprecate
it('should only replace properties in the white list - legacy', function () {
var expected = '.rule { font-size: 15px }';
Expand Down Expand Up @@ -100,7 +154,9 @@ describe('pxtorem', function () {

expect(processed).toBe(expected);
});
});

describe('selectorBlackList', function () {
// Deprecate
it('should ignore selectors in the selector black list - legacy', function () {
var rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }';
Expand All @@ -124,6 +180,30 @@ describe('pxtorem', function () {
expect(processed).toBe(expected);
});

it('should ignore every selector with `body$`', function () {
var rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }';
var expected = 'body { font-size: 1rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 1rem; }';
var options = {
selectorBlackList: ['body$']
};
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

it('should only ignore exactly `body`', function () {
var rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }';
var expected = 'body { font-size: 16px; } .class-body { font-size: 1rem; } .simple-class { font-size: 1rem; }';
var options = {
selectorBlackList: [/^body$/]
};
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});
});

describe('replace', function () {
it('should leave fallback pixel unit with root em value', function () {
var options = {
replace: false
Expand All @@ -133,7 +213,9 @@ describe('pxtorem', function () {

expect(processed).toBe(expected);
});
});

describe('mediaQuery', function () {
// Deprecate
it('should replace px in media queries', function () {
var options = {
Expand All @@ -154,54 +236,9 @@ describe('pxtorem', function () {

expect(processed).toBe(expected);
});
});

it('should ignore non px properties', function () {
var expected = '.rule { font-size: 2em }';
var processed = postcss(pxtorem()).process(expected).css;

expect(processed).toBe(expected);
});

it('should handle < 1 values and values without a leading 0', function () {
var rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }';
var expected = '.rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }';
var options = {
propWhiteList: ['margin']
};
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

it('should not add properties that already exist', function () {
var expected = '.rule { font-size: 16px; font-size: 1rem; }';
var processed = postcss(pxtorem()).process(expected).css;

expect(processed).toBe(expected);
});

it('should not replace values in double quotes or single quotes', function () {
var options = {
propWhiteList: []
};
var rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }';
var expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 1rem; }';
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

it('should not replace values in `url()`', function () {
var options = {
propWhiteList: []
};
var rules = '.rule { background: url(16px.jpg); font-size: 16px; }';
var expected = '.rule { background: url(16px.jpg); font-size: 1rem; }';
var processed = postcss(pxtorem(options)).process(rules).css;

expect(processed).toBe(expected);
});

describe('minPixelValue', function () {
it('should not replace values below minPixelValue', function () {
var options = {
propWhiteList: [],
Expand Down

0 comments on commit a4ed727

Please sign in to comment.