postcss-pxtransform 3.6.1 → 3.6.2-canary.0

package/LICENSE

@@ -137,3 +137,24 @@ MIT (miniprogram-render):
 The following files embed [miniprogram-render](https://github.com/Tencent/kbone) MIT:
 `/packages/taro-plugin-http/src/runtime/Cookie.ts`
 See `/LICENSE` for details of the license.
+
+==================
+
+MIT (stencil-ds-output-targets):
+The following files embed [stencil-ds-output-targets](https://github.com/ionic-team/stencil-ds-output-targets/) MIT:
+`/packages/taro-components-library-react/src/react-component-lib/utils/attachProps.ts`
+`/packages/taro-components-library-react/src/react-component-lib/utils/case.ts`
+`/packages/taro-components-library-react/src/react-component-lib/utils/dev.ts`
+`/packages/taro-components-library-react/src/react-component-lib/utils/index.tsx`
+`/packages/taro-components-library-react/src/react-component-lib/createComponent.tsx`
+`/packages/taro-components-library-react/src/react-component-lib/createOverlayComponent.tsx`
+`/packages/taro-components-library-react/src/react-component-lib/interfaces.ts`
+`/packages/taro-components-library-vue3/src/vue-component-lib/utils.ts`
+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.

package/__tests__/index.test.js

@@ -631,6 +631,7 @@ describe('rpx 单位转换', () => {
     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 = {
@@ -642,6 +643,30 @@ describe('rpx 单位转换', () => {
   })
 })
 
+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{}')
+  })
+})
+
 describe('platform 为 rn，适配', () => {
   it('{platform: \'rn\', designWidth: 750} ', () => {
     const rules = 'view { width: 100px; }'

package/index.js

@@ -42,13 +42,19 @@ module.exports = (options = {}) => {
   options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
 
   const transUnits = ['px']
-  const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
+  let baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
   const designWidth = (input) =>
     typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth
+
   switch (options.platform) {
     case 'h5': {
-      options.rootValue = (input) => (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
-      targetUnit = 'rem'
+      targetUnit = options.targetUnit ?? 'rem'
+      options.rootValue = (input) => {
+        if (targetUnit === 'vw') {
+          baseFontSize = 0.5 * designWidth(input) / 100
+        }
+        return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 
+      }
       transUnits.push('rpx')
       break
     }
@@ -240,9 +246,12 @@ function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransfor
       }
       const pixels = parseFloat($1)
       if (pixels < minPixelValue) return m
-      const fixedVal = toFixed(pixels / rootValue(input, m, $1), unitPrecision)
+      let val = pixels / rootValue(input, m, $1)
+      if (unitPrecision >= 0 && unitPrecision <= 100) {
+        val = toFixed(val, unitPrecision)
+      }
       // 不带单位不支持在calc表达式中参与计算(https://github.com/NervJS/taro/issues/12607)
-      return fixedVal + targetUnit
+      return val + targetUnit
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.6.1",
+  "version": "3.6.2-canary.0",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [
@@ -20,9 +20,12 @@
   },
   "homepage": "https://github.com/NervJS/taro#readme",
   "jest": {
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "testEnvironmentOptions": {}
   },
   "devDependencies": {
+    "jest": "^29.3.1",
+    "jest-cli": "^29.3.1",
     "postcss": "^8.4.18"
   },
   "peerDependencies": {