fix(sc): css props

examples/with-styled-components/global.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProp } from "styled-components";
+
+interface MyTheme {}
+
+declare module "react" {
+  interface Attributes {
+    css?: CSSProp<MyTheme>
+  }
+}

examples/with-styled-components/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@umijs/plugins": "workspace:*",
+    "styled-components": "6.1.1",
     "umi": "workspace:*"
   }
 }

examples/with-styled-components/pages/css.tsx

@@ -0,0 +1,21 @@
+import { css, styled } from 'umi';
+
+const Style = styled.div`
+  ${css`
+    font-size: 18px;
+  `};
+`;
+
+export default function Page() {
+  return (
+    <Style
+      data-color="green"
+      css={`
+        background: papayawhip;
+        color: ${(props: any) => props['data-color']};
+      `}
+    >
+      css style
+    </Style>
+  );
+}

examples/with-styled-components/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.umi/tsconfig.json"
+}

packages/plugins/package.json

@@ -50,7 +50,7 @@
     "react-intl": "3.12.1",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
-    "styled-components": "6.1.0",
+    "styled-components": "6.1.1",
     "tslib": "^2",
     "warning": "^4.0.3"
   },

packages/plugins/src/styled-components.ts

@@ -2,6 +2,7 @@ import { lodash, winPath } from '@umijs/utils';
 import { dirname } from 'path';
 import type { IStyleSheetManager } from 'styled-components';
 import { IApi } from 'umi';
+import { resolveProjectDep } from './utils/resolveProjectDep';
 import { withTmpPath } from './utils/withTmpPath';
 
 export default (api: IApi) => {
@@ -20,8 +21,9 @@ export default (api: IApi) => {
   // dev:  displayName
   // prod: minify
   api.modifyConfig((memo) => {
-    // only apply babel plugin in webpack and vite
-    if (!['webpack', 'vite'].includes(api.appData.bundler!)) return memo;
+    if (api.userConfig.mako || process.env.OKAM) {
+      return memo;
+    }
 
     const isProd = api.env === 'production';
     const pluginConfig = {
@@ -56,7 +58,22 @@ export default (api: IApi) => {
     return ['styledComponents'];
   });
 
-  const libPath = dirname(require.resolve('styled-components/package'));
+  const SC_NAME = `styled-components`;
+  let libPath: string;
+  try {
+    libPath =
+      resolveProjectDep({
+        pkg: api.pkg,
+        cwd: api.cwd,
+        dep: SC_NAME,
+      }) || dirname(require.resolve(`${SC_NAME}/package.json`));
+  } catch (e) {}
+
+  api.modifyConfig((memo) => {
+    memo.alias[SC_NAME] = libPath;
+    return memo;
+  });
+
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       path: 'index.tsx',