diff --git a/README.md b/README.md index 866064e..098ac20 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,8 @@ Default Options: minPixelValue: 1, mediaQuery: false, replace: true, - exclude: [], + exclude: undefined, + include: undefined, landscape: false, landscapeUnit: 'vw', landscapeWidth: 568 @@ -122,10 +123,15 @@ Default Options: - `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. +- `include` (Array or Regexp) If `include` is set, only matching files will be converted, for example, only files under 'src/mobile' + - If the value is regexp, the matching file will be included, otherwise it will be excluded. + - If value is array, the elements of the array are regexp. - `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`. - `landscapeUnit` (String) Expected unit for `landscape` option - `landscapeWidth` (Number) Viewport width for landscape orientation. +> `exclude` and` include` can be set together, and the intersection of the two rules will be taken. + #### Use with gulp-postcss add to your `gulpfile.js`: diff --git a/README_CN.md b/README_CN.md index 5b29e55..29f7358 100644 --- a/README_CN.md +++ b/README_CN.md @@ -94,7 +94,8 @@ $ yarn add -D postcss-px-to-viewport minPixelValue: 1, mediaQuery: false, replace: true, - exclude: [], + exclude: undefined, + include: undefined, landscape: false, landscapeUnit: 'vw', landscapeWidth: 568 @@ -122,10 +123,15 @@ $ yarn add -D postcss-px-to-viewport - `exclude` (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 - 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略 - 如果传入的值是一个数组，那么数组里的值必须为正则 +- `include` (Array or Regexp) 如果设置了`include`，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 + - 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件 + - 如果传入的值是一个数组，那么数组里的值必须为正则 - `landscape` (Boolean) 是否添加根据 `landscapeWidth` 生成的媒体查询条件 `@media (orientation: landscape)` - `landscapeUnit` (String) 横屏时使用的单位 - `landscapeWidth` (Number) 横屏时使用的视口宽度 +> `exclude`和`include`是可以一起设置的，将取两者规则的交集。 + #### 直接在gulp中使用，添加gulp-postcss 在 `gulpfile.js` 添加如下配置: diff --git a/index.js b/index.js index 5556893..8b0edcb 100755 --- a/index.js +++ b/index.js @@ -35,6 +35,20 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { // Add exclude option to ignore some files like 'node_modules' var file = rule.source && rule.source.input.file; + if (opts.include && file) { + if (Object.prototype.toString.call(opts.include) === '[object RegExp]') { + if (!isInclude(opts.include, file)) return; + } else if (Object.prototype.toString.call(opts.include) === '[object Array]') { + var flag = false; + for (let i = 0; i < opts.include.length; i++) { + if (isInclude(opts.include[i], file)) flag = true; + } + if (!flag) return; + } else { + throw new Error('options.include should be RegExp or Array.'); + } + } + if (opts.exclude && file) { if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') { if (isExclude(opts.exclude, file)) return; @@ -142,6 +156,13 @@ function isExclude(reg, file) { return file.match(reg) !== null; } +function isInclude(reg, file) { + if (Object.prototype.toString.call(reg) !== '[object RegExp]') { + throw new Error('options.include should be RegExp.'); + } + return file.match(reg) !== null; +} + function declarationExists(decls, prop, value) { return decls.some(function (decl) { return (decl.prop === prop && decl.value === value); diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index e4116d7..344f2a0 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -285,7 +285,7 @@ describe('exclude', function () { 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/ + exclude: /\/node_modules\// }; var processed = postcss(pxToViewport(options)).process(rules, { from: '/node_modules/main.css' @@ -296,7 +296,7 @@ describe('exclude', function () { it('when using regex at the time, the style should be overwritten.', function () { var options = { - exclude: /node_modules/ + exclude: /\/node_modules\// }; var processed = postcss(pxToViewport(options)).process(rules, { from: '/example/main.css' @@ -307,7 +307,7 @@ describe('exclude', function () { it('when using array at the time, the style should not be overwritten.', function () { var options = { - exclude: [/node_modules/, /exclude/] + exclude: [/\/node_modules\//, /\/exclude\//] }; var processed = postcss(pxToViewport(options)).process(rules, { from: '/exclude/main.css' @@ -318,7 +318,7 @@ describe('exclude', function () { it('when using array at the time, the style should be overwritten.', function () { var options = { - exclude: [/node_modules/, /exclude/] + exclude: [/\/node_modules\//, /\/exclude\//] }; var processed = postcss(pxToViewport(options)).process(rules, { from: '/example/main.css' @@ -328,6 +328,156 @@ describe('exclude', function () { }); }); +describe('include', 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 = { + include: /\/mobile\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + include: /\/mobile\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/mobile/main.css' + }).css; + + expect(processed).toBe(covered); + }); + + it('when using array at the time, the style should not be overwritten.', function () { + var options = { + include: [/\/flexible\//, /\/mobile\//] + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using array at the time, the style should be overwritten.', function () { + var options = { + include: [/\/flexible\//, /\/mobile\//] + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/flexible/main.css' + }).css; + + expect(processed).toBe(covered); + }); +}); + +describe('include-and-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 = { + include: /\/mobile\//, + exclude: /\/not-transform\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/mobile/not-transform/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + include: /\/mobile\//, + exclude: /\/not-transform\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/mobile/style/main.css' + }).css; + + expect(processed).toBe(covered); + }); + + it('when using array at the time, the style should not be overwritten.', function () { + var options = { + include: [/\/flexible\//, /\/mobile\//], + exclude: [/\/not-transform\//, /pc/] + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/flexible/not-transform/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + include: [/\/flexible\//, /\/mobile\//], + exclude: [/\/not-transform\//, /pc/] + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/mobile/style/main.css' + }).css; + + expect(processed).toBe(covered); + }); +}); + +describe('regex', 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: /pc/ + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc-project/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + exclude: /\/pc\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc-project/main.css' + }).css; + + expect(processed).toBe(covered); + }); + + it('when using regex at the time, the style should not be overwritten.', function () { + var options = { + include: /\/pc\// + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc-project/main.css' + }).css; + + expect(processed).toBe(rules); + }); + + it('when using regex at the time, the style should be overwritten.', function () { + var options = { + include: /pc/ + }; + var processed = postcss(pxToViewport(options)).process(rules, { + from: '/pc-project/main.css' + }).css; + + expect(processed).toBe(covered); + }); +}); + describe('replace', function () { it('should leave fallback pixel unit with root em value', function () { var options = {