From fff029b368cbed34ba6556356f674d9ea7f8d217 Mon Sep 17 00:00:00 2001 From: msidolphin Date: Mon, 19 Nov 2018 10:18:15 +0800 Subject: [PATCH 1/9] Update index.js --- index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 7bcc46a..533b654 100755 --- a/index.js +++ b/index.js @@ -29,8 +29,16 @@ 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) { + + if (opts.exclude) { + if (Object.prototype.toString.call(opts.exclude) !== '[object RegExp]') { + throw new Error('options.exclude should be RegExp!') + } + if (decl.source.input.file.match(opts.exclude) !== null) return; + } + // This should be the fastest test and will remove most declarations if (decl.value.indexOf(opts.unitToConvert) === -1) return; From 07c63a6622f82f92dfb306eaf88f8b668b0888fc Mon Sep 17 00:00:00 2001 From: msidolphin Date: Mon, 19 Nov 2018 10:59:31 +0800 Subject: [PATCH 2/9] add exlclude option to ignore some files https://github.com/evrone/postcss-px-to-viewport/issues/11 --- index.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 533b654..521bec2 100755 --- a/index.js +++ b/index.js @@ -32,11 +32,17 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { css.walkDecls(function (decl, i) { + // Add exlclude option to ignore some files like 'node_modules' if (opts.exclude) { - if (Object.prototype.toString.call(opts.exclude) !== '[object RegExp]') { - throw new Error('options.exclude should be RegExp!') + 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!'); } - if (decl.source.input.file.match(opts.exclude) !== null) return; } // This should be the fastest test and will remove most declarations @@ -59,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; } From d2fc59662fa99cc5c640b01c513cc96ee4e62fcd Mon Sep 17 00:00:00 2001 From: msidolphin Date: Sat, 8 Dec 2018 10:09:29 +0800 Subject: [PATCH 3/9] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 From d5a7343080082db889babcb0e4693b1cff8707c4 Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Thu, 24 Jan 2019 10:44:13 +0300 Subject: [PATCH 4/9] remove ignore case --- index.js | 2 +- spec/px-to-viewport.spec.js | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 7bcc46a..6401f87 100755 --- a/index.js +++ b/index.js @@ -26,7 +26,7 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { // Not anything inside url() // Any digit followed by px // !singlequotes|!doublequotes|!url()|pixelunit - var pxRegex = new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + opts.unitToConvert, 'ig') + var pxRegex = new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + opts.unitToConvert, 'g') return function (css) { diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 23632e2..628ad85 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -57,6 +57,17 @@ describe('value parsing', function() { expect(processed).toBe(expected); }); + + it('should not replace values with an uppercase P or X', function () { + var options = { + propList: ['*'] + }; + var rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'; + var expected = '.rule { margin: 3.75vw calc(100% - 14PX); height: calc(100% - 6.25vw); font-size: 12Px; line-height: 5vw; }'; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); }); describe('unitToConvert', function() { From 77c3c24fd392c7bb8d17636ae6d2c319b9e93a54 Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Thu, 24 Jan 2019 10:48:54 +0300 Subject: [PATCH 5/9] remove prop-list --- spec/px-to-viewport.spec.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 628ad85..ba0747b 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -59,12 +59,9 @@ describe('value parsing', function() { }); it('should not replace values with an uppercase P or X', function () { - var options = { - propList: ['*'] - }; var rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'; var expected = '.rule { margin: 3.75vw calc(100% - 14PX); height: calc(100% - 6.25vw); font-size: 12Px; line-height: 5vw; }'; - var processed = postcss(pxToViewport(options)).process(rules).css; + var processed = postcss(pxToViewport()).process(rules).css; expect(processed).toBe(expected); }); From 1145e1d379cb9ce4892d60b17567edc838ae428d Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Thu, 24 Jan 2019 11:09:01 +0300 Subject: [PATCH 6/9] add unitless if zero --- index.js | 3 ++- spec/px-to-viewport.spec.js | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 7bcc46a..e6d4fdf 100755 --- a/index.js +++ b/index.js @@ -60,7 +60,8 @@ function createPxReplace(viewportSize, minPixelValue, unitPrecision, viewportUni if (!$1) return m; var pixels = parseFloat($1); if (pixels <= minPixelValue) return m; - return toFixed((pixels / viewportSize * 100), unitPrecision) + viewportUnit; + var parsedVal = toFixed((pixels / viewportSize * 100), unitPrecision); + return parsedVal === 0 ? '0' : parsedVal + viewportUnit; }; } diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 23632e2..9d0e6cb 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -36,6 +36,13 @@ describe('px-to-viewport', function() { expect(processed).toBe(expected); }); + + it('should remain unitless if 0', function () { + var expected = '.rule { font-size: 0px; font-size: 0; }'; + var processed = postcss(pxToViewport()).process(expected).css; + + expect(processed).toBe(expected); + }); }); describe('value parsing', function() { From 518a69adba5da93262d6ed9081d73e42eed336a2 Mon Sep 17 00:00:00 2001 From: msidolphin Date: Thu, 24 Jan 2019 17:03:19 +0800 Subject: [PATCH 7/9] add exclude option test cases --- spec/px-to-viewport.spec.js | 48 +++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) 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); + }); +}); From 1d2e9be8802b7459620a6b154ee59af08b61d07a Mon Sep 17 00:00:00 2001 From: msidolphin Date: Thu, 24 Jan 2019 17:13:54 +0800 Subject: [PATCH 8/9] file path maybe undefined --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 521bec2..27c4442 100755 --- a/index.js +++ b/index.js @@ -33,7 +33,7 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { css.walkDecls(function (decl, i) { // Add exlclude option to ignore some files like 'node_modules' - if (opts.exclude) { + 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]') { From fd6457fd99cbdef2210d82f98369ebb180fb8529 Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Fri, 25 Jan 2019 14:32:36 +0300 Subject: [PATCH 9/9] update readme --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 21a16c5..fd38aa9 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,11 @@ A plugin for [PostCSS](https://github.com/ai/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units. +## Install +``` +$ npm install postcss-px-to-viewport --save-dev +``` + ## Usage If your project involves a fixed width, this script will help to convert pixels into viewport units. @@ -113,7 +118,7 @@ Default: - `mediaQuery` (Boolean) Allow px to be converted in media queries. ### Use with gulp-postcss - +add to your gulp config: ```js var gulp = require('gulp'); var postcss = require('gulp-postcss'); @@ -133,3 +138,15 @@ gulp.task('css', function () { .pipe(gulp.dest('build/css')); }); ``` +### Use with Postcss configuration file +add to postcss.config.js +```js +module.exports = { + plugins: { + ... + 'postcss-px-to-viewport': { + // options + } + } +} +```