feat: add plugins styles integrations

vtex · Nov 14, 2024 · 97a2bdb · 97a2bdb
1 parent dcb8517
commit 97a2bdb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/cli/src/utils/generate.ts b/packages/cli/src/utils/generate.ts
@@ -1,6 +1,5 @@
 import chalk from 'chalk'
 import {
-  copyFileSync,
   copySync,
   existsSync,
   mkdirsSync,
@@ -17,7 +16,7 @@ import ora from 'ora'
 import { withBasePath } from './directory'
 import { installDependencies } from './dependencies'
 import { logger } from './logger'
-import { installPlugins } from './plugins'
+import { generateThemeIndexPluginsContent, installPlugins } from './plugins'
 
 interface GenerateOptions {
   setup?: boolean
@@ -297,7 +296,12 @@ async function copyTheme(basePath: string) {
     )
     if (existsSync(customTheme)) {
       try {
-        copyFileSync(customTheme, tmpThemesCustomizationsFile)
+        const themeIndexPluginsContent = await generateThemeIndexPluginsContent(
+          basePath,
+          `@import "./${storeConfig.theme}.scss";`
+        )
+
+        writeFileSync(tmpThemesCustomizationsFile, themeIndexPluginsContent)
         logger.log(
           `${chalk.green('success')} - ${
             storeConfig.theme
@@ -307,6 +311,10 @@ 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
@@ -191,6 +191,27 @@ export async function addPluginsSections(basePath: string, plugins: Plugin[]) {
   logger.log(pluginsImportFileContent)
 }
 
+export const generateThemeIndexPluginsContent = async (
+  basePath: string,
+  ...customImports: string[]
+) => {
+  const { getPackagePath } = withBasePath(basePath)
+
+  const plugins = await getPluginsList(basePath)
+
+  const pluginImports = plugins
+    .filter((plugin) =>
+      existsSync(
+        getPackagePath(getPluginName(plugin), 'src', 'themes', 'index.scss')
+      )
+    )
+    .map(
+      (plugin) => `@import "${getPluginName(plugin)}/src/themes/index.scss";`
+    )
+
+  return [...pluginImports, ...customImports].join('\n')
+}
+
 export const installPlugins = async (basePath: string) => {
   const plugins = await getPluginsList(basePath)