diff --git a/src/index.js b/src/index.js index 264041b..4540774 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ const defaultOpts = { replace: true, mediaQuery: false, minPixelValue: 0, + selectorDoubleRemList: [], }; const toFixed = (number, precision) => { @@ -23,15 +24,15 @@ const toFixed = (number, precision) => { }; const isObject = o => typeof o === 'object' && o !== null; -const createPxReplace = (rootValue, identifier, unitPrecision, minPixelValue) => (m, $1, $2) => { +const createPxReplace = (rootValue, identifier, unitPrecision, minPixelValue) => (m, $1, $2, doubleRem) => { if (!$1) return m; if (identifier && m.indexOf(identifier) === 0) return m.replace(identifier, ''); const pixels = parseFloat($1); if (pixels < minPixelValue) return m; // { px: 100, rpx: 50 } const baseValue = isObject(rootValue) ? rootValue[$2] : rootValue; - const fixedVal = toFixed((pixels / baseValue), unitPrecision); - + const double = doubleRem === true ? 2 : 1; + const fixedVal = toFixed((pixels * double / baseValue), unitPrecision); return `${fixedVal}rem`; }; @@ -100,8 +101,8 @@ export default postcss.plugin('postcss-plugin-px2rem', options => { if (opts.propWhiteList.length && opts.propWhiteList.indexOf(_decl.prop) === -1) return; // 5th check seletor black list if (blacklistedSelector(opts.selectorBlackList, _decl.parent.selector)) return; - - const value = _decl.value.replace(pxRegex, pxReplace); + const doubleRem = blacklistedSelector(opts.selectorDoubleRemList, _decl.parent.selector); + const value = _decl.value.replace(pxRegex, (m, $1, $2) => pxReplace(m, $1, $2, doubleRem)); // if rem unit already exists, do not add or replace if (declarationExists(_decl.parent, _decl.prop, value)) return; diff --git a/test/index-test.js b/test/index-test.js index c25f4df..5916b80 100644 --- a/test/index-test.js +++ b/test/index-test.js @@ -5,6 +5,16 @@ import pxtorem from '../src/'; const basicCSS = '.rule { font-size: 15px }'; describe('px2rem', () => { + it('px to 2*rem,if .ant-*', () => { + const input = '.ant-abc { margin: 0 0 20px 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'; + const output = '.ant-abc { margin: 0 0 0.4rem 0.4rem; font-size: 0.64rem; line-height: 1.2; letter-spacing: 0.02rem; }'; + const processed = postcss(pxtorem({ + selectorDoubleRemList: [/.ant-/], + })).process(input).css; + + expect(processed).toBe(output); + }); + it('should work on the readme example', () => { const input = 'h1 { margin: 0 0 20px 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'; const output = 'h1 { margin: 0 0 0.2rem 0.2rem; font-size: 0.32rem; line-height: 1.2; letter-spacing: 0.01rem; }';