fix(css-loader): do not use localName for css modules in node_modules

packages/one-app-bundler/__tests__/webpack/loaders/__snapshots__/common.spec.js.snap

@@ -22,7 +22,20 @@ Object {
 }
 `;
 
-exports[`Common webpack loaders css-loader should still return a good localIdentName when not given a chunk name 1`] = `
+exports[`Common webpack loaders css-loader resourcePath includes node_modules should return localName from getLocalIdent if the file is not a module 1`] = `
+Object {
+  "loader": "css-loader",
+  "options": Object {
+    "importLoaders": 2,
+    "modules": Object {
+      "getLocalIdent": [Function],
+      "localIdentName": "[name]__[local]___[hash:base64:5]",
+    },
+  },
+}
+`;
+
+exports[`Common webpack loaders css-loader resourcePath includes node_modules should return null from getLocalIndent if the file is a module 1`] = `
 Object {
   "loader": "css-loader",
   "options": Object {
@@ -35,7 +48,7 @@ Object {
 }
 `;
 
-exports[`Common webpack loaders css-loader should still return localName from getLocalIdent if resourcePath includes node_modules 1`] = `
+exports[`Common webpack loaders css-loader should still return a good localIdentName when not given a chunk name 1`] = `
 Object {
   "loader": "css-loader",
   "options": Object {

packages/one-app-bundler/__tests__/webpack/loaders/common.spec.js

@@ -55,21 +55,39 @@ describe('Common webpack loaders', () => {
       expect(config.options.modules.localIdentName).toBe('[name]__[local]___[hash:base64:5]');
       expect(config).toMatchSnapshot();
     });
-    it('should still return localName from getLocalIdent if resourcePath includes node_modules', () => {
-      const config = cssLoader();
-      const loaderContext = {
-        resourcePath: 'node_modules/some-library/some-library.min.css',
-      };
-      const localIdentName = '[name]__[local]___[hash:base64:5]';
-      const localName = 'horizontal';
-      const options = { context: undefined, hashPrefix: '', regExp: null };
+    describe('resourcePath includes node_modules', () => {
+      it('should return localName from getLocalIdent if the file is not a module', () => {
+        const config = cssLoader();
+        const loaderContext = {
+          resourcePath: 'node_modules/some-library/some-library.min.css',
+        };
+        const localIdentName = '[name]__[local]___[hash:base64:5]';
+        const localName = 'horizontal';
+        const options = { context: undefined, hashPrefix: '', regExp: null };
 
-      const result = config.options.modules.getLocalIdent(
-        loaderContext, localIdentName, localName, options
-      );
+        const result = config.options.modules.getLocalIdent(
+          loaderContext, localIdentName, localName, options
+        );
 
-      expect(result).toEqual(localName);
-      expect(config).toMatchSnapshot();
+        expect(result).toEqual(localName);
+        expect(config).toMatchSnapshot();
+      });
+      it('should return null from getLocalIndent if the file is a module', () => {
+        const config = cssLoader();
+        const loaderContext = {
+          resourcePath: 'node_modules/some-library/file.module.css',
+        };
+        const localIdentName = '[name]__[local]___[hash:base64:5]';
+        const localName = 'horizontal';
+        const options = { context: undefined, hashPrefix: '', regExp: null };
+
+        const result = config.options.modules.getLocalIdent(
+          loaderContext, localIdentName, localName, options
+        );
+
+        expect(result).toEqual(null);
+        expect(config).toMatchSnapshot();
+      });
     });
     it('should still return null from getLocalIdent if resourcePath does not include node_modules', () => {
       const config = cssLoader();

packages/one-app-bundler/package.json

@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@americanexpress/eslint-plugin-one-app": "^6.13.5",
-    "@americanexpress/one-app-dev-bundler": "^1.6.0",
+    "@americanexpress/one-app-dev-bundler": "^1.7.0",
     "@americanexpress/one-app-locale-bundler": "^6.6.0",
     "@americanexpress/purgecss-loader": "4.0.0",
     "@babel/core": "^7.17.5",

packages/one-app-bundler/webpack/loaders/common.js

@@ -27,12 +27,16 @@ const cssLoader = ({ name = '', importLoaders = 2 } = {}) => ({
       // getLocalIdent is a function that allows you to specify a function to generate the classname
       // The documentation can be found here:
       // https://github.com/webpack-contrib/css-loader#getlocalident
-
-      // The below function returns the classnames as is if the resourcePath includes node_modules
-      // if it doesn't it returns null allowing localIdentName to define the classname
-      getLocalIdent: (loaderContext, localIdentName, localName) => (
-        loaderContext.resourcePath.includes('node_modules') ? localName : null
-      ),
+      getLocalIdent: (loaderContext, localIdentName, localName) => {
+        const { resourcePath } = loaderContext;
+        if (!resourcePath.includes('node_modules') || resourcePath.endsWith('.module.css') || resourcePath.endsWith('.module.scss')) {
+          // use the default option (scoped) for non-node_module files or css modules within
+          // node_modules
+          return null;
+        }
+        // for standard css files within node_modules, do not scope the class names
+        return localName;
+      },
     },
   },
 });

yarn.lock

@@ -9,7 +9,7 @@
   dependencies:
     lodash "^4.17.11"
 
-"@americanexpress/one-app-dev-bundler@^1.6.0":
+"@americanexpress/one-app-dev-bundler@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@americanexpress/one-app-dev-bundler/-/one-app-dev-bundler-1.7.0.tgz#c002be14e907783a74833d7d99070013cc38b201"
   integrity sha512-HHpbOMog/kFNG+eDlrFJJvMGhoIUh5b/lx9LIkCkShrM6dMNlDJJ0aybXfgZt7+TU4wMZdPs1WHVlab3Ukbuew==