diff --git a/README.md b/README.md index 955d819..c2cc8b2 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,7 @@ Default: selectorBlackList: [], minPixelValue: 1, mediaQuery: false, + replace: true, exclude: [] // ignore some files } ``` @@ -124,6 +125,7 @@ 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. +- `replace` (Boolean) replaces rules containing rems instead of adding fallbacks. - `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. diff --git a/index.js b/index.js index 88273bf..7e3be9f 100755 --- a/index.js +++ b/index.js @@ -14,7 +14,8 @@ var defaults = { selectorBlackList: [], propList: ['*'], minPixelValue: 1, - mediaQuery: false + mediaQuery: false, + replace: true }; module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { @@ -54,9 +55,16 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { blacklistedSelector(opts.selectorBlackList, decl.parent.selector) ) return; - var unit = getUnit(decl.prop, opts) + var unit = getUnit(decl.prop, opts); + var value = decl.value.replace(pxRegex, createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, unit)); - decl.value = decl.value.replace(pxRegex, createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, unit)); + if (declarationExists(decl.parent, decl.prop, value)) return; + + if (opts.replace) { + decl.value = value; + } else { + decl.parent.insertAfter(i, decl.clone({ value: value })); + } }); if (opts.mediaQuery) { @@ -104,3 +112,9 @@ function blacklistedSelector(blacklist, selector) { return selector.match(regex); }); } + +function declarationExists(decls, prop, value) { + return decls.some(function (decl) { + return (decl.prop === prop && decl.value === value); + }); +} \ No newline at end of file diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 81ed2d6..3f3fa54 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -44,6 +44,13 @@ describe('px-to-viewport', function() { expect(processed).toBe(expected); }); + + it('should not add properties that already exist', function () { + var expected = '.rule { font-size: 16px; font-size: 5vw; }'; + var processed = postcss(pxToViewport()).process(expected).css; + + expect(processed).toBe(expected); + }); }); describe('value parsing', function() { @@ -293,6 +300,18 @@ describe('exclude', function () { }); }); +describe('replace', function () { + it('should leave fallback pixel unit with root em value', function () { + var options = { + replace: false + }; + var processed = postcss(pxToViewport(options)).process(basicCSS).css; + var expected = '.rule { font-size: 15px; font-size: 4.6875vw }'; + + expect(processed).toBe(expected); + }); +}); + describe('filter-prop-list', function () { it('should find "exact" matches from propList', function () { var propList = ['font-size', 'margin', '!padding', '*border*', '*', '*y', '!*font*']; @@ -342,3 +361,4 @@ describe('filter-prop-list', function () { expect(filterPropList.notEndWith(propList).join()).toBe(expected); }); }); +