From 0ba91e04da2868a24843db3c499083283bfbb1a7 Mon Sep 17 00:00:00 2001
From: Daniel Platon <platon@adobe.com>
Date: Wed, 29 Jul 2020 16:10:28 +0300
Subject: [PATCH] CIF-1547 - [React Components] Fix CSS reusability

Extract the CSS in a separate file during build and use a specific element to scope classes by their component name
---
 react-components/webpack.config.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/react-components/webpack.config.js b/react-components/webpack.config.js
index eefebc2351..5cbbf9f759 100644
--- a/react-components/webpack.config.js
+++ b/react-components/webpack.config.js
@@ -12,8 +12,9 @@
  *
  ******************************************************************************/
 const path = require('path');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const pkg = require('./package.json');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const libraryName = pkg.name;
 
@@ -52,13 +53,12 @@ module.exports = {
             {
                 test: /\.css/,
                 use: [
-                    'style-loader',
+                    MiniCssExtractPlugin.loader,
                     {
                         loader: 'css-loader',
                         options: {
                             modules: {
-                                localIdentName:
-                                    '[name]__[local]__[hash:base64:5]'
+                                localIdentName: 'cmp-[folder]__[name]__[local]'
                             }
                         }
                     }
@@ -78,7 +78,13 @@ module.exports = {
             }
         ]
     },
-    plugins: [new CleanWebpackPlugin()],
+    plugins: [
+        new CleanWebpackPlugin(),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css'
+        })
+    ],
     devtool: 'source-map',
     mode: 'development',
     resolve: {