postcss-pxtransform 4.0.1-alpha.0 → 4.0.1

package/LICENSE

@@ -154,8 +154,15 @@ See `/LICENSE` for details of the license.
 
 ==================
 
+MIT (stencil-vue2-output-target):
+The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
+`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
 MIT (weui):
-The following files embed [weui](https://github.com/Tencent/weui) MIT:
+The following files embed [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT:
 `/packages/taro-components/src/components/*.scss`
 See `/LICENSE.txt` for details of the license.
 
@@ -165,10 +172,3 @@ Apache-2.0 (intersection-observer):
 The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
 `/packages/taro-api/src/polyfill/intersection-observer.ts`
 See `/LICENSE.txt` for details of the license.
-
-==================
-
-MIT (babel-plugin-jsx-dom-expressions):
-The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
-`/packages/babel-plugin-transform-solid-jsx/src/*`
-See `/LICENSE` for details of the license.

package/__tests__/index.test.js

@@ -0,0 +1,870 @@
+'use strict'
+const postcss = require('postcss')
+const px2rem = require('../index')
+
+const basicCSS = '.rule { font-size: 15px }'
+const filterPropList = require('../lib/filter-prop-list')
+
+describe('px2rem', function () {
+  it('1 should work on the readme example', function () {
+    const input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }'
+    const output = 'h1 { margin: 0 0 0.585rem; font-size: 0.936rem; line-height: 1.2; letter-spacing: 0.02925rem; }'
+    const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
+      .process(input).css
+
+    expect(processed).toBe(output)
+  })
+
+  it('2 should replace the px unit with rem', function () {
+    const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
+      .process(basicCSS).css
+    const expected = '.rule { font-size: 0.43875rem }'
+
+    expect(processed).toBe(expected)
+  })
+
+  it('3 should ignore non px properties', function () {
+    const expected = '.rule { font-size: 2em }'
+    const processed = postcss(px2rem({ platform: 'h5', designWidth: 640 }))
+      .process(expected).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('4 should handle < 1 values and values without a leading 0 - legacy',
+    function () {
+      const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
+      const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        propWhiteList: ['margin']
+      }
+      const processed = postcss(px2rem(options)).process(rules).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('5 should handle < 1 values and values without a leading 0', function () {
+    const rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'
+    const expected = '.rule { margin: 0.5rem 0.01463rem -0.00585rem -.2em }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      propList: ['margin']
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('6 should not add properties that already exist', function () {
+    const expected = '.rule { font-size: 40px; font-size: 1rem; }'
+    const processed = postcss(px2rem({ platform: 'h5', designWidth: 750 }))
+      .process(expected).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('7 属性值为"0"时不处理，为"0px"时仍然单位转换', function () {
+    const rule = '.rule { font-size: 0px; font-size: 0; }'
+    const expected = '.rule { font-size: 0rpx; font-size: 0; }'
+    const processed = postcss(px2rem()).process(rule).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('8 should work on custom baseFontSize', function () {
+    const processed = postcss(px2rem({ platform: 'h5', baseFontSize: 15 })).process(basicCSS).css
+    const expected = '.rule { font-size: 0.5rem }'
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('value parsing', function () {
+  it('1 should not replace values in double quotes or single quotes - legacy',
+    function () {
+      const options = {
+        platform: 'h5',
+        designWidth: 640
+        // propWhiteList: []
+      }
+      const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
+      const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
+      const processed = postcss(px2rem(options)).process(rules).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('2 should not replace values in double quotes or single quotes',
+    function () {
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        propList: ['*']
+      }
+      const rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'
+      const expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 0.468rem; }'
+      const processed = postcss(px2rem(options)).process(rules).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('3 should not replace values in `url()` - legacy', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+      // propWhiteList: []
+    }
+    const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
+    const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('4 should not replace values in `url()`', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      propList: ['*']
+    }
+    const rules = '.rule { background: url(16px.jpg); font-size: 16px; }'
+    const expected = '.rule { background: url(16px.jpg); font-size: 0.468rem; }'
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('5 should not replace values with an uppercase P or X', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      propList: ['*']
+    }
+    const rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'
+    const expected = '.rule { margin: 0.351rem calc(100% - 14PX); height: calc(100% - 0.585rem); font-size: 12Px; line-height: 0.468rem; }'
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('unitPrecision', function () {
+  // Deprecate
+  it('1 should replace using a decimal of 2 places - legacy', function () {
+    const expected = '.rule { font-size: 0.44rem }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      unit_precision: 2
+    }
+    const processed = postcss(px2rem(options)).process(basicCSS).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('2 should replace using a decimal of 2 places', function () {
+    const expected = '.rule { font-size: 0.44rem }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      unitPrecision: 2
+    }
+    const processed = postcss(px2rem(options)).process(basicCSS).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('propWhiteList', function () {
+  // Deprecate
+  it('3 should only replace properties in the white list - legacy',
+    function () {
+      const expected = '.rule { font-size: 15px }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        prop_white_list: ['font']
+      }
+      const processed = postcss(px2rem(options)).process(basicCSS).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('4 should only replace properties in the white list - legacy',
+    function () {
+      const expected = '.rule { font-size: 15px }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        propWhiteList: ['font']
+      }
+      const processed = postcss(px2rem(options)).process(basicCSS).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('5 should only replace properties in the white list - legacy',
+    function () {
+      const css = '.rule { margin: 16px; margin-left: 10px }'
+      const expected = '.rule { margin: 0.468rem; margin-left: 10px }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        propWhiteList: ['margin']
+      }
+      const processed = postcss(px2rem(options)).process(css).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('6 should only replace properties in the prop list', function () {
+    const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
+    const expected = '.rule { font-size: 0.468rem; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 0.468rem }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      propWhiteList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad']
+    }
+    const processed = postcss(px2rem(options)).process(css).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('7 should only replace properties in the prop list with wildcard',
+    function () {
+      const css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'
+      const expected = '.rule { font-size: 16px; margin: 0.468rem; margin-left: 5px; padding: 5px; padding-right: 16px }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        propWhiteList: ['*', '!margin-left', '!*padding*', '!font*']
+      }
+      const processed = postcss(px2rem(options)).process(css).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('8 should replace all properties when white list is empty', function () {
+    const rules = '.rule { margin: 16px; font-size: 15px }'
+    const expected = '.rule { margin: 0.468rem; font-size: 0.43875rem }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+      // propWhiteList: []
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('selectorBlackList', function () {
+  // Deprecate
+  it('1 should ignore selectors in the selector black list - legacy',
+    function () {
+      const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
+      const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
+      const options = {
+        platform: 'h5',
+        designWidth: 640,
+        selector_black_list: ['.rule2']
+      }
+      const processed = postcss(px2rem(options)).process(rules).css
+
+      expect(processed).toBe(expected)
+    })
+
+  it('2 should ignore selectors in the selector black list', function () {
+    const rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'
+    const expected = '.rule { font-size: 0.43875rem } .rule2 { font-size: 15px }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      selectorBlackList: ['.rule2']
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('3 should ignore every selector with `body$`', function () {
+    const rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }'
+    const expected = 'body { font-size: 0.468rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 0.468rem; }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      selectorBlackList: ['body$']
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+
+  it('4 should only ignore exactly `body`', function () {
+    const rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }'
+    const expected = 'body { font-size: 16px; } .class-body { font-size: 0.468rem; } .simple-class { font-size: 0.468rem; }'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      selectorBlackList: [/^body$/]
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('replace', function () {
+  it('1 should leave fallback pixel unit with root em value', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      replace: false
+    }
+    const processed = postcss(px2rem(options)).process(basicCSS).css
+    const expected = '.rule { font-size: 15px; font-size: 0.43875rem }'
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('mediaQuery', function () {
+  // Deprecate
+  it('1 should replace px in media queries', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      media_query: true
+    }
+    const processed = postcss(px2rem(options))
+      .process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
+    const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
+
+    expect(processed).toBe(expected)
+  })
+
+  it('2 should replace px in media queries', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      mediaQuery: true
+    }
+    const processed = postcss(px2rem(options))
+      .process('@media (min-width: 500px) { .rule { font-size: 16px } }').css
+    const expected = '@media (min-width: 14.625rem) { .rule { font-size: 0.468rem } }'
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('minPixelValue', function () {
+  it('1 should not replace values below minPixelValue', function () {
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      // propWhiteList: [],
+      minPixelValue: 2
+    }
+    const rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'
+    const expected = '.rule { border: 1px solid #000; font-size: 0.468rem; margin: 1px 0.2925rem; }'
+    const processed = postcss(px2rem(options)).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('filter-prop-list', function () {
+  it('1 should find "exact" matches from propList', function () {
+    const propList = [
+      'font-size',
+      'margin',
+      '!padding',
+      '*border*',
+      '*',
+      '*y',
+      '!*font*']
+    const expected = 'font-size,margin'
+    expect(filterPropList.exact(propList).join()).toBe(expected)
+  })
+
+  it('2 should find "contain" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        '*border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'margin,border'
+      expect(filterPropList.contain(propList).join()).toBe(expected)
+    })
+
+  it('3 should find "start" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        'border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'border'
+      expect(filterPropList.startWith(propList).join()).toBe(expected)
+    })
+
+  it('4 should find "end" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        'border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'y'
+      expect(filterPropList.endWith(propList).join()).toBe(expected)
+    })
+
+  it('5 should find "not" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        'border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'padding'
+      expect(filterPropList.notExact(propList).join()).toBe(expected)
+    })
+
+  it('6 should find "not contain" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        '!border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'font'
+      expect(filterPropList.notContain(propList).join()).toBe(expected)
+    })
+
+  it('7 should find "not start" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        '!border*',
+        '*',
+        '*y',
+        '!*font*']
+      const expected = 'border'
+      expect(filterPropList.notStartWith(propList).join()).toBe(expected)
+    })
+
+  it('8 should find "not end" matches from propList and reduce to string',
+    function () {
+      const propList = [
+        'font-size',
+        '*margin*',
+        '!padding',
+        '!border*',
+        '*',
+        '!*y',
+        '!*font*']
+      const expected = 'y'
+      expect(filterPropList.notEndWith(propList).join()).toBe(expected)
+    })
+})
+
+// 补充的测试用例
+
+describe('不传任何配置', () => {
+  it('不传任何配置', function () {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 20rpx;font-size: 40rpx;line-height: 1.2;}'
+    const processed = postcss(px2rem()).process(rules).css
+
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 weapp', () => {
+  it('{platform: \'weapp\', designWidth: 750} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 750
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 23.4rpx;font-size: 46.8rpx;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 375} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 40rpx;font-size: 80rpx;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 375
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 weapp, targetUnit 为 rem', () => {
+  it('{platform: \'weapp\', designWidth: 750, targetUnit: \'rem\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 0.5rem;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 750,
+      targetUnit: 'rem'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 640, targetUnit: \'rem\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 0.585rem;font-size: 1.17rem;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 640,
+      targetUnit: 'rem'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 375, targetUnit: \'rem\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 1rem;font-size: 2rem;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 375,
+      targetUnit: 'rem'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 weapp, targetUnit 为 px', () => {
+  it('{platform: \'weapp\', designWidth: 750, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 10px;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 750,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 640, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 11.7px;font-size: 23.4px;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 640,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'weapp\', designWidth: 375, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 375,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 h5', () => {
+  it('{platform: \'h5\', designWidth: 750} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 0.5rem;font-size: 1rem;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'h5\', designWidth: 375} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 1rem;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 375
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 h5, targetUnit 为 px', () => {
+  it('{platform: \'h5\', designWidth: 750, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 10px;font-size: 20px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'h5\', designWidth: 640, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 11.7px;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+
+  it('{platform: \'h5\', designWidth: 375, targetUnit: \'px\'} ', () => {
+    const rules = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const expected = 'h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 375,
+      targetUnit: 'px'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(expected)
+  })
+})
+
+describe('platform 为 h5，文件头部带注释的不转换', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = '/*postcss-pxtransform disable*/ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(rules)
+  })
+})
+
+describe('platform 为 h5，指定 h5 平台保留', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = '/*  #ifdef  h5  */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/*  #endif  */'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(rules)
+  })
+})
+
+describe('platform 为 h5，指定平台 rn 平台保留', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = '/*  #ifdef  rn  */ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}/*  #endif  */ .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('/*  #ifdef  rn  *//*  #endif  */ .test{}')
+  })
+})
+
+describe('platform 为 rn，指定平台 h5 rn 平台保留', () => {
+  it('{platform: \'rn\', designWidth: 640} ', () => {
+    const rules = '/*  #ifdef  h5 rn  */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/*  #endif  */ .test{}'
+    const options = {
+      platform: 'rn',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(rules)
+  })
+})
+
+describe('platform 为 h5，指定平台 rn 平台剔除', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = '/*  #ifndef  rn  */ h1 {margin: 0 0 20Px;font-size: 40Px;line-height: 1.2;}/*  #endif  */ .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe(rules)
+  })
+})
+
+describe('platform 为 h5，指定平台 h5 平台剔除', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = '/*  #ifndef  h5  */ h1 {margin: 0 0 20px;font-size: 40Px;line-height: 1.2;}/*  #endif  */ .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('/*  #ifndef  h5  *//*  #endif  */ .test{}')
+  })
+})
+
+describe('rpx 单位转换', () => {
+  it('{platform: \'weapp\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'weapp\', designWidth: 375} ', () => {
+    const rules = 'h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'weapp',
+      designWidth: 375
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 20rpx;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+})
+
+describe('vw 单位转换', () => {
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 640px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 85.33333vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'h5\', designWidth: 750} ', () => {
+    const rules = 'h1 {margin: 0 0 375px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 750,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 50vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'h5\', designWidth: 640} ', () => {
+    const rules = 'h1 {margin: 0 0 320px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 640,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 50vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+
+  it('{platform: \'h5\', designWidth: 375} ', () => {
+    const rules = 'h1 {margin: 0 0 320px;font-size: 40Px;line-height: 1.2;} .test{}'
+    const options = {
+      platform: 'h5',
+      designWidth: 375,
+      targetUnit: 'vw'
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('h1 {margin: 0 0 85.33333vw;font-size: 40Px;line-height: 1.2;} .test{}')
+  })
+})
+
+describe('platform 为 rn，适配', () => {
+  it('{platform: \'rn\', designWidth: 750} ', () => {
+    const rules = 'view { width: 100px; }'
+    const options = {
+      platform: 'rn',
+      designWidth: 750,
+      deviceRatio: {
+        640: 2.34 / 2,
+        750: 1,
+        828: 1.81 / 2
+      }
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('view { width: 50px; }')
+  })
+})
+
+describe('platform 为 harmony，适配', () => {
+  it('{platform: \'harmony\', designWidth: 640} ', () => {
+    const rules = 'view { width: 100PX; }'
+    const options = {
+      platform: 'harmony',
+      designWidth: 640,
+      deviceRatio: {
+        640: 2.34 / 2,
+        750: 1,
+        828: 1.81 / 2
+      }
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('view { width: 100vp; }')
+  })
+})

package/index.js

@@ -1,8 +1,8 @@
 const pxRegex = require('./lib/pixel-unit-regex')
+const PXRegex = require('./lib/pixel-upper-unit-regex')
 const filterPropList = require('./lib/filter-prop-list')
 
 const defaults = {
-  methods: ['platform', 'size'],
   rootValue: 16,
   unitPrecision: 5,
   selectorBlackList: [],
@@ -36,41 +36,32 @@ const DEFAULT_WEAPP_OPTIONS = {
 
 const processed = Symbol('processed')
 
-let targetUnit
 
-const SPECIAL_PIXEL = ['Px', 'PX', 'pX']
-let unConvertTargetUnit
-let platform
+let targetUnit
 
 module.exports = (options = {}) => {
   options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
-  const exclude = options.exclude
+
   const transUnits = ['px']
   const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
   const designWidth = (input) =>
     typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth
 
-  platform = options.platform
   switch (options.platform) {
     case 'h5': {
       targetUnit = options.targetUnit ?? 'rem'
 
-      switch (targetUnit) {
-        case 'vw':
-        case 'vmin':
-          options.rootValue = (input) => {
-            return designWidth(input) / 100
-          }
-          break
-        case 'px':
-          options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2
-          break
-        default:
-          // rem
-          options.rootValue = (input) => {
-            return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
-          }
-          break
+      if (targetUnit === 'vw') {
+        options.rootValue = (input) => {
+          return designWidth(input) / 100
+        }
+      } else if (targetUnit === 'px') {
+        options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2
+      } else {
+        // rem
+        options.rootValue = (input) => {
+          return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
+        }
       }
 
       transUnits.push('rpx')
@@ -89,8 +80,6 @@ module.exports = (options = {}) => {
     case 'harmony': {
       options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
       targetUnit = 'px'
-      unConvertTargetUnit = 'ch' // harmony对于大小写的PX转换成其他单位，用于rust解析
-      transUnits.push(...SPECIAL_PIXEL)
       break
     }
     default: {
@@ -129,10 +118,6 @@ module.exports = (options = {}) => {
       /** 是否跳过当前文件不处理 */
       let skip = false
 
-      if (exclude && exclude?.(result.opts.from)) {
-        return null
-      }
-
       return {
         // 注意：钩子在节点变动时会重新执行，Once，OnceExit只执行一次，https://github.com/NervJS/taro/issues/13238
         Comment (comment) {
@@ -141,8 +126,6 @@ module.exports = (options = {}) => {
             return
           }
 
-          if (!opts.methods.includes('platform')) return
-
           // delete code between comment in RN
           // 有死循环的问题
           if (options.platform === 'rn') {
@@ -200,46 +183,47 @@ module.exports = (options = {}) => {
         },
         Declaration (decl) {
           if (skip) return
-          if (!opts.methods.includes('size')) return
 
           if (decl[processed]) return
 
           // 标记当前 node 已处理
           decl[processed] = true
 
-          if (!/px/i.test(decl.value)) return
+          if (options.platform === 'harmony') {
+            if (decl.value.indexOf('PX') === -1) return
+            const value = decl.value.replace(PXRegex, function (m, _$1, $2) {
+              return m.replace($2, 'vp')
+            })
+            decl.value = value
+          } else {
+            if (decl.value.indexOf('px') === -1) return
 
-          if (!satisfyPropList(decl.prop)) return
+            if (!satisfyPropList(decl.prop)) return
 
-          const isBlacklisted = blacklistedSelector(opts.selectorBlackList, decl.parent.selector)
-          if (isBlacklisted && platform !== 'harmony') return
-          let value
-          if (isBlacklisted) {
-            // 如果是harmony平台，黑名单的样式单位做特殊处理
-            if (platform === 'harmony') {
-              value = decl.value.replace(pxRgx, (m, $1) => $1 ? $1 + unConvertTargetUnit : m)
+            if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
+            const value = decl.value.replace(pxRgx, pxReplace)
+            // if rem unit already exists, do not add or replace
+            if (declarationExists(decl.parent, decl.prop, value)) return
+            if (opts.replace) {
+              decl.value = value
             } else {
-              // 如果是其他平台，黑名单的样式单位不做处理
-              return
+              decl.cloneAfter({ value: value })
             }
-          } else {
-            value = decl.value.replace(pxRgx, pxReplace)
-          }
-          // if rem unit already exists, do not add or replace
-          if (declarationExists(decl.parent, decl.prop, value)) return
-          if (opts.replace) {
-            decl.value = value
-          } else {
-            decl.cloneAfter({ value: value })
           }
         },
         AtRule: {
           media: (rule) => {
             if (skip) return
-            if (!opts.methods.includes('size')) return
-
-            if (!/px/i.test(rule.params)) return
-            rule.params = rule.params.replace(pxRgx, pxReplace)
+            if (options.platform === 'harmony') {
+              if (rule.params.indexOf('PX') === -1) return
+              const value = rule.params.replace(PXRegex, function (m, _$1, $2) {
+                return m.replace($2, 'vp')
+              })
+              rule.params = value
+            } else {
+              if (rule.params.indexOf('px') === -1) return
+              rule.params = rule.params.replace(pxRgx, pxReplace)
+            }
           },
         },
       }
@@ -271,28 +255,14 @@ function convertLegacyOptions (options) {
 }
 
 function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransform) {
-  const specialPxRgx = pxRegex(SPECIAL_PIXEL)
   return function (input) {
     return function (m, $1) {
       if (!$1) return m
-
-      if (platform === 'harmony' && specialPxRgx.test(m)) {
-        // harmony对大小写的PX转换成其他单位，用于rust解析
-        return $1 + unConvertTargetUnit
-      }
-
       if (!onePxTransform && parseInt($1, 10) === 1) {
-        if (platform === 'harmony') { return $1 + unConvertTargetUnit }
         return m
       }
       const pixels = parseFloat($1)
-      if (pixels < minPixelValue) {
-        if (platform === 'harmony') { return $1 + unConvertTargetUnit }
-        return m
-      }
-
-      // 转换工作，如果是harmony的话不转换
-      if (platform === 'harmony') { return m }
+      if (pixels < minPixelValue) return m
       let val = pixels / rootValue(input, m, $1)
       if (unitPrecision >= 0 && unitPrecision <= 100) {
         val = toFixed(val, unitPrecision)

package/package.json

@@ -1,9 +1,7 @@
 {
   "name": "postcss-pxtransform",
-  "version": "4.0.1-alpha.0",
+  "version": "4.0.1",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
-  "author": "O2Team",
-  "license": "MIT",
   "main": "index.js",
   "keywords": [
     "postcss",
@@ -11,10 +9,8 @@
     "postcss-plugin",
     "pxtransform"
   ],
-  "files": [
-    "lib",
-    "index.js"
-  ],
+  "author": "Pines-Cheng <spider.cs.nuc@gmail.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
@@ -22,16 +18,18 @@
   "bugs": {
     "url": "https://github.com/NervJS/taro/issues"
   },
-  "homepage": "https://github.com/NervJS/taro/tree/main/packages/postcss-pxtransform#readme",
+  "homepage": "https://github.com/NervJS/taro/tree/next/packages/postcss-pxtransform#readme",
   "jest": {
     "testEnvironment": "node",
     "testEnvironmentOptions": {}
   },
-  "engines": {
-    "node": ">= 18"
+  "devDependencies": {
+    "jest": "^29.3.1",
+    "jest-cli": "^29.3.1",
+    "postcss": "^8.4.18"
   },
   "peerDependencies": {
-    "postcss": "^8"
+    "postcss": "^8.4.18"
   },
   "scripts": {
     "test": "jest"