feat: fix import plugin themes

vtex · Nov 14, 2024 · f681703 · f681703
1 parent bb8f5c0
commit f681703
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/packages/cli/src/utils/directory.ts b/packages/cli/src/utils/directory.ts
@@ -82,10 +82,11 @@ export const withBasePath = (basepath: string) => {
       'themes',
       'index.scss'
     ),
+    tmpThemesPluginsFile: path.join(tmpDir, 'src', 'plugins', 'index.scss'),
     tmpCMSDir: path.join(tmpDir, 'cms', 'faststore'),
+    tmpCMSWebhookUrlsFile: path.join(tmpDir, 'cms-webhook-urls.json'),
     tmpPagesDir: path.join(tmpDir, 'src', 'pages'),
     tmpPluginsDir: path.join(tmpDir, 'src', 'plugins'),
-    tmpCMSWebhookUrlsFile: path.join(tmpDir, 'cms-webhook-urls.json'),
     tmpStoreConfigFile: path.join(
       tmpDir,
       'src',

diff --git a/packages/cli/src/utils/generate.ts b/packages/cli/src/utils/generate.ts
@@ -1,5 +1,6 @@
 import chalk from 'chalk'
 import {
+  copyFileSync,
   copySync,
   existsSync,
   mkdirsSync,
@@ -16,7 +17,7 @@ import ora from 'ora'
 import { withBasePath } from './directory'
 import { installDependencies } from './dependencies'
 import { logger } from './logger'
-import { generateThemeIndexPluginsContent, installPlugins } from './plugins'
+import { installPlugins } from './plugins'
 
 interface GenerateOptions {
   setup?: boolean
@@ -296,12 +297,7 @@ async function copyTheme(basePath: string) {
     )
     if (existsSync(customTheme)) {
       try {
-        const themeIndexPluginsContent = await generateThemeIndexPluginsContent(
-          basePath,
-          `@import "./${storeConfig.theme}.scss";`
-        )
-
-        writeFileSync(tmpThemesCustomizationsFile, themeIndexPluginsContent)
+        copyFileSync(customTheme, tmpThemesCustomizationsFile)
         logger.log(
           `${chalk.green('success')} - ${
             storeConfig.theme
@@ -311,10 +307,6 @@ async function copyTheme(basePath: string) {
         logger.error(`${chalk.red('error')} - ${err}`)
       }
     } else {
-      const themeIndexPluginsContent =
-        await generateThemeIndexPluginsContent(basePath)
-      writeFileSync(tmpThemesCustomizationsFile, themeIndexPluginsContent)
-
       logger.info(
         `${chalk.blue('info')} - The ${
           storeConfig.theme

diff --git a/packages/cli/src/utils/plugins.ts b/packages/cli/src/utils/plugins.ts
@@ -214,10 +214,28 @@ export const generateThemeIndexPluginsContent = async (
   return [...pluginImports, ...customImports].join('\n')
 }
 
+const addPluginsTheme = async (basePath: string, plugins: Plugin[]) => {
+  const { getPackagePath, tmpThemesPluginsFile } = withBasePath(basePath)
+
+  const pluginImportsContent = plugins
+    .filter((plugin) =>
+      existsSync(
+        getPackagePath(getPluginName(plugin), 'src', 'themes', 'index.scss')
+      )
+    )
+    .map(
+      (plugin) => `@import "${getPluginName(plugin)}/src/themes/index.scss";`
+    )
+    .join('\n')
+
+  writeFileSync(tmpThemesPluginsFile, pluginImportsContent)
+}
+
 export const installPlugins = async (basePath: string) => {
   const plugins = await getPluginsList(basePath)
 
   copyPluginsSrc(basePath, plugins)
   generatePluginPages(basePath, plugins)
   addPluginsSections(basePath, plugins)
+  addPluginsTheme(basePath, plugins)
 }
diff --git a/packages/core/src/pages/_app.tsx b/packages/core/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import SEO from '../../next-seo.config'
 
 // FastStore UI's base styles
 import '../styles/global/index.scss'
+import '../plugins/index.scss'
 import '../customizations/src/themes/index.scss'
 
 import { DefaultSeo } from 'next-seo'

diff --git a/packages/core/src/plugins/index.scss b/packages/core/src/plugins/index.scss
@@ -0,0 +1,3 @@
+// ----------------------------------------------------------
+// Plugins' themes will override this file
+// ----------------------------------------------------------