upgrade linaria to latest version (#16747)

* upgrade linaria to latest version

* use className instead style

* format

* restore

* use space instead of tab

* tweak for submit fail

* t

---------

Co-authored-by: Administrator <Administrator@tech8>

packages/taro-rn-transformer/src/component.ts

@@ -33,7 +33,7 @@ export default function componentLoader ({ sourceCode, filename, projectRoot, so
   // linaria transform
   let linaria
   try {
-    linaria = require('linaria')
+    linaria = require('@wyw-in-js/transform')
   } catch (e) {} // eslint-disable-line no-empty
 
   if (linaria) {

packages/taro-rn-transformer/src/utils.ts

@@ -168,7 +168,6 @@ export function parseBase64Image (iconPath: string, baseRoot: string) {
 export function transformLinaria ({ sourcePath, sourceCode }: TransformLinariaOption) {
   // TODO：配置 option, 小程序和 h5 可配置 webpack loader 更改配置，RN没有loader，所以默认不可配置，后续可考虑加配置
   const cacheDirectory = '.linaria-cache'
-  const preprocessor = undefined
   const extension = '.linaria.css'
   const root = process.cwd()
 
@@ -187,12 +186,17 @@ export function transformLinaria ({ sourcePath, sourceCode }: TransformLinariaOp
   const filename = nodePath.relative(process.cwd(), sourcePath)
 
   // linaria代码转换
-  const result = require('linaria/lib/node').transform(sourceCode, {
-    filename,
-    // inputSourceMap: inputSourceMap ?? undefined,
-    outputFilename,
-    preprocessor
-  })
+  const pluginOptions = {
+    babelOptions: {
+      babelrc: false
+    }
+  }
+
+  const services = {
+    options: { root, filename, pluginOptions },
+  }
+
+  const result = require('@wyw-in-js/transform/lib/transform').transformSync(services, sourceCode)
 
   // 生成样式文件
   if (result.cssText) {
@@ -284,32 +288,7 @@ export function transformLinaria ({ sourcePath, sourceCode }: TransformLinariaOp
             attribute = null as any
           }
 
-          if (attribute) {
-            if (types.isJSXAttribute(attribute) && types.isJSXExpressionContainer(attribute.value)) {
-              const expression = attribute.value.expression
-              let elements
-              if (types.isArrayExpression(expression)) {
-                elements = expression.elements
-              } else {
-                elements = expression
-              }
-              // 合并 style 对象
-              // style = Object.assign({}, linariaStyle, { color: 'red' })
-              const mergeStyleExpression = types.callExpression(
-                types.identifier('Object.assign'),
-                // @ts-ignore
-                [types.objectExpression([])].concat(linariaExpression, elements)
-              )
-              attribute.value = types.jSXExpressionContainer(mergeStyleExpression)
-            }
-          } else {
-            attributes.push(
-              types.jsxAttribute(
-                types.jsxIdentifier('style'),
-                types.jsxExpressionContainer(linariaExpression)
-              )
-            )
-          }
+          attributes.push(types.jsxAttribute(types.jsxIdentifier('className'), types.jsxExpressionContainer(linariaExpression)))
         }
       }
     })