diff --git a/README.md b/README.md index 21a16c5..d34825f 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,8 @@ Default: fontViewportUnit: 'vw', // vmin is more suitable. selectorBlackList: [], minPixelValue: 1, - mediaQuery: false + mediaQuery: false, + exclude: [] // ignore some files } ``` - `unitToConvert` (String) unit to convert, by default, it is px. @@ -111,6 +112,9 @@ Default: - `[/^body$/]` will match `body` but not `.body` - `minPixelValue` (Number) Set the minimum pixel value to replace. - `mediaQuery` (Boolean) Allow px to be converted in media queries. +- `exclude` (Array or Regexp) Ignore some files like 'node_modules' + - If value is regexp, will ignore the matches files. + - If value is array, the elements of the array are regexp. ### Use with gulp-postcss diff --git a/index.js b/index.js index 7bcc46a..27c4442 100755 --- a/index.js +++ b/index.js @@ -29,8 +29,22 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { var pxRegex = new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + opts.unitToConvert, 'ig') return function (css) { - + css.walkDecls(function (decl, i) { + + // Add exlclude option to ignore some files like 'node_modules' + if (opts.exclude && decl.source.input.file) { + if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') { + if (!handleExclude(opts.exclude, decl.source.input.file)) return; + } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') { + for (let i = 0; i < opts.exclude.length; ++i) { + if (!handleExclude(opts.exclude[i], decl.source.input.file)) return; + } + } else { + throw new Error('options.exclude should be RegExp or Array!'); + } + } + // This should be the fastest test and will remove most declarations if (decl.value.indexOf(opts.unitToConvert) === -1) return; @@ -51,6 +65,14 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { }; }); +function handleExclude (reg, file) { + if (Object.prototype.toString.call(reg) !== '[object RegExp]') { + throw new Error('options.exclude should be RegExp!'); + } + if (file.match(reg) !== null) return false; + return true; +} + function getUnit(prop, opts) { return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit; } diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 23632e2..aad1213 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -196,3 +196,51 @@ describe('minPixelValue', function () { expect(processed).toBe(expected); }); }); + +describe('exclude', function () { + var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; + var covered = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }' + it('when using regex at the time, the style should not be overwritten.', function () { + var options = { + exclude: /node_modules/ + } + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/node_modules/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + exclude: /node_modules/ + } + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/example/main.css' + }).css; + + expect(processed).toBe(covered); + }); + + it('when using array at the time, the style should not be overwritten.', function () { + var options = { + exclude: [/node_modules/, /exclude/] + } + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/exclude/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using array at the time, the style should be overwritten.', function () { + var options = { + exclude: [/node_modules/, /exclude/] + } + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/example/main.css' + }).css; + + expect(processed).toBe(covered); + }); +});