allow strings or regex in selectorBlackList

Author: cuth

README.md

@@ -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.

index.js

@@ -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);
     });
 }

package.json

@@ -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": {

spec/pxtorem-spec.js

@@ -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; }';
@@ -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 }';
@@ -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 }';
@@ -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 }';
@@ -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 }';
@@ -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
@@ -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 = {
@@ -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: [],