postcss-pxtransform 3.6.0-beta.2 → 3.6.0-beta.4

package/__tests__/index.test.js

@@ -66,9 +66,10 @@ describe('px2rem', function () {
     expect(processed).toBe(expected)
   })
 
-  it('7 should remain unitless if 0', function () {
-    const expected = '.rule { font-size: 0px; font-size: 0; }'
-    const processed = postcss(px2rem()).process(expected).css
+  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)
   })

package/index.js

@@ -40,18 +40,17 @@ module.exports = (options = {}) => {
 
   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
+  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
+      options.rootValue = (input) => (baseFontSize / options.deviceRatio[designWidth(input)]) * 2
       targetUnit = 'rem'
       transUnits.push('rpx')
       break
     }
     case 'rn': {
-      options.rootValue = input => 1 / options.deviceRatio[designWidth(input)] * 2
+      options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2
       targetUnit = 'px'
       break
     }
@@ -61,13 +60,13 @@ module.exports = (options = {}) => {
       break
     }
     case 'harmony': {
-      options.rootValue = input => 1 / options.deviceRatio[designWidth(input)]
+      options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
       targetUnit = 'px'
       break
     }
     default: {
       // mini-program
-      options.rootValue = input => 1 / options.deviceRatio[designWidth(input)]
+      options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)]
       targetUnit = 'rpx'
     }
   }
@@ -82,117 +81,124 @@ module.exports = (options = {}) => {
 
   return {
     postcssPlugin: 'postcss-pxtransform',
-    Comment (comment) {
-      if (comment.text === 'postcss-pxtransform disable') {
-        return
-      }
+    prepare (result) {
+      const pxReplace = createPxReplace(
+        opts.rootValue,
+        opts.unitPrecision,
+        opts.minPixelValue,
+        onePxTransform
+      )(result.root.source.input)
 
-      // delete code between comment in RN
-      // 有死循环的问题
-      if (options.platform === 'rn') {
-        if (comment.text === 'postcss-pxtransform rn eject enable') {
-          let next = comment.next()
-          while (next) {
-            if (next.text === 'postcss-pxtransform rn eject disable') {
-              break
-            }
-            const temp = next.next()
-            next.remove()
-            next = temp
+      /** 是否跳过当前文件不处理 */
+      let skip = false
+
+      return {
+        Comment (comment) {
+          if (comment.text === 'postcss-pxtransform disable') {
+            skip = true
+            return
           }
-        }
-      }
 
-      /*  #ifdef  %PLATFORM%
-       *  平台特有样式
-       *  #endif  */
-      const wordList = comment.text.split(' ')
-      // 指定平台保留
-      if (wordList.indexOf('#ifdef') > -1) {
-        // 非指定平台
-        if (wordList.indexOf(options.platform) === -1) {
-          let next = comment.next()
-          while (next) {
-            if (next.type === 'comment' && next.text.trim() === '#endif') {
-              break
+          // delete code between comment in RN
+          // 有死循环的问题
+          if (options.platform === 'rn') {
+            if (comment.text === 'postcss-pxtransform rn eject enable') {
+              let next = comment.next()
+              while (next) {
+                if (next.text === 'postcss-pxtransform rn eject disable') {
+                  break
+                }
+                const temp = next.next()
+                next.remove()
+                next = temp
+              }
             }
-            const temp = next.next()
-            next.remove()
-            next = temp
           }
-        }
-      }
 
-      /*  #ifdef  %PLATFORM%
-       *  平台特有样式
-       *  #endif  */
-      // 指定平台剔除
-      if (wordList.indexOf('#ifndef') > -1) {
-        // 指定平台
-        if (wordList.indexOf(options.platform) > -1) {
-          let next = comment.next()
-          while (next) {
-            if (next.type === 'comment' && next.text.trim() === '#endif') {
-              break
+          /*  #ifdef  %PLATFORM%
+           *  平台特有样式
+           *  #endif  */
+          const wordList = comment.text.split(' ')
+          // 指定平台保留
+          if (wordList.indexOf('#ifdef') > -1) {
+            // 非指定平台
+            if (wordList.indexOf(options.platform) === -1) {
+              let next = comment.next()
+              while (next) {
+                if (next.type === 'comment' && next.text.trim() === '#endif') {
+                  break
+                }
+                const temp = next.next()
+                next.remove()
+                next = temp
+              }
             }
-            const temp = next.next()
-            next.remove()
-            next = temp
           }
-        }
-      }
-    },
-
-    Declaration (decl) {
-      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
-      }
-    },
-
-    AtRule (rule) {
-      if (options.platform === 'harmony' && rule.name === 'media') {
-        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
-      }
-    },
 
-    Once (root) {
-      const pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue, onePxTransform)(root.source.input)
-
-      root.walkDecls(function (decl, i) {
-        // This should be the fastest test and will remove most declarations
-        if (decl.value.indexOf('px') === -1) return
+          /*  #ifdef  %PLATFORM%
+           *  平台特有样式
+           *  #endif  */
+          // 指定平台剔除
+          if (wordList.indexOf('#ifndef') > -1) {
+            // 指定平台
+            if (wordList.indexOf(options.platform) > -1) {
+              let next = comment.next()
+              while (next) {
+                if (next.type === 'comment' && next.text.trim() === '#endif') {
+                  break
+                }
+                const temp = next.next()
+                next.remove()
+                next = temp
+              }
+            }
+          }
+        },
+        Declaration (decl) {
+          if (skip) return
 
-        if (!satisfyPropList(decl.prop)) 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 (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
+            if (!satisfyPropList(decl.prop)) return
 
-        const value = decl.value.replace(pxRgx, pxReplace)
+            if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
 
-        // if rem unit already exists, do not add or replace
-        if (declarationExists(decl.parent, decl.prop, value)) 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.parent.insertAfter(i, decl.clone({ value: value }))
-        }
-      })
+            if (opts.replace) {
+              decl.value = value
+            } else {
+              decl.cloneAfter({ value: value })
+            }
+          }
+        },
 
-      if (opts.mediaQuery) {
-        root.walkAtRules('media', function (rule) {
-          if (rule.params.indexOf('px') === -1) return
-          rule.params = rule.params.replace(pxRgx, pxReplace)
-        })
+        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)
+            }
+          },
+        },
       }
-    }
+    },
   }
 }
 
@@ -228,9 +234,8 @@ function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransfor
       }
       const pixels = parseFloat($1)
       if (pixels < minPixelValue) return m
-      const fixedVal = toFixed((pixels / rootValue(input, m, $1)), unitPrecision)
-      // return (fixedVal === 0) ? '0' : fixedVal + targetUnit
-      // 不带单位不支持在calc表达式中参与计算
+      const fixedVal = toFixed(pixels / rootValue(input, m, $1), unitPrecision)
+      // 不带单位不支持在calc表达式中参与计算(https://github.com/NervJS/taro/issues/12607)
       return fixedVal + targetUnit
     }
   }
@@ -239,12 +244,12 @@ function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransfor
 function toFixed (number, precision) {
   const multiplier = Math.pow(10, precision + 1)
   const wholeNumber = Math.floor(number * multiplier)
-  return Math.round(wholeNumber / 10) * 10 / multiplier
+  return (Math.round(wholeNumber / 10) * 10) / multiplier
 }
 
 function declarationExists (decls, prop, value) {
   return decls.some(function (decl) {
-    return (decl.prop === prop && decl.value === value)
+    return decl.prop === prop && decl.value === value
   })
 }
 
@@ -258,7 +263,7 @@ function blacklistedSelector (blacklist, selector) {
 
 function createPropListMatcher (propList) {
   const hasWild = propList.indexOf('*') > -1
-  const matchAll = (hasWild && propList.length === 1)
+  const matchAll = hasWild && propList.length === 1
   const lists = {
     exact: filterPropList.exact(propList),
     contain: filterPropList.contain(propList),

package/package.json

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