From 3138ab0b00acaeae8d5486ef75d42802af3b1fe8 Mon Sep 17 00:00:00 2001
From: Israel Shmueli <bpottery@gmail.com>
Date: Thu, 17 Feb 2022 20:58:42 +0200
Subject: [PATCH] feat: configure webpack to output multiple css files in
 addition to default dist/style.css

re #246
---
 webpack/plugins.js        | 12 ++++++++++--
 webpack/webpack.common.js | 32 +++++++++++++++++++++++---------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/webpack/plugins.js b/webpack/plugins.js
index d391d4d1..b3a0cc4e 100644
--- a/webpack/plugins.js
+++ b/webpack/plugins.js
@@ -10,7 +10,7 @@ const glob = require('glob');
 const imagePath = path.resolve(__dirname, '../images');
 
 const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
-  filename: 'style.css',
+  filename: '[name].css',
   chunkFilename: '[id].css',
 });
 
@@ -35,7 +35,15 @@ module.exports = {
   ImageminPlugin,
   SpriteLoaderPlugin,
   CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
     cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
-    cleanAfterEveryBuildPatterns: ['remove/**', '!js', '!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      'css/style.*', // Remove duplicated dist/css/style.css and its css.map
+      '!*.{png,jpg,gif,svg}',
+    ],
   }),
 };
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index ddd89609..ff38042c 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -7,17 +7,36 @@ const webpackDir = path.resolve(__dirname);
 const rootDir = path.resolve(__dirname, '..');
 const distDir = path.resolve(rootDir, 'dist');
 
-function getEntries(pattern) {
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssPattern, jsPattern) {
   const entries = {};
 
-  glob.sync(pattern).forEach((file) => {
+  // SCSS entries
+  glob.sync(scssPattern).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsPattern).forEach((file) => {
     const filePath = file.split('components/')[1];
     const newfilePath = `js/${filePath.replace('.js', '')}`;
     entries[newfilePath] = file;
   });
 
   entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
-  entries.css = path.resolve(webpackDir, 'css.js');
+  // entries.css must renamed into entries.style in order to keep style.css file name.
+  // Since each css file in derives its name from own entries.property name.
+  entries.style = path.resolve(webpackDir, 'css.js');
 
   return entries;
 }
@@ -26,12 +45,7 @@ module.exports = {
   stats: {
     errorDetails: true,
   },
-  entry: getEntries(
-    path.resolve(
-      rootDir,
-      'components/**/!(*.stories|*.component|*.min|*.test).js',
-    ),
-  ),
+  entry: getEntries(scssPattern, jsPattern),
   module: {
     rules: [
       loaders.CSSLoader,