Release: Dynamic CSS imports and Storybook 8.3

.storybook/preview.js

@@ -1,9 +1,6 @@
 import { useEffect } from '@storybook/preview-api';
 import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-// Project config to import stylesheets.
-import('../../../../config/emulsify-core/storybook/preview');
+import { setupTwig, fetchCSSFiles } from './utils.js';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
 import './_drupal.js';
@@ -21,6 +18,7 @@ export const decorators = [
 ];
 
 setupTwig(Twig);
+fetchCSSFiles();
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

.storybook/setupTwig.js → .storybook/utils.js

@@ -22,6 +22,29 @@ const fetchVariantConfig = () => {
   }
 };
 
+/**
+ * Fetches and loads all CSS files from the specified directories based on the project's configuration.
+ * If the platform is 'drupal', it also includes CSS files from additional component directories.
+ *
+ * @returns {undefined} If an error occurs, the function will return undefined.
+ */
+const fetchCSSFiles = () => {
+  try {
+    // Load all CSS files from 'dist'.
+    const cssFiles = require.context('../../../../dist', true, /\.css$/);
+    cssFiles.keys().forEach(file => cssFiles(file));
+
+    // Load all CSS files from 'components' for 'drupal' platform.
+    const emulsifyConfig = require('../../../../project.emulsify.json');
+    if (emulsifyConfig.project.platform === 'drupal') {
+      const drupalCSSFiles = require.context('../../../../components', true, /\.css$/);
+      drupalCSSFiles.keys().forEach(file => drupalCSSFiles(file));
+    }
+  } catch (e) {
+    return undefined;
+  }
+};
+
 module.exports.namespaces = {};
 for (const { name, directory } of fetchVariantConfig()) {
   module.exports.namespaces[name] = resolve(__dirname, '../../../../', directory);
@@ -41,3 +64,6 @@ module.exports.setupTwig = function setupTwig(twig) {
   twigAddAttributes(twig);
   return twig;
 };
+
+// Export the fetchCSSFiles function
+module.exports.fetchCSSFiles = fetchCSSFiles;

.storybook/webpack.config.js

@@ -115,5 +115,10 @@ module.exports = async ({ config }) => {
     }),
   ];
 
+  // Configure fallback for optional modules that may not be present
+  config.resolve.fallback = {
+    '../../../../components': false,
+  };
+
   return config;
 };

config/webpack/webpack.common.js

@@ -21,7 +21,10 @@
 const ComponentScssPattern = fs.existsSync(path.resolve(projectDir, 'src'))
   ? path.resolve(srcDir, 'components/**/!(_*|cl-*|sb-*).scss')
   : path.resolve(srcDir, '**/!(_*|cl-*|sb-*).scss');
-const ComponentLibraryScssPattern = path.resolve(srcDir, 'util/**/!(_).scss');
+const ComponentLibraryScssPattern = path.resolve(
+  srcDir,
+  '**/*{cl-*,sb-*}.scss',
+);
 
 // Glob pattern for JS files.
 const jsPattern = fs.existsSync(path.resolve(projectDir, 'src'))
@@ -80,10 +83,10 @@
     const newfilePath = fs.existsSync(path.resolve(projectDir, 'src'))
       ? `dist/global/${filePathDist.replace('.scss', '')}`
       : `dist/css/${filePathDist.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });
 
-  // Component SCSS entries.
+  // Component SCSS entries.-
   glob.sync(ComponentScssMatcher).forEach((file) => {
     const filePath = file.split('components/')[1];
     const filePathDist = replaceLastSlash(filePath, '/css/');
@@ -95,14 +98,14 @@
       fs.existsSync(path.resolve(projectDir, 'src'))
         ? `components/${filePathDist.replace('.scss', '')}`
         : `dist/${distStructure}/${filePathDist.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });
 
   // Component Library SCSS entries.
   glob.sync(ComponentLibraryScssMatcher).forEach((file) => {
-    const filePath = file.split(/util/)[1];
+    const filePath = file.split(`${srcDir}/`)[1];
     const newfilePath = `dist/storybook/${filePath.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });
 
   // JS entries.
@@ -118,14 +121,14 @@
         fs.existsSync(path.resolve(projectDir, 'src'))
           ? `components/${filePathDist.replace('.js', '')}`
           : `dist/${distStructure}/${filePathDist.replace('.js', '')}`;
       entries[newfilePath] = file;
     }
   });
 
   glob.sync(spriteMatcher).forEach((file) => {
     const filePath = file.split('/webpack/')[1];
     const newfilePath = `dist/${filePath.replace('.js', '')}`;
     entries[newfilePath] = file;
   });
 
   return entries;