postcss-pxtransform 3.6.5 → 3.7.0-alpha.1

package/__tests__/index.test.js

@@ -525,6 +525,58 @@ describe('platform 为 weapp', () => {
   })
 })
 
+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)
+  })
+})
+
+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)
+  })
+})
+
 describe('platform 为 h5', () => {
   it('{platform: \'h5\', designWidth: 750} ', () => {
     const rules = 'h1 {margin: 0 0 20px;font-size: 40px;line-height: 1.2;}'
@@ -549,6 +601,32 @@ describe('platform 为 h5', () => {
   })
 })
 
+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)
+  })
+})
+
 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;}'
@@ -665,6 +743,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: 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{}')
+  })
 })
 
 describe('platform 为 rn，适配', () => {

package/index.js

@@ -42,19 +42,27 @@ module.exports = (options = {}) => {
   options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
 
   const transUnits = ['px']
-  let baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20)
+  const 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': {
       targetUnit = options.targetUnit ?? 'rem'
-      options.rootValue = (input) => {
-        if (targetUnit === 'vw') {
-          baseFontSize = 0.5 * designWidth(input) / 100
+
+      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
         }
-        return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 
       }
+
       transUnits.push('rpx')
       break
     }
@@ -75,8 +83,16 @@ module.exports = (options = {}) => {
     }
     default: {
       // mini-program
-      options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
-      targetUnit = 'rpx'
+      targetUnit = options.targetUnit ?? 'rpx'
+
+      if (targetUnit === 'rem') {
+        options.rootValue = (input) => (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
+      } else if (targetUnit === 'px') {
+        options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2
+      } else {
+        // rpx
+        options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.6.5",
+  "version": "3.7.0-alpha.1",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [