postcss-pxtransform 3.6.0-canary.9 → 3.6.1-alpha.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 
+Copyright (c) 2018 O2Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,121 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+========================================================================
+
+MIT (react-devtools):
+The following files embed [react-devtools](https://github.com/facebook/react) MIT:
+`/packages/taro-plugin-react-devtools/src/backend/index.js`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (vue-devtools):
+The following files embed [vue-devtools](https://github.com/vuejs/devtools) MIT:
+`/packages/taro-plugin-vue-devtools/src/backend/*`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (vite):
+The following files embed [vite](https://github.com/vitejs/vite) MIT:
+`/packages/taro-webpack5-prebundle/src/prebundle/scanImport.ts`,
+`/packages/taro-webpack5-prebundle/src/prebundle/bundle.ts`,
+`/packages/taro-webpack5-prebundle/src/h5.ts`,
+`/packages/taro-webpack5-prebundle/src/min.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (webpack):
+The following files embed [webpack](https://github.com/webpack/webpack) MIT:
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerEntryModule.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerPlugin.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerReferencePlugin.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroModuleFederationPlugin.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (sizzle):
+The following files embed [sizzle](https://github.com/jquery/sizzle) MIT:
+`/packages/taro-extends/src/jquery/sizzle.js`
+See `/LICENSE.txt` for details of the license.
+
+==================
+
+MIT (zepto):
+The following files embed [zepto](https://github.com/madrobby/zepto) MIT:
+`/packages/taro-extends/src/jquery/zepto.js`,
+`/packages/taro-extends/src/jquery/event.js`
+See `/MIT-LICENSE` for details of the license.
+
+==================
+
+MIT (css-to-react-native):
+The following files embed [css-to-react-native](https://github.com/styled-components/css-to-react-native) MIT:
+`/packages/css-to-react-native/src/css-to-react-native/*`
+See `/LICENSE.md` for details of the license.
+
+==================
+
+MIT (reactify-wc):
+The following files embed [reactify-wc](https://github.com/BBKolton/reactify-wc) MIT:
+`/packages/taro-components-library-react/src/component-lib/reactify-wc.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (ant-design-mobile-rn):
+The following files embed [ant-design-mobile-rn](https://github.com/ant-design/ant-design-mobile-rn) MIT:
+`/packages/taro-components-rn/src/components/Swiper/carousel.tsx`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (react-wx-images-viewer):
+The following files embed [react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer) MIT:
+`/packages/taro-h5/src/api/media/image/previewImage.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (webpack-contrib/css-loader):
+The following files embed [webpack-contrib/css-loader](https://github.com/webpack-contrib/css-loader) MIT:
+`/packages/taro-rn-style-transformer/src/utils/index.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (react-native):
+The following files embed [react-native](https://github.com/facebook/react-native) MIT:
+`/packages/taro-rn-style-transformer/src/transforms/StyleSheet/*`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (myrne/performance-now):
+The following files embed [myrne/performance-now](https://github.com/myrne/performance-now) MIT:
+`/packages/taro-runtime/src/bom/raf.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+Apache (chameleon-api):
+The following files embed [chameleon-api](https://github.com/chameleon-team/chameleon-api) Apache:
+`/packages/taro-h5/src/api/device/clipboard.ts`
+
+==================
+
+MIT (uni-app):
+The following files embed [uni-app](https://github.com/dcloudio/uni-app) MIT:
+`/packages/taro-components-rn/src/components/Video/index.tsx`
+See `/LICENSE` for details of the license.
+
+==================
+
+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.

package/__tests__/index.test.js

@@ -66,13 +66,14 @@ 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)
   })
-  
+
   it('8 should work on custom baseFontSize', function () {
     const processed = postcss(px2rem({ platform: 'h5', baseFontSize: 15 })).process(basicCSS).css
     const expected = '.rule { font-size: 0.5rem }'
@@ -640,3 +641,37 @@ describe('rpx 单位转换', () => {
     expect(processed).toBe('h1 {margin: 0 0 0.585rem;font-size: 40Px;line-height: 1.2;} .test{}')
   })
 })
+
+describe('platform 为 rn，适配', () => {
+  it('{platform: \'rn\', designWidth: 750} ', () => {
+    const rules = 'view { width: 100px; }'
+    const options = {
+      platform: 'rn',
+      designWidth: 750,
+      deviceRatio: {
+        640: 2.34 / 2,
+        750: 1,
+        828: 1.81 / 2
+      }
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('view { width: 50px; }')
+  })
+})
+
+describe('platform 为 harmony，适配', () => {
+  it('{platform: \'harmony\', designWidth: 640} ', () => {
+    const rules = 'view { width: 100PX; }'
+    const options = {
+      platform: 'harmony',
+      designWidth: 640,
+      deviceRatio: {
+        640: 2.34 / 2,
+        750: 1,
+        828: 1.81 / 2
+      }
+    }
+    const processed = postcss(px2rem(options)).process(rules).css
+    expect(processed).toBe('view { width: 100vp; }')
+  })
+})

package/index.js

@@ -33,6 +33,9 @@ const DEFAULT_WEAPP_OPTIONS = {
   deviceRatio
 }
 
+const processed = Symbol('processed')
+
+
 let targetUnit
 
 module.exports = (options = {}) => {
@@ -40,18 +43,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 +63,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 +84,127 @@ 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 {
+        // 注意：钩子在节点变动时会重新执行，Once，OnceExit只执行一次，https://github.com/NervJS/taro/issues/13238
+        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
-
-        if (!satisfyPropList(decl.prop)) 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 (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return
+          if (decl[processed]) return
 
-        const value = decl.value.replace(pxRgx, pxReplace)
+          // 标记当前 node 已处理
+          decl[processed] = true
 
-        // if rem unit already exists, do not add or replace
-        if (declarationExists(decl.parent, decl.prop, value)) 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 (opts.replace) {
-          decl.value = value
-        } else {
-          decl.parent.insertAfter(i, decl.clone({ value: value }))
-        }
-      })
+            if (!satisfyPropList(decl.prop)) return
 
-      if (opts.mediaQuery) {
-        root.walkAtRules('media', function (rule) {
-          if (rule.params.indexOf('px') === -1) return
-          rule.params = rule.params.replace(pxRgx, pxReplace)
-        })
+            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.replace) {
+              decl.value = value
+            } else {
+              decl.cloneAfter({ value: value })
+            }
+          }
+        },
+        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 +240,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 +250,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 +269,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-canary.9",
+  "version": "3.6.1-alpha.0",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [