fix: styled-components plugin (#11726)

* fix: SC babel plugin config

* dep: upgrade SC deps

* feat: add SC provider options

* fix: import

* chore: code style

* chore: do not display class name in prod

* chore: add alita and kmi

* docs: add `topLevelImportPaths` desc

* chore: update lockfile

* dep: up SC

* perf: sort

* fix: merge conflict

docs/docs/docs/max/styled-components.md

@@ -55,6 +55,22 @@ export default {
 }
 ```
 
+当你的导入来源不是 `umi` / `@umijs/max` 时，需将导入来源配置到 `topLevelImportPaths` 才可以使该 babel 插件生效，如：
+
+```ts
+import { styled } from 'alita'
+```
+
+```ts
+export default {
+  styledComponents: {
+    babelPlugin: {
+      topLevelImportPaths: ['alita']
+    },
+  },
+}
+```
+
 ## 运行时配置项
 
 包含以下配置。

packages/babel-preset-umi/package.json

@@ -25,7 +25,6 @@
     "@bloomberg/record-tuple-polyfill": "0.0.4",
     "@umijs/bundler-utils": "workspace:*",
     "@umijs/utils": "workspace:*",
-    "babel-plugin-styled-components": "2.1.1",
     "core-js": "3.28.0"
   },
   "publishConfig": {

packages/babel-preset-umi/src/index.ts

@@ -15,7 +15,6 @@ interface IOpts {
   pluginAutoCSSModules: any;
   stripExports: { exports: string[] };
   classPropertiesLoose: any;
-  pluginStyledComponents: any;
   pluginDecorators: any;
 }
 
@@ -67,15 +66,6 @@ export default (_context: any, opts: IOpts) => {
       ],
     ].filter(Boolean),
     plugins: [
-      opts.pluginStyledComponents && [
-        require.resolve('babel-plugin-styled-components'),
-        {
-          // 该 plugin 会校验 styled 的来源
-          // 如果不是 `styled-components`, 需要手动引入后才能使 displayName 生效
-          topLevelImportPaths: ['@umijs/max'],
-          ...opts.pluginStyledComponents,
-        },
-      ],
       // TC39 Proposals
       // class-static-block
       // decorators

packages/plugins/package.json

@@ -36,6 +36,7 @@
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.6",
+    "babel-plugin-styled-components": "2.1.4",
     "dayjs": "^1.11.7",
     "dva-core": "^2.0.4",
     "dva-immer": "^1.0.0",
@@ -49,7 +50,7 @@
     "react-intl": "3.12.1",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
-    "styled-components": "6.0.0-rc.0",
+    "styled-components": "6.1.0",
     "tslib": "^2",
     "warning": "^4.0.3"
   },

packages/plugins/src/styled-components.ts

@@ -1,5 +1,6 @@
-import { winPath } from '@umijs/utils';
+import { lodash, winPath } from '@umijs/utils';
 import { dirname } from 'path';
+import type { IStyleSheetManager } from 'styled-components';
 import { IApi } from 'umi';
 import { withTmpPath } from './utils/withTmpPath';
 
@@ -16,12 +17,31 @@ export default (api: IApi) => {
     enableBy: api.EnableBy.config,
   });
 
-  api.modifyBabelPresetOpts((memo) => {
-    if (api.env === 'development') {
-      memo.pluginStyledComponents = {
-        ...api.config.styledComponents.babelPlugin,
-      };
-    }
+  // dev:  displayName
+  // prod: minify
+  api.modifyConfig((memo) => {
+    const isProd = api.env === 'production';
+    const pluginConfig = {
+      // https://github.com/styled-components/babel-plugin-styled-components/blob/f8e9fb480d1645be8be797d73e49686bdf98975b/src/utils/options.js#L11
+      topLevelImportPaths: [
+        '@umijs/max',
+        '@alipay/bigfish',
+        'umi',
+        'alita',
+        '@kmi/kmi',
+      ],
+      ...(isProd
+        ? {
+            displayName: false,
+          }
+        : {}),
+      ...(api.config.styledComponents?.babelPlugin || {}),
+      ...(api.userConfig.styledComponents?.babelPlugin || {}),
+    };
+    memo.extraBabelPlugins = [
+      ...(memo.extraBabelPlugins || []),
+      [require.resolve('babel-plugin-styled-components'), pluginConfig],
+    ];
     return memo;
   });
 
@@ -50,22 +70,46 @@ export { styled, ThemeProvider, createGlobalStyle, css, keyframes, StyleSheetMan
     )
       ? `import { styledComponents as styledComponentsConfig } from '@/app';`
       : `const styledComponentsConfig = {};`;
+
+    const isLegacy =
+      !lodash.isEmpty(api.config.targets?.ie) || api.config.legacy;
+    const disableCSSOM = !!api.config.qiankun?.slave;
+    const providerOptions: IStyleSheetManager = {
+      // https://styled-components.com/docs/faqs#vendor-prefixes-are-omitted-by-default
+      ...(isLegacy ? { enableVendorPrefixes: true } : {}),
+      ...(disableCSSOM ? { disableCSSOMInjection: true } : {}),
+    };
+    const hasProvider = !lodash.isEmpty(providerOptions);
+
     api.writeTmpFile({
       path: 'runtime.tsx',
       content: `
+${hasProvider ? `import { StyleSheetManager } from '${winPath(libPath)}';` : ``}
+
 ${styledComponentsRuntimeCode}
 export function rootContainer(container) {
   const scConfig =
     typeof styledComponentsConfig === 'function'
       ? styledComponentsConfig()
       : styledComponentsConfig;
   const globalStyle = scConfig.GlobalStyle ? <scConfig.GlobalStyle /> : null;
-  return (
+  const inner = (
     <>
       {globalStyle}
       {container}
     </>
   );
+  ${
+    hasProvider
+      ? `
+  return (
+    <StyleSheetManager {...${JSON.stringify(providerOptions)}}>
+      {inner}
+    </StyleSheetManager>
+  );
+  `
+      : 'return inner;'
+  }
 }
       `,
     });

packages/renderer-react/src/browser.tsx

@@ -266,7 +266,7 @@ const getBrowser = (
           // use ?. since routes patched with patchClientRoutes is not exists in opts.routes
           if (!isFirst && opts.routes[id]?.hasServerLoader) {
             // 在有basename的情况下__serverLoader的请求路径需要加上basename
-            const url = `${withEndSlash(basename)}'__serverLoader?route='${id}`;
+            const url = `${withEndSlash(basename)}__serverLoader?route=${id}`;
             fetch(url, {
               credentials: 'include',
             })