diff --git a/README.md b/README.md index 77d7c5e..66eaee5 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ Default: root_value: 16, unit_precision: 5, prop_white_list: ['font', 'font-size', 'line-height', 'letter-spacing'], + selector_black_list: [], replace: true, media_query: false } @@ -45,6 +46,7 @@ Default: - `root_value` (Number) The root element font size. - `unit_precision` (Number) The decimal numbers to allow the REM units to grow to. - `prop_white_list` (Array) The properties that can change from px to rem. +- `selector_black_list` (Array) The selectors to ignore and leave as px. - `replace` (Boolean) replaces rules containing rems instead of adding fallbacks. - `media_query` (Boolean) Allow px to be converted in media queries. diff --git a/index.js b/index.js index e2b4c02..1ba310d 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,7 @@ module.exports = postcss.plugin('postcss-pxtorem', function (options) { options = options || {}; var rootValue = options.root_value || 16; var unitPrecision = options.unit_precision || 5; + var selectorBlackList = options.selector_black_list || []; var propWhiteList = options.prop_white_list || ['font', 'font-size', 'line-height', 'letter-spacing']; var replace = (options.replace === false) ? false : true; var mediaQuery = options.media_query || false; @@ -22,6 +23,8 @@ module.exports = postcss.plugin('postcss-pxtorem', function (options) { css.eachDecl(function (decl, i) { if (propWhiteList.indexOf(decl.prop) === -1) return; + if (blacklistedSelector(selectorBlackList, decl.parent.selector)) return; + var rule = decl.parent; var value = decl.value; @@ -63,3 +66,9 @@ function remExists(decls, prop, value) { return (decl.prop === prop && decl.value === value); }); } + +function blacklistedSelector(blacklist, selector) { + return blacklist.some(function (regex) { + return selector.match(regex); + }); +} diff --git a/package.json b/package.json index 699911a..99fb31c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "postcss-pxtorem", "description": "A CSS post-processor that converts px to rem.", - "version": "2.1.0", + "version": "2.2.0", "author": "cuth", "license": "MIT", "repository": { diff --git a/spec/pxtorem-spec.js b/spec/pxtorem-spec.js index 1349b0c..9d0e6fd 100644 --- a/spec/pxtorem-spec.js +++ b/spec/pxtorem-spec.js @@ -49,6 +49,17 @@ describe('pxtorem', function () { expect(processed).toBe(expected); }); + it('should ignore selectors in the selector black list', function () { + var rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'; + var expected = '.rule { font-size: 0.9375rem } .rule2 { font-size: 15px }'; + var options = { + selector_black_list: ['.rule2'] + }; + var processed = postcss(pxtorem(options)).process(rules).css; + + expect(processed).toBe(expected); + }); + it('should leave fallback pixel unit with root em value', function () { var options = { replace: false