feat: add styled-components plugin (umijs#9970)

packages/max/src/preset.ts

@@ -13,6 +13,7 @@ export default () => {
       require.resolve('@umijs/plugins/dist/moment2dayjs'),
       require.resolve('@umijs/plugins/dist/qiankun'),
       require.resolve('@umijs/plugins/dist/request'),
+      require.resolve('@umijs/plugins/dist/styled-components'),
       require.resolve('@umijs/plugins/dist/tailwindcss'),
       require.resolve('@umijs/plugins/dist/valtio'),
       require.resolve('./plugins/maxAlias'),

packages/plugins/package.json

@@ -45,6 +45,7 @@
     "react-intl": "3.12.1",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
+    "styled-components": "6.0.0-beta.6",
     "warning": "^4.0.3"
   },
   "devDependencies": {

packages/plugins/src/styled-components.ts

@@ -0,0 +1,26 @@
+import { dirname } from 'path';
+import { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'styledComponents',
+    config: {
+      schema(Joi) {
+        return Joi.object();
+      },
+    },
+    enableBy: api.EnableBy.config,
+  });
+
+  // reexports with types
+  const libPath = dirname(require.resolve('styled-components/package'));
+  api.onGenerateFiles(() => {
+    api.writeTmpFile({
+      path: 'index.tsx',
+      content: `
+import styled, { ThemeProvider, createGlobalStyle, css, keyframes, StyleSheetManager, useTheme } from '${libPath}';
+export { styled, ThemeProvider, createGlobalStyle, css, keyframes, StyleSheetManager, useTheme };
+      `,
+    });
+  });
+};