taro中使用linaria作为css-in-js的方案

在taro 官方文档中有对应的使用linaria作为css-in-js方案的文档 https://taro-docs.jd.com/docs/next/css-in-js 但是文档相对落后了，该文档试用与linaria 5.x，linaria已经升级到6.x,那么我需要对其进行相应的调整。

主要是将部分原来 linaria的包改成 wyw-in-js

$ pnpm i @linaria/core @linaria/react @wyw-in-js/babel-preset @wyw-in-js/webpack-loader

babel.config.js:

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      compiler: 'webpack5',
    }],
    '@wyw-in-js'
  ]
}

config/index.js

const config = {
  mini: {
    webpackChain(chain, webpack) {

      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('@wyw-in-js/webpack-loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    },
  },
  h5: {
    webpackChain(chain, webpack) {
      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('@wyw-in-js/webpack-loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    },
  },
}

最后在项目根目录新建 linaria.config.js

module.exports = {
  rules: [
    {
      action: require('@linaria/shaker').default,
    },
    {
      test: /node_modules[\/\\](?!@tarojs)/,
      action: 'ignore',
    },
  ],
}