babel-plugin-transform-react-jsx-to-rn-stylesheet 3.5.4 → 3.5.5

package/src/index.ts

@@ -9,6 +9,7 @@ const STYLE_SHEET_NAME = '_styleSheet'
 const GET_STYLE_FUNC_NAME = '_getStyle'
 const MERGE_STYLES_FUNC_NAME = '_mergeStyles'
 const MERGE_ELE_STYLES_FUNC_NAME = '_mergeEleStyles'
+const GET_MODULE_CLS_NAME_FUNC_NAME = '_getModuleClassName'
 
 const GET_CLS_NAME_FUNC_NAME = '_getClassName'
 const NAME_SUFFIX = 'styleSheet'
@@ -60,14 +61,14 @@ function findLastImportIndex (body) {
 }
 
 const MergeStylesFunction = `
-function _mergeStyles() {
+function ${MERGE_STYLES_FUNC_NAME}() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
-    var target = arguments[index];
+    var [styleSheet, rawStyleName] = arguments[index];
 
-    for (var key in target) {
-      newTarget[key] = Object.assign(newTarget[key] || {}, target[key]);
+    for (var key in styleSheet) {
+      const _key = rawStyleName ? rawStyleName + '-' + key : key
+      newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
 
@@ -115,6 +116,15 @@ function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
   return style;
 }
 `
+const getModuleClassNameFunction = `
+function ${GET_MODULE_CLS_NAME_FUNC_NAME}(moduleStyle, styleId) {
+  return Object.keys(moduleStyle).reduce((pre, cur) => (
+    Object.assign(pre, {
+      [cur]: styleId + '-' + cur
+    })
+  ), {})
+}
+`
 
 export default function (babel: {
   types: typeof Types
@@ -128,6 +138,9 @@ export default function (babel: {
 
   const getMergeEleStyleFunctionStmt = template(getMergeEleStyleFunction)()
 
+  const getModuleClassNameFunctionStmt = template(getModuleClassNameFunction)()
+
+
   function getMap (str) {
     return str.split(/\s+/).map((className) => {
       // return template(`${STYLE_SHEET_NAME}["${className}"]`)().expression
@@ -138,88 +151,7 @@ export default function (babel: {
     })
   }
 
-  function isCSSMemberOrBindings (expression, cssModuleStylesheets, astPath) {
-    if (t.isIdentifier(expression)) {
-      if (cssModuleStylesheets.includes(expression.name)) {
-        return true
-      } else {
-        const binding = astPath.scope.getBinding(expression.name)
-        if (binding) {
-          const { node } = binding.path
-          if (isCSSMemberOrBindings(node.init, cssModuleStylesheets, astPath)) {
-            return true
-          }
-        }
-      }
-    }
-
-    // assign 属性引用
-    if (t.isMemberExpression(expression) && t.isIdentifier(expression.object)) {
-      if (cssModuleStylesheets.includes(expression.object.name)) {
-        return true
-      } else {
-        const binding = astPath.scope.getBinding(expression.object.name)
-        if (binding) {
-          const { node } = binding.path
-          if (isCSSMemberOrBindings(node.init, cssModuleStylesheets, astPath)) {
-            return true
-          }
-        }
-      }
-    }
-
-    // Conditional_Operator 条件（三元）运算符
-    if (t.isConditionalExpression(expression)) {
-      const { consequent, alternate } = expression
-      if (
-        isCSSMemberOrBindings(consequent, cssModuleStylesheets, astPath) ||
-        isCSSMemberOrBindings(alternate, cssModuleStylesheets, astPath)
-      ) {
-        return true
-      }
-    }
-
-    // spread 解构
-    if (t.isObjectExpression(expression)) {
-      for (const prop of expression.properties) {
-        if (t.isSpreadElement(prop)) {
-          if (isCSSMemberOrBindings(prop.argument, cssModuleStylesheets, astPath)) {
-            return true
-          }
-        }
-      }
-    }
-
-    // 函数调用
-    // some call expression args references like Object.assign or @babel/runtime/helpers/extends
-    if (t.isCallExpression(expression)) {
-      const { arguments: args } = expression
-      for (const arg of args) {
-        if (isCSSMemberOrBindings(arg, cssModuleStylesheets, astPath)) {
-          return true
-        }
-      }
-    }
-  }
-
-  function isJSXCSSModuleExpression (value, cssModuleStylesheets, astPath) {
-    if (t.isJSXExpressionContainer(value)) {
-      // 1. memberExpression a. 导入. b. 赋值. like `className="{style.red}"` or `const a = style; className="{a.red}"`
-      // 2. spread like `className="{{ ...style.red }}"`
-      // 3. memberExpression and spread. like `const a = { ...style }; className="{a.red}"
-
-      if (isCSSMemberOrBindings(value.expression, cssModuleStylesheets, astPath)) {
-        return true
-      }
-    }
-  }
-
-  function getArrayExpression (value, cssModuleStylesheets, astPath) {
-    // css module 时 className 处理成 style 属性，所以直接取值跟 style 合并
-    if (isJSXCSSModuleExpression(value, cssModuleStylesheets, astPath)) {
-      return [value.expression]
-    }
-
+  function getArrayExpression (value) {
     let str
 
     if (!value || value.value === '') {
@@ -274,12 +206,14 @@ export default function (babel: {
           if (existStyleImport) {
             const { file } = state
             const styleSheetIdentifiers = file.get('styleSheetIdentifiers') || []
+            const cssModuleStylesheets = file.get('cssModuleStylesheets') || []
+            const allStyleSheetIdentifiers = [...styleSheetIdentifiers, ...cssModuleStylesheets]
             let expression
             // only one css file，由于样式文件合并，永远只有一个
-            if (styleSheetIdentifiers.length === 1) {
-              expression = `var ${STYLE_SHEET_NAME} = ${styleSheetIdentifiers[0].name};\n`
-            } else if (styleSheetIdentifiers.length > 1) {
-              const params = styleSheetIdentifiers.reduce((current, next) => `${current},${next.name}`, '').slice(1)
+            if (allStyleSheetIdentifiers.length === 1 && styleSheetIdentifiers.length === 1) {
+              expression = `var ${STYLE_SHEET_NAME} = ${allStyleSheetIdentifiers[0].styleSheetName};\n`
+            } else if (allStyleSheetIdentifiers.length >= 1) {
+              const params = allStyleSheetIdentifiers.reduce((current, next) => `${current},[${next.styleSheetName}, "${next.rawStyleSheetName || ''}"]`, '').slice(1)
               expression = `${MergeStylesFunction}\n
               var ${STYLE_SHEET_NAME} = ${MERGE_STYLES_FUNC_NAME}(${params});\n`
             } else {
@@ -293,6 +227,7 @@ export default function (babel: {
           const { file } = state
           const node = astPath.node
           const injectGetStyle = file.get('injectGetStyle')
+          const cssModuleStylesheets = file.get('cssModuleStylesheets') || []
           // 从最后一个import 开始插入表达式，后续插入的表达式追加在后面
           let lastImportIndex = findLastImportIndex(node.body)
           if (injectGetStyle) {
@@ -305,6 +240,16 @@ export default function (babel: {
             // @ts-ignore
             node.body.splice(++lastImportIndex, 0, getMergeEleStyleFunctionStmt)
           }
+          // 将 styleSheet 转为 {[classname]: classname}
+          if (cssModuleStylesheets.length) {
+            // @ts-ignore
+            node.body.splice(++lastImportIndex, 0, getModuleClassNameFunctionStmt)
+            cssModuleStylesheets.forEach(({ styleSheetName, rawStyleSheetName }) => {
+              const functionTempalte = `var ${rawStyleSheetName} = ${GET_MODULE_CLS_NAME_FUNC_NAME}(${styleSheetName}, '${rawStyleSheetName}')`
+              // @ts-ignore
+              node.body.splice(++lastImportIndex, 0, template(functionTempalte)())
+            })
+          }
           existStyleImport = false
         }
       },
@@ -313,7 +258,6 @@ export default function (babel: {
         const { file, opts = {} } = state
         const { enableMultipleClassName = false } = opts
         const { styleMatchRule, classNameMathRule } = getMatchRule(enableMultipleClassName)
-        const cssModuleStylesheets = file.get('cssModuleStylesheets') || []
 
         const styleNameMapping: any = {}
         const DEFAULT_STYLE_KEY = 'style'
@@ -342,8 +286,16 @@ export default function (babel: {
             })
           }
         }
+
         for (const key in styleNameMapping) {
           const { hasClassName, classNameAttribute, hasStyleAttribute, styleAttribute } = styleNameMapping[key]
+          if (!(hasClassName && existStyleImport) && hasStyleAttribute) {
+            if (t.isStringLiteral(styleAttribute.value)) {
+              const cssObject = string2Object(styleAttribute.value.value)
+              styleAttribute.value = t.jSXExpressionContainer(object2Expression(template, cssObject))
+            }
+          }
+
           if (hasClassName && existStyleImport) {
             // Remove origin className
             attributes.splice(attributes.indexOf(classNameAttribute), 1)
@@ -351,13 +303,12 @@ export default function (babel: {
             if (
               classNameAttribute.value &&
               classNameAttribute.value.type === 'JSXExpressionContainer' &&
-              typeof classNameAttribute.value.expression.value !== 'string' && // not like className={'container'}
-              !isJSXCSSModuleExpression(classNameAttribute.value, cssModuleStylesheets, astPath) // 不含有 css module 变量的表达式
+              typeof classNameAttribute.value.expression.value !== 'string'// not like className={'container'}
             ) {
               file.set('injectGetStyle', true)
             }
 
-            const arrayExpression = getArrayExpression(classNameAttribute.value, cssModuleStylesheets, astPath)
+            const arrayExpression = getArrayExpression(classNameAttribute.value)
 
             if (arrayExpression.length === 0) {
               return
@@ -401,11 +352,6 @@ export default function (babel: {
                 : arrayExpression[0]
               attributes.push(t.jSXAttribute(t.jSXIdentifier(key === DEFAULT_STYLE_KEY ? key : (key + 'Style')), t.jSXExpressionContainer(expression)))
             }
-          } else if (hasStyleAttribute) {
-            if (t.isStringLiteral(styleAttribute.value)) {
-              const cssObject = string2Object(styleAttribute.value.value)
-              styleAttribute.value = t.jSXExpressionContainer(object2Expression(template, cssObject))
-            }
           }
         }
       }
@@ -435,7 +381,13 @@ function importDeclaration (astPath, state, t) {
 
     if (enableCSSModule && isModuleSource(sourceValue)) {
       if (styleSheetName) {
-        cssModuleStylesheets.push(styleSheetName)
+        const moduleStyleSheetName = astPath.scope.generateUid(`${styleSheetName}ModuleStyle`)
+        specifiers[0].local.name = moduleStyleSheetName
+        // 保留原始引用的 name
+        cssModuleStylesheets.push({
+          styleSheetName: moduleStyleSheetName,
+          rawStyleSheetName: styleSheetName
+        })
       }
     } else {
       const cssFileName = path.basename(sourceValue)
@@ -455,7 +407,9 @@ function importDeclaration (astPath, state, t) {
 
       node.specifiers = [t.importDefaultSpecifier(styleSheetIdentifier)]
       node.source = t.stringLiteral(styleSheetSource)
-      styleSheetIdentifiers.push(styleSheetIdentifier)
+      styleSheetIdentifiers.push({
+        styleSheetName: styleSheetIdentifier.name
+      })
     }
   }