fix: integrated styled-components babel plugin does not works (#741)

package.json

@@ -52,6 +52,7 @@
     "@vercel/ncc": "0.33.3",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "babel-plugin-module-resolver": "4.1.0",
+    "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-define": "2.0.1",
     "enhanced-resolve": "5.9.3",
     "fast-glob": "3.2.12",

src/builder/bundle/index.ts

@@ -40,6 +40,7 @@ async function bundle(opts: IBundleOpts): Promise<void | IBundleWatcher> {
     const config = opts.configProvider.configs[i];
     const { plugins: extraPostCSSPlugins, ...postcssLoader } =
       config.postcssOptions || {};
+    const babelSCOpts = getBabelStyledComponentsOpts(opts.configProvider.pkg);
     // workaround for combine continuous onBuildComplete log in watch mode
     const logStatus = lodash.debounce(
       () =>
@@ -105,12 +106,14 @@ async function bundle(opts: IBundleOpts): Promise<void | IBundleWatcher> {
           pluginTransformRuntime: {},
           pluginLockCoreJS: {},
           pluginDynamicImportNode: false,
-          pluginStyledComponents: getBabelStyledComponentsOpts(
-            opts.configProvider.pkg,
-          ),
         },
       ],
-      beforeBabelPlugins: [require.resolve('babel-plugin-dynamic-import-node')],
+      beforeBabelPlugins: [
+        require.resolve('babel-plugin-dynamic-import-node'),
+        ...(babelSCOpts
+          ? [[require.resolve('babel-plugin-styled-components'), babelSCOpts]]
+          : []),
+      ],
       extraBabelPresets: config.extraBabelPresets,
       extraBabelPlugins: config.extraBabelPlugins,
 

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

@@ -45,8 +45,8 @@ const babelTransformer: IJSTransformer = function (content) {
       path.dirname(this.paths.fileAbsPath),
     ),
     presetTypeScript: {},
-    pluginStyledComponents: getBabelStyledComponentsOpts(this.pkg),
   };
+  const pluginSCOpts = getBabelStyledComponentsOpts(this.pkg);
 
   // transform alias to relative path for babel-plugin-module-resolver
   const alias = Object.entries(oAlias).reduce<typeof oAlias>(
@@ -99,6 +99,9 @@ const babelTransformer: IJSTransformer = function (content) {
           extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.json'],
         },
       ],
+      ...(pluginSCOpts
+        ? [[require.resolve('babel-plugin-styled-components'), pluginSCOpts]]
+        : []),
       ...(define
         ? [
             [