postcss-pxtransform 3.7.0-beta.1 → 3.7.0-beta.4

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

@@ -22,6 +22,7 @@ const legacyOptions = {
 }
 
 const deviceRatio = {
+  375: 2,
   640: 2.34 / 2,
   750: 1,
   828: 1.81 / 2
@@ -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')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.7.0-beta.1",
+  "version": "3.7.0-beta.4",
   "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": {}