feat: enable babel plugin for styled-components project (#639)

* feat: enable babel plugin for styled-components project

* test: add case for styled-components

* chore: update pnpm-lock.yaml

* test: ignore branch

* test: workaround styled-components for case

pnpm-workspace.yaml

@@ -4,3 +4,4 @@ packages:
   - 'boilerplate'
   - 'tests/fixtures/build/classic-jsx'
   - 'tests/fixtures/build/automatic-jsx'
+  - 'tests/fixtures/build/styled-components'

src/builder/bundle/index.ts

@@ -2,9 +2,13 @@ import type { webpack } from '@umijs/bundler-webpack';
 import { chalk, importLazy, lodash } from '@umijs/utils';
 import path from 'path';
 import { CACHE_PATH } from '../../constants';
-import type { BundleConfigProvider } from '../config';
-import { getBabelPresetReactOpts, getBundleTargets } from '../utils';
 import { logger } from '../../utils';
+import type { BundleConfigProvider } from '../config';
+import {
+  getBabelPresetReactOpts,
+  getBabelStyledComponentsOpts,
+  getBundleTargets,
+} from '../utils';
 
 const bundler: typeof import('@umijs/bundler-webpack') = importLazy(
   path.dirname(require.resolve('@umijs/bundler-webpack/package.json')),
@@ -98,6 +102,9 @@ async function bundless(opts: IBundlessOpts): Promise<void | IBundleWatcher> {
           pluginTransformRuntime: {},
           pluginLockCoreJS: {},
           pluginDynamicImportNode: false,
+          pluginStyledComponents: getBabelStyledComponentsOpts(
+            opts.configProvider.pkg,
+          ),
         },
       ],
       beforeBabelPlugins: [require.resolve('babel-plugin-dynamic-import-node')],

src/builder/bundless/loaders/javascript/babel.ts

@@ -6,6 +6,7 @@ import {
   addSourceMappingUrl,
   ensureRelativePath,
   getBabelPresetReactOpts,
+  getBabelStyledComponentsOpts,
   getBundlessTargets,
 } from '../../../utils';
 import type { IJSTransformer } from '../types';
@@ -44,6 +45,7 @@ const babelTransformer: IJSTransformer = function (content) {
       path.dirname(this.paths.fileAbsPath),
     ),
     presetTypeScript: {},
+    pluginStyledComponents: getBabelStyledComponentsOpts(this.pkg),
   };
 
   // transform alias to relative path for babel-plugin-module-resolver
@@ -71,6 +73,7 @@ const babelTransformer: IJSTransformer = function (content) {
       version: this.pkg.dependencies?.['@babel/runtime'],
     };
   }
+
   const { code, map } = transform(content, {
     filename: this.paths.fileAbsPath,
     cwd: this.paths.cwd,

src/builder/utils.ts

@@ -1,4 +1,5 @@
 import { semver } from '@umijs/utils';
+import { createHash } from 'crypto';
 import path from 'path';
 import {
   IApi,
@@ -115,3 +116,26 @@ export function getBundlessTargets(config: IBundlessConfig) {
 
   return targets;
 }
+
+export function getBabelStyledComponentsOpts(pkg: IApi['pkg']) {
+  let opts: false | { fileName: boolean; namespace?: string } = false;
+
+  // enable styled-components plugin for styled-components-based projects
+  if (pkg.dependencies?.['styled-components']) {
+    opts = { fileName: false };
+
+    // set namespace for avoid className conflicts
+    if (pkg.name) {
+      const [name, org] = pkg.name.split('/').reverse();
+      // hash org to make namespace clear
+      const suffix = org
+        ? `-${createHash('md5').update(org).digest('hex').slice(0, 4)}`
+        : /* istanbul ignore next -- @preserve */
+          '';
+
+      opts.namespace = `${name}${suffix}`;
+    }
+  }
+
+  return opts;
+}

tests/fixtures/build/styled-components/.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  esm: {},
+  umd: {},
+};

tests/fixtures/build/styled-components/expect.ts

@@ -0,0 +1,9 @@
+export default (files: Record<string, string>) => {
+  // expect namespace pefix
+  expect(files['esm/index.js']).toContain('"some-lib-');
+  expect(files['umd/some-lib.min.js']).toContain('"some-lib-');
+
+  // expect auto set displayName
+  expect(files['esm/index.js']).toContain('"Foo"');
+  expect(files['umd/some-lib.min.js']).toContain('"Foo"');
+};

tests/fixtures/build/styled-components/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@org/some-lib",
+  "dependencies": {
+    "styled-components": "^6.0.0-beta.15"
+  },
+  "devDependencies": {
+    "shallowequal": "^1.1.0",
+    "stylis": "^4.1.3"
+  },
+  "FIXME": "Wait for styled-components fix, ref: https://github.com/styled-components/styled-components/pull/3995"
+}

tests/fixtures/build/styled-components/src/index.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Foo = styled.div`
+  color: red;
+`;
+
+export default Foo;

tests/g.commitlint.test.ts

@@ -43,7 +43,7 @@ describe('lint generator', () => {
     if (existsSync(commitlintConfPath)) {
       unlinkSync(commitlintConfPath);
     }
-    writeFileSync(path.join(CASES_DIR, 'package.json'), '{}');
+    writeFileSync(path.join(CASES_DIR, 'package.json'), '{}\n', 'utf-8');
     warnSpy.mockReset();
   });