feat(bundler): allow the use of external library CSS (#124)

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

@@ -28,6 +28,33 @@ Object {
   "options": Object {
     "importLoaders": 2,
     "modules": Object {
+      "getLocalIdent": [Function],
+      "localIdentName": "[name]__[local]___[hash:base64:5]",
+    },
+  },
+}
+`;
+
+exports[`Common webpack loaders css-loader should still return localName from getLocalIdent if resourcePath includes node_modules 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 should still return null from getLocalIdent if resourcePath does not include node_modules 1`] = `
+Object {
+  "loader": "css-loader",
+  "options": Object {
+    "importLoaders": 2,
+    "modules": Object {
+      "getLocalIdent": [Function],
       "localIdentName": "[name]__[local]___[hash:base64:5]",
     },
   },
@@ -40,6 +67,7 @@ Object {
   "options": Object {
     "importLoaders": 2,
     "modules": Object {
+      "getLocalIdent": [Function],
       "localIdentName": "my-chunk__[name]__[local]___[hash:base64:5]",
     },
   },
@@ -52,6 +80,7 @@ Object {
   "options": Object {
     "importLoaders": 2,
     "modules": Object {
+      "getLocalIdent": [Function],
       "localIdentName": "[name]__[local]___[hash:base64:5]",
     },
   },

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

@@ -57,6 +57,38 @@ 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 };
+
+      const result = config.options.modules.getLocalIdent(
+        loaderContext, localIdentName, localName, options
+      );
+
+      expect(result).toEqual(localName);
+      expect(config).toMatchSnapshot();
+    });
+    it('should still return null from getLocalIdent if resourcePath does not include node_modules', () => {
+      const config = cssLoader();
+      const loaderContext = {
+        resourcePath: 'my-module/src/components/module.scss',
+      };
+      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();
+    });
   });
 
   describe('purgecss-loader', () => {

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

@@ -25,6 +25,16 @@ const cssLoader = ({ name = '', importLoaders = 2 } = {}) => ({
     importLoaders,
     modules: {
       localIdentName: `${name && `${name}__`}[name]__[local]___[hash:base64:5]`,
+      // 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
+      // eslint-disable-next-line max-params, no-unused-vars
+      getLocalIdent: (loaderContext, localIdentName, localName, options) => (
+        loaderContext.resourcePath.includes('node_modules') ? localName : null
+      ),
     },
   },
 });

packages/one-app-bundler/webpack/loaders/ssr-css-loader/index.js

@@ -20,8 +20,15 @@ const cssBasePathString = JSON.stringify(path.resolve(__dirname, 'css-base.js'))
 
 const CSS_LOADER_FINDER = /var ___CSS_LOADER_API_IMPORT___ = (__webpack_){0,1}require(__){0,1}\([.a-zA-Z0-9/_*!\s-]*"[.a-zA-Z0-9/_]+\/css-loader\/dist\/runtime\/api.js"\);\n\s*exports = ___CSS_LOADER_API_IMPORT___\((undefined|false)?\);/;
 
+// The following two regex patterns split the above regex in two
+// this is due to some UI libraries injecting their own vars between
+// var ___CSS_LOADER_API_IMPORT___ and exports = ___CS_LOADER_API_IMPORT___
+const CSS_RUNTIME_FINDER = /var ___CSS_LOADER_API_IMPORT___ = (__webpack_){0,1}require(__){0,1}\([.a-zA-Z0-9/_*!\s-]*"[.a-zA-Z0-9/_]+\/css-loader\/dist\/runtime\/api.js"\);/;
+
+const CSS_EXPORTS_FINDER = /exports = ___CSS_LOADER_API_IMPORT___\((undefined|false)?\);/;
+
 module.exports = function ssrCssLoader(content) {
-  if (!CSS_LOADER_FINDER.test(content)) {
+  if (!CSS_RUNTIME_FINDER.test(content) || !CSS_EXPORTS_FINDER.test(content)) {
     throw new Error(`could not find the css-loader in\n${content}`);
   }
 

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

@@ -64,7 +64,7 @@ module.exports = {
         use: [{ loader: 'url-loader' }],
       },
       {
-        test: /\.(woff)(\?.*)?$/,
+        test: /\.(woff|woff2)(\?.*)?$/,
         use: [{
           loader: 'url-loader',
           options: {