From 52c2314ee9fe7baed507db8a61ca3cffbf93516c Mon Sep 17 00:00:00 2001
From: ClarkXia <xiawenwu41@gmail.com>
Date: Mon, 29 Aug 2022 11:04:21 +0800
Subject: [PATCH] fix: import theme icon (#484)

* fix: import theme icon

* fix: match entry
---
 packages/plugin-fusion/src/index.ts | 41 ++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/plugin-fusion/src/index.ts b/packages/plugin-fusion/src/index.ts
index 87acc32ce..473403734 100644
--- a/packages/plugin-fusion/src/index.ts
+++ b/packages/plugin-fusion/src/index.ts
@@ -27,6 +27,29 @@ function getVariablesPath({
   return filePath;
 }
 
+function importIcon(iconPath: string, cssPrefix: string) {
+  let entryFile = '';
+  return {
+    name: 'transform-import-icon',
+    enforce: 'pre',
+    async transform(code: string, id: string, options: { isServer: boolean }) {
+      const { isServer } = options;
+      // Only import icon scss in client
+      if (!isServer) {
+        // Icon just import once.
+        if (!entryFile && !id.match(/node_modules/) && id.match(/[js|jsx|ts|tsx]$/)) {
+          entryFile = id;
+        }
+        if (id === entryFile) {
+          return `import '${iconPath}';\n${code}`;
+        } else if (id === iconPath) {
+          return `$css-prefix: '${cssPrefix}';\n${code}`;
+        }
+      }
+    },
+  };
+}
+
 const plugin: Plugin<PluginOptions> = (options = {}) => ({
   name: '@ice/plugin-fusion',
   setup: ({ onGetConfig }) => {
@@ -41,6 +64,15 @@ const plugin: Plugin<PluginOptions> = (options = {}) => ({
     }
     if (theme || themePackage) {
       onGetConfig((config) => {
+        // Try to get icon.scss if exists.
+        const iconFile = getVariablesPath({
+          packageName: themePackage,
+          filename: 'icons.scss',
+          silent: true,
+        });
+        if (iconFile) {
+          config.transformPlugins = [...(config.transformPlugins || []), importIcon(iconFile, theme['css-prefix'] || 'next-')];
+        }
         // Modify webpack config of scss rule for fusion theme.
         config.configureWebpack ??= [];
         config.configureWebpack.push((webpackConfig) => {
@@ -65,15 +97,6 @@ const plugin: Plugin<PluginOptions> = (options = {}) => ({
               if (themeFile) {
                 additionalContent.push(`@import '${themePackage}/variables.scss';`);
               }
-              // Try to get icon.scss if exists.
-              const iconFile = getVariablesPath({
-                packageName: themePackage,
-                filename: 'icons.scss',
-                silent: true,
-              });
-              if (iconFile) {
-                additionalContent.push(`@import '${themePackage}/icons.scss';`);
-              }
             }
             let themeConfig = [];
             Object.keys(theme || {}).forEach((key) => {