[WIP] feat: support css modules for files with *.module.* in Webpack

config/webpack.dev-stage.config.js

@@ -102,7 +102,7 @@ module.exports = merge(commonConfig, {
                 ],
                 // Silences compiler deprecation warnings. They mostly come from bootstrap and/or paragon.
                 quietDeps: true,
-                silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
+                silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin', 'legacy-js-api'],
               },
             },
           },

config/webpack.dev.config.js

@@ -31,16 +31,18 @@ resolvePrivateEnvConfig('.env.private');
 const aliases = getLocalAliases();
 const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';
 
-function getStyleUseConfig() {
+function getStyleUseConfig({ isModule = false } = {}) {
+  const cssLoaderOptions = {
+    sourceMap: true,
+    ...(isModule
+      ? { modules: true }
+      : { modules: { compileType: 'icss' } }
+    ),
+  };
   return [
     {
       loader: 'css-loader', // translates CSS into CommonJS
-      options: {
-        sourceMap: true,
-        modules: {
-          compileType: 'icss',
-        },
-      },
+      options: cssLoaderOptions,
     },
     {
       loader: 'postcss-loader',
@@ -66,7 +68,7 @@ function getStyleUseConfig() {
           ],
           // Silences compiler deprecation warnings. They mostly come from bootstrap and/or paragon.
           quietDeps: true,
-          silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
+          silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin', 'legacy-js-api'],
         },
       },
     },
@@ -118,6 +120,13 @@ module.exports = merge(commonConfig, {
               ...getStyleUseConfig(),
             ],
           },
+          {
+            resource: /\.module\.(scss|css)$/,
+            use: [
+              'style-loader', // creates style nodes from JS strings
+              ...getStyleUseConfig({ isModule: true }),
+            ],
+          },
           {
             use: [
               'style-loader', // creates style nodes from JS strings

config/webpack.prod.config.js

@@ -133,7 +133,7 @@ module.exports = merge(commonConfig, {
                 ],
                 // Silences compiler deprecation warnings. They mostly come from bootstrap and/or paragon.
                 quietDeps: true,
-                silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
+                silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin', 'legacy-js-api'],
               },
             },
           },

example/src/App.tsx

@@ -6,16 +6,40 @@ import appleUrl, { ReactComponent as Apple } from './apple.svg';
 // @ts-ignore
 import appleImg from './apple.jpg';
 
-import './style.scss';
 import ParagonPreview from './ParagonPreview';
 
+// Without CSS modules support
+// @ts-ignore
+import defaultStyles from './style.scss';
+
+// With CSS modules support
+// @ts-ignore
+import moduleStyles from './example.module.scss';
+
+// @ts-ignore
+import exampleStyles from './example.scss';
+
+console.log('defaultStyles', defaultStyles);
+console.log('moduleStyles', moduleStyles);
+console.log('exampleStyles', exampleStyles);
+
 const App = () => {
   const newEnglandApples = ['macintosh', 'granny smith'];
   const allApples = [...newEnglandApples, 'fuji', 'golden delicious'];
+
+  const stylesConfig = {
+    defaultStyles,
+    moduleStyles,
+    exampleStyles,
+  };
+
   return (
     <div>
       <h1>Test page</h1>
       <h2>SCSS parsing tests</h2>
+      <pre>
+        {JSON.stringify(stylesConfig, null, 2)}
+      </pre>
       <h3>The Apples</h3> (&quot;The Apples&quot; should be red)
       <h2>ES6 parsing tests</h2>
       <ul>
@@ -41,6 +65,11 @@ const App = () => {
       <p>env.config.js integer test: {Number.isInteger(config.INTEGER_VALUE) ? 'It was an integer. Great.' : 'It was not an integer! Why not? '}</p>
       <h2>Right-to-left language handling tests</h2>
       <p className="text-align-right">I&apos;m aligned right, but left in RTL.</p>
+      {/* <p className="text-align-right">I&apos;m aligned right, but left in RTL.</p> */}
+      {/* <div className="style-modified">
+        <p className="text-align-right">I&apos;m aligned right, but left in RTL.</p>
+      </div> */}
+      {/* <p className={moduleStyles['text-align-right']}>I&apos;m aligned right, but left in RTL.</p> */}
       <ParagonPreview />
     </div>
   );

example/src/example.module.scss

@@ -0,0 +1,14 @@
+$h3-color: red;
+
+h3 {
+  color: $h3-color;
+}
+
+.text-align-right {
+  text-align: right;
+  color: blue;
+}
+
+:export {
+  h3Color: $h3-color;
+}

example/src/example.scss

@@ -0,0 +1,11 @@
+.text-align-right {
+  text-align: right;
+  color: blue;
+}
+
+// .style-modified {
+//   .text-align-right {
+//     text-align: right;
+//     color: blue;
+//   }
+// }

example/src/index.jsx → example/src/index.tsx

@@ -1,5 +1,5 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
 // This line is to emulate what frontend-platform does when i18n initializes.
@@ -9,5 +9,7 @@
 global.document.getElementsByTagName('html')[0].setAttribute('dir', 'ltr');
 
 const rootContainer = document.getElementById('root');
-const root = createRoot(rootContainer);
-root.render(<StrictMode><App /></StrictMode>);
+if (rootContainer) {
+  const root = createRoot(rootContainer);
+  root.render(<StrictMode><App /></StrictMode>);
+}

example/src/style.scss

@@ -7,3 +7,7 @@ h3 {
 .text-align-right {
   text-align: right;
 }
+
+:export {
+  h3Color: $h3-color;
+}