@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.1

package/lib/react/style-helper.js

@@ -3,31 +3,70 @@ const selectorParser = require('postcss-selector-parser')
 const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
-const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const parseValues = require('../utils/string').parseValues
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
-  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
+function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
+  const classMap = ctorType === 'page'
+      ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
+      : {}
 
   const root = postcss.parse(content, {
     from: filename
   })
 
   function formatValue (value) {
-    let matched
     let needStringify = true
-    if ((matched = numberRegExp.exec(value))) {
-      value = matched[1]
-      needStringify = false
-    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
-      value = `global.__formatValue(${JSON.stringify(value)})`
+    const matched = unitRegExp.exec(value)
+    if (matched) {
+      if (!matched[2] || matched[2] === 'px') {
+        value = matched[1]
+        needStringify = false
+      } else {
+        value = `${formatValueName}(${+matched[1]}, '${matched[2]}')`
+        needStringify = false
+      }
+    }
+    if (hairlineRegExp.test(value)) {
+      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
   }
 
+  function getMediaOptions (params) {
+    return parseValues(params).reduce((option, item) => {
+      if (['all', 'print'].includes(item)) {
+        if (item === 'media') {
+          option.type = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      if (['not', 'only', 'or', ','].includes(item)) {
+        if (item === 'and') {
+          option.logical_operators = item
+        } else {
+          error('not supported ', item)
+          return option
+        }
+      }
+      const bracketsExp = /\((.+?)\)/
+      if (bracketsExp.test(item)) {
+        const range = parseValues((item.match(bracketsExp)?.[1] || ''), ':')
+        if (range.length < 2) {
+          return option
+        } else {
+          option[dash2hump(range[0])] = +formatValue(range[1])
+        }
+      }
+      return option
+    }, {})
+  }
+
   const rulesRunner = getRulesRunner({
     mode,
     srcMode,
@@ -41,13 +80,15 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
   root.walkAtRules(rule => {
     if (rule.name !== 'media') {
       warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
+      // 删除不支持的 AtRule，防止其影响后续解析
+      rule.remove()
     }
   })
 
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
-      if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
       let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
@@ -79,7 +120,8 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     })
 
     const classMapKeys = []
-
+    const options = getMediaOptions(rule.parent.params || '')
+    const isMedia = options.maxWidth || options.minWidth
     selectorParser(selectors => {
       selectors.each(selector => {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
@@ -93,7 +135,28 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          classMap[key] = Object.assign(classMap[key] || {}, classMapValue)
+          let _default = classMap[key]?._default
+          let _media = classMap[key]?._media
+          if (isMedia) {
+            // 当前是媒体查询
+            _default = _default || {}
+            _media = _media || []
+            _media.push({
+              options,
+              value: classMapValue
+            })
+            classMap[key] = {
+              _media,
+              _default
+            }
+          } else if (_default) {
+            // 已有媒体查询数据，此次非媒体查询
+            Object.assign(_default, classMapValue)
+          } else {
+            // 无媒体查询
+            const val = classMap[key] || {}
+            classMap[key] = Object.assign(val, classMapValue)
+          }
         }
       })
     }

package/lib/resolver/AddModePlugin.js

@@ -39,21 +39,31 @@ module.exports = class AddModePlugin {
 
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
-      if (!implicitMode) queryObj.mode = mode
-      queryObj.infix = `${queryInfix || ''}.${mode}`
 
       // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
       if (modePattern.test(path.basename(resourcePath))) {
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        // 已经被resolved到对应mode的文件，避免重复添加mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && modePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${mode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
-        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
-        request.query = stringifyQuery(queryObj)
-        request.mode = obj.mode
+        const isResolved = (implicitMode || queryObj.mode === mode) && defaultModePattern.test(queryObj.infix)
+        if (!isResolved) {
+          queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          if (!implicitMode) queryObj.mode = mode
+          request.query = stringifyQuery(queryObj)
+          request.mode = obj.mode
+        }
         return callback()
       }
 
+      if (!implicitMode) queryObj.mode = mode
+      queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)

package/lib/resolver/ExtendComponentsPlugin.js

@@ -0,0 +1,60 @@
+const { EXTEND_COMPONENT_CONFIG } = require('../utils/const')
+
+/**
+ * 扩展组件路径解析插件
+ * 将 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name] 格式的路径
+ * 解析为对应平台的实际组件路径
+ */
+module.exports = class ExtendComponentsPlugin {
+  constructor (source, mode, target) {
+    this.source = source
+    this.target = target
+    this.mode = mode
+  }
+
+  apply (resolver) {
+    const target = resolver.ensureHook(this.target)
+    const mode = this.mode
+
+    resolver.getHook(this.source).tapAsync('ExtendComponentsPlugin', (request, resolveContext, callback) => {
+      const requestPath = request.request
+      if (!requestPath || !requestPath.startsWith('@mpxjs/webpack-plugin/lib/runtime/components/extends/')) {
+        return callback()
+      }
+
+      // 匹配 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name]
+      const extendsMatch = requestPath.match(/^@mpxjs\/webpack-plugin\/lib\/runtime\/components\/extends\/(.+)$/)
+
+      if (!extendsMatch) {
+        return callback()
+      }
+
+      const componentName = extendsMatch[1]
+
+      // 检查组件是否在配置中
+      if (!EXTEND_COMPONENT_CONFIG[componentName]) {
+        return callback(new Error(`Extended component "${componentName}" was not found. Available extended components: ${Object.keys(EXTEND_COMPONENT_CONFIG).join(', ')}`))
+      }
+
+      // 获取当前模式下的组件路径
+      const componentConfig = EXTEND_COMPONENT_CONFIG[componentName]
+      const newRequest = componentConfig[mode]
+
+      if (!newRequest) {
+        return callback(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform. Supported platforms include: ${Object.keys(componentConfig).join(', ')}`))
+      }
+
+      const obj = Object.assign({}, request, {
+        request: newRequest
+      })
+
+      resolver.doResolve(
+        target,
+        obj,
+        `resolve extend component: ${componentName} to ${newRequest}`,
+        resolveContext,
+        callback
+      )
+    })
+  }
+}