postcss-pxtransform 3.8.0-canary.0 → 4.0.0-alpha.2

package/LICENSE

@@ -158,3 +158,17 @@ 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 [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT:
+`/packages/taro-components/src/components/*.scss`
+See `/LICENSE.txt` for details of the license.
+
+==================
+
+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.

package/__tests__/index.test.js

@@ -523,6 +523,17 @@ describe('platform 为 weapp', () => {
     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', () => {
@@ -549,6 +560,18 @@ describe('platform 为 weapp, 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', () => {
@@ -575,6 +598,18 @@ describe('platform 为 weapp, 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', () => {
@@ -599,6 +634,17 @@ describe('platform 为 h5', () => {
     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', () => {
@@ -625,6 +671,18 @@ describe('platform 为 h5, 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，文件头部带注释的不转换', () => {
@@ -719,6 +777,16 @@ describe('rpx 单位转换', () => {
     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 单位转换', () => {
@@ -754,6 +822,17 @@ describe('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，适配', () => {

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: [],
@@ -22,6 +22,7 @@ const legacyOptions = {
 }
 
 const deviceRatio = {
+  375: 2,
   640: 2.34 / 2,
   750: 1,
   828: 1.81 / 2
@@ -40,7 +41,7 @@ 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) =>
@@ -50,17 +51,22 @@ module.exports = (options = {}) => {
     case 'h5': {
       targetUnit = options.targetUnit ?? 'rem'
 
-      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
-        }
+      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
       }
 
       transUnits.push('rpx')
@@ -116,6 +122,10 @@ module.exports = (options = {}) => {
 
       /** 是否跳过当前文件不处理 */
       let skip = false
+      
+      if (exclude && exclude?.(result.opts.from)) {
+        return null
+      }
 
       return {
         // 注意：钩子在节点变动时会重新执行，Once，OnceExit只执行一次，https://github.com/NervJS/taro/issues/13238
@@ -125,6 +135,8 @@ module.exports = (options = {}) => {
             return
           }
 
+          if (!opts.methods.includes('platform')) return
+
           // delete code between comment in RN
           // 有死循环的问题
           if (options.platform === 'rn') {
@@ -182,47 +194,34 @@ module.exports = (options = {}) => {
         },
         Declaration (decl) {
           if (skip) return
+          if (!opts.methods.includes('size')) return
 
           if (decl[processed]) return
 
           // 标记当前 node 已处理
           decl[processed] = true
 
-          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')
-            })
+          if (decl.value.indexOf('px') === -1) return
+
+          if (!satisfyPropList(decl.prop)) return
+
+          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 {
-            if (decl.value.indexOf('px') === -1) return
-
-            if (!satisfyPropList(decl.prop)) return
-
-            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 {
-              decl.cloneAfter({ value: value })
-            }
+            decl.cloneAfter({ value: value })
           }
         },
         AtRule: {
           media: (rule) => {
             if (skip) return
-            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)
-            }
+            if (!opts.methods.includes('size')) return
+
+            if (rule.params.indexOf('px') === -1) return
+            rule.params = rule.params.replace(pxRgx, pxReplace)
           },
         },
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.8.0-canary.0",
+  "version": "4.0.0-alpha.2",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [
@@ -18,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/NervJS/taro/issues"
   },
-  "homepage": "https://github.com/NervJS/taro#readme",
+  "homepage": "https://github.com/NervJS/taro/tree/next/packages/postcss-pxtransform#readme",
   "jest": {
     "testEnvironment": "node",
     "testEnvironmentOptions": {}