feat(bundler-okam): enable emotion when configured @emotion babel plugin

e2e/fixtures.umi/emotion/.umirc.ts

@@ -0,0 +1,6 @@
+export default {
+  mfsu: false,
+  extraBabelPlugins: [
+    '@emotion',
+  ],
+};

e2e/fixtures.umi/emotion/expect.js

@@ -0,0 +1,7 @@
+const assert = require("assert");
+const { parseBuildResult, moduleReg } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+let content = files["umi.js"];
+content = content.replace(/\s/g, "");
+

e2e/fixtures.umi/emotion/package.json

@@ -0,0 +1,6 @@
+{
+	"devDependencies": {
+		"@emotion/react": "^11.11.3",
+		"@emotion/styled": "^11.11.0"
+	}
+}

e2e/fixtures.umi/emotion/pages/index.less

@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(222, 208, 9);
+}

e2e/fixtures.umi/emotion/pages/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './index.less';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const style = css`
+  color: rgb(55, 255, 0);
+`;
+
+const Foo = styled.div({
+  background: "rgb(150, 255, 3)",
+  color: '#fff',
+});
+
+1;
+
+export default function Page() {
+  return (
+    <div css={style}>
+      <Foo>Hello</Foo>
+      <h1 className={styles.title}>hello</h1>
+      <span>abcd</span>
+    </div>
+  );
+}

packages/bundler-okam/index.js

@@ -374,7 +374,9 @@ function checkConfig(opts) {
   ['beforeBabelPlugins', 'extraBabelPlugins', 'config.extraBabelPlugins']
     .reduce((acc, key) => acc.concat(lodash.get(opts, key) || []), [])
     .some((p) => {
-      if (!/^import$|babel-plugin-import/.test(p[0])) {
+      const isImportPlugin = /^import$|babel-plugin-import/.test(p[0]);
+      const isEmotionPlugin = p === '@emotion' || p === '@emotion/babel-plugin';
+      if (!isImportPlugin && !isEmotionPlugin) {
         warningKeys.push('extraBabelPlugins');
         return true;
       }
@@ -497,10 +499,11 @@ async function getOkamConfig(opts) {
     minify = false;
   }
   // transform babel-plugin-import plugins to transformImport
-  const transformImport = [
+  const extraBabelPlugins = [
     ...(opts.extraBabelPlugins || []),
     ...(opts.config.extraBabelPlugins || []),
-  ]
+  ];
+  const transformImport = extraBabelPlugins
     .filter((p) => /^import$|babel-plugin-import/.test(p[0]))
     .map(([_, v]) => {
       const { libraryName, libraryDirectory, style, ...others } = v;
@@ -521,6 +524,9 @@ async function getOkamConfig(opts) {
 
       return { libraryName, libraryDirectory, style };
     });
+  const emotion = extraBabelPlugins.some((p) => {
+    return p === '@emotion' || p === '@emotion/babel-plugin';
+  });
   // transform externals
   const externalsConfig = Object.entries(externals).reduce((ret, [k, v]) => {
     // handle [string] with script type
@@ -583,6 +589,7 @@ async function getOkamConfig(opts) {
     clean,
     flexBugs: true,
     react: opts.react || {},
+    emotion,
     ...(opts.disableCopy ? { copy: [] } : { copy: ['public'].concat(copy) }),
   };