From 86bfb1f9ebcfa1beede8594f1c0eb02da48c0fdf Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Fri, 2 Feb 2024 15:04:29 +0800
Subject: [PATCH] feat(bundler-okam): enable emotion when configured @emotion
 babel plugin

---
 e2e/fixtures.umi/emotion/.umirc.ts        |  6 ++++++
 e2e/fixtures.umi/emotion/expect.js        |  7 +++++++
 e2e/fixtures.umi/emotion/package.json     |  6 ++++++
 e2e/fixtures.umi/emotion/pages/index.less |  4 ++++
 e2e/fixtures.umi/emotion/pages/index.tsx  | 25 +++++++++++++++++++++++
 packages/bundler-okam/index.js            | 13 +++++++++---
 6 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 e2e/fixtures.umi/emotion/.umirc.ts
 create mode 100644 e2e/fixtures.umi/emotion/expect.js
 create mode 100644 e2e/fixtures.umi/emotion/package.json
 create mode 100644 e2e/fixtures.umi/emotion/pages/index.less
 create mode 100644 e2e/fixtures.umi/emotion/pages/index.tsx

diff --git a/e2e/fixtures.umi/emotion/.umirc.ts b/e2e/fixtures.umi/emotion/.umirc.ts
new file mode 100644
index 000000000..746c381a4
--- /dev/null
+++ b/e2e/fixtures.umi/emotion/.umirc.ts
@@ -0,0 +1,6 @@
+export default {
+  mfsu: false,
+  extraBabelPlugins: [
+    '@emotion',
+  ],
+};
diff --git a/e2e/fixtures.umi/emotion/expect.js b/e2e/fixtures.umi/emotion/expect.js
new file mode 100644
index 000000000..67ab3019e
--- /dev/null
+++ b/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, "");
+
diff --git a/e2e/fixtures.umi/emotion/package.json b/e2e/fixtures.umi/emotion/package.json
new file mode 100644
index 000000000..0b82c5137
--- /dev/null
+++ b/e2e/fixtures.umi/emotion/package.json
@@ -0,0 +1,6 @@
+{
+	"devDependencies": {
+		"@emotion/react": "^11.11.3",
+		"@emotion/styled": "^11.11.0"
+	}
+}
diff --git a/e2e/fixtures.umi/emotion/pages/index.less b/e2e/fixtures.umi/emotion/pages/index.less
new file mode 100644
index 000000000..d046493ab
--- /dev/null
+++ b/e2e/fixtures.umi/emotion/pages/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(222, 208, 9);
+}
diff --git a/e2e/fixtures.umi/emotion/pages/index.tsx b/e2e/fixtures.umi/emotion/pages/index.tsx
new file mode 100644
index 000000000..690eeeeee
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/bundler-okam/index.js b/packages/bundler-okam/index.js
index e918c675b..8d0c23ed3 100644
--- a/packages/bundler-okam/index.js
+++ b/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) }),
   };