postcss-pxtransform 3.5.11 → 3.6.0-alpha.1

package/index.js

@@ -1,7 +1,5 @@
-'use strict'
-
-const postcss = require('postcss')
 const pxRegex = require('./lib/pixel-unit-regex')
+const PXRegex = require('./lib/pixel-upper-unit-regex')
 const filterPropList = require('./lib/filter-prop-list')
 
 const defaults = {
@@ -37,7 +35,7 @@ const DEFAULT_WEAPP_OPTIONS = {
 
 let targetUnit
 
-module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
+module.exports = (options = {}) => {
   options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options)
 
   const transUnits = ['px']
@@ -62,6 +60,11 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
       targetUnit = 'px'
       break
     }
+    case 'harmony': {
+      options.rootValue = input => 1 / options.deviceRatio[designWidth(input)]
+      targetUnit = 'px'
+      break
+    }
     default: {
       // mini-program
       options.rootValue = input => 1 / options.deviceRatio[designWidth(input)]
@@ -77,26 +80,20 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
 
   const satisfyPropList = createPropListMatcher(opts.propList)
 
-  return function (css) {
-    const pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue, onePxTransform)(css.source.input)
-
-    for (let i = 0; i < css.nodes.length; i++) {
-      if (css.nodes[i].type === 'comment') {
-        if (css.nodes[i].text === 'postcss-pxtransform disable') {
-          return
-        } else {
-          break
-        }
+  return {
+    postcssPlugin: 'postcss-pxtransform',
+    Comment (comment) {
+      if (comment.text === 'postcss-pxtransform disable') {
+        return
       }
-    }
 
-    // delete code between comment in RN
-    if (options.platform === 'rn') {
-      css.walkComments(comment => {
+      // 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.type === 'comment' && next.text === 'postcss-pxtransform rn eject disable') {
+            if (next.text === 'postcss-pxtransform rn eject disable') {
               break
             }
             const temp = next.next()
@@ -104,13 +101,11 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
             next = temp
           }
         }
-      })
-    }
+      }
 
-    /*  #ifdef  %PLATFORM%  */
-    // 平台特有样式
-    /*  #endif  */
-    css.walkComments(comment => {
+      /*  #ifdef  %PLATFORM%
+       *  平台特有样式
+       *  #endif  */
       const wordList = comment.text.split(' ')
       // 指定平台保留
       if (wordList.indexOf('#ifdef') > -1) {
@@ -127,13 +122,10 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
           }
         }
       }
-    })
 
-    /*  #ifndef  %PLATFORM%  */
-    // 平台特有样式
-    /*  #endif  */
-    css.walkComments(comment => {
-      const wordList = comment.text.split(' ')
+      /*  #ifdef  %PLATFORM%
+       *  平台特有样式
+       *  #endif  */
       // 指定平台剔除
       if (wordList.indexOf('#ifndef') > -1) {
         // 指定平台
@@ -149,36 +141,60 @@ module.exports = postcss.plugin('postcss-pxtransform', function (options = {}) {
           }
         }
       }
-    })
+    },
 
-    css.walkDecls(function (decl, i) {
-      // This should be the fastest test and will remove most declarations
-      if (decl.value.indexOf('px') === -1) return
+    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
+      }
+    },
 
-      if (!satisfyPropList(decl.prop)) return
+    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
+      }
+    },
 
-      if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
+    Once (root) {
+      const pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue, onePxTransform)(root.source.input)
 
-      const value = decl.value.replace(pxRgx, pxReplace)
+      root.walkDecls(function (decl, i) {
+        // This should be the fastest test and will remove most declarations
+        if (decl.value.indexOf('px') === -1) return
 
-      // if rem unit already exists, do not add or replace
-      if (declarationExists(decl.parent, decl.prop, value)) return
+        if (!satisfyPropList(decl.prop)) return
 
-      if (opts.replace) {
-        decl.value = value
-      } else {
-        decl.parent.insertAfter(i, decl.clone({ value: value }))
-      }
-    })
+        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.mediaQuery) {
-      css.walkAtRules('media', function (rule) {
-        if (rule.params.indexOf('px') === -1) return
-        rule.params = rule.params.replace(pxRgx, pxReplace)
+        if (opts.replace) {
+          decl.value = value
+        } else {
+          decl.parent.insertAfter(i, decl.clone({ value: value }))
+        }
       })
+
+      if (opts.mediaQuery) {
+        root.walkAtRules('media', function (rule) {
+          if (rule.params.indexOf('px') === -1) return
+          rule.params = rule.params.replace(pxRgx, pxReplace)
+        })
+      }
     }
   }
-})
+}
 
 function convertLegacyOptions (options) {
   if (typeof options !== 'object') return
@@ -284,3 +300,5 @@ function createPropListMatcher (propList) {
     )
   }
 }
+
+module.exports.postcss = true

package/lib/pixel-upper-unit-regex.js

@@ -0,0 +1,11 @@
+/*eslint-disable*/
+
+// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
+
+// Not anything inside double quotes
+// Not anything inside single quotes
+// Not anything inside url()
+// Any digit followed by PX
+// !singlequotes|!doublequotes|!url()|pixelunit
+
+module.exports = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)(PX)/g

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.5.11",
+  "version": "3.6.0-alpha.1",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
+  "main": "index.js",
   "keywords": [
     "postcss",
     "css",
@@ -18,13 +19,15 @@
     "url": "https://github.com/NervJS/taro/issues"
   },
   "homepage": "https://github.com/NervJS/taro#readme",
-  "dependencies": {
-    "postcss": "^6.0.22"
-  },
   "jest": {
     "testEnvironment": "node"
   },
-  "main": "index.js",
+  "devDependencies": {
+    "postcss": "^8.4.18"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.18"
+  },
   "scripts": {
     "test": "jest"
   }