Merge pull request #13 from bem/yarastqt.fix-css-modules

Allow css-modules

lib/constants.js

@@ -1,4 +1,4 @@
-const regexCssGlobal = /(?<!\.module)\.css$/
-const regexScssGlobal = /(?<!\.module)\.(scss|sass)$/
+const globalCssRe = [/(?<!\.module)\.css$/, /(?<!\.module)\.(scss|sass)$/]
+const globalCssModulesRe = [/\.module\.css$/, /\.module\.(scss|sass)$/]
 
-module.exports = { regexCssGlobal, regexScssGlobal }
+module.exports = { globalCssRe, globalCssModulesRe }

lib/index.js

@@ -1,4 +1,4 @@
-const { regexCssGlobal, regexScssGlobal } = require('./constants')
+const { globalCssRe, globalCssModulesRe } = require('./constants')
 
 function patchServerWebpackConfig(config) {
   const originalEntry = config.entry
@@ -16,34 +16,37 @@ function patchServerWebpackConfig(config) {
   }
 }
 
-function patchClientWebpackConfig(config, options) {
+function patchCommonWebpackConfig(config) {
   for (const rule of config.module.rules) {
     if (rule.oneOf) {
       for (const oneOfRule of rule.oneOf) {
-        patchWebpackStyleRules(oneOfRule, options)
+        patchWebpackStyleRules(oneOfRule)
       }
     } else {
-      patchWebpackStyleRules(rule, options)
+      patchWebpackStyleRules(rule)
     }
   }
 }
 
-function patchWebpackStyleRules(rule) {
-  if (
-    rule.test &&
-    (rule.test.source === regexCssGlobal.source || rule.test.source === regexScssGlobal.source)
-  ) {
-    // Remove issuer for allow import css from 3d-party libs and locals.
-    delete rule.issuer
+function patchWebpackStyleRules(rawRule) {
+  const rules = Array.isArray(rawRule) ? rawRule : [rawRule]
+  const cssRe = [...globalCssRe, ...globalCssModulesRe]
+
+  for (const rule of rules) {
+    if (rule.test && cssRe.some((reg) => reg.source === rule.test.source)) {
+      // Remove issuer for allow import css from 3d-party libs and locals.
+      delete rule.issuer
+    }
   }
 }
 
 function patchWebpackConfig(config, { isServer }) {
   if (isServer) {
     patchServerWebpackConfig(config)
-  } else {
-    patchClientWebpackConfig(config)
   }
+
+  patchCommonWebpackConfig(config)
+
   return config
 }
 

lib/patch-global-require.js

@@ -1,10 +1,10 @@
 const Module = require('module')
 
-const { regexCssGlobal, regexScssGlobal } = require('./constants')
+const { globalCssRe } = require('./constants')
 
 Module.prototype.require = new Proxy(Module.prototype.require, {
   apply(target, thisArg, args) {
-    if (regexCssGlobal.test(args[0]) || regexScssGlobal.test(args[0])) {
+    if (globalCssRe.some((reg) => reg.test(args[0]))) {
       return ''
     }
     return Reflect.apply(target, thisArg, args)

readme.md

@@ -31,6 +31,7 @@ module.exports = withConfig({
 ```
 
 **If your webpack configuration is already customized:**
+
 ```js
 const { patchWebpackConfig } = require('next-global-css')
 
@@ -43,6 +44,29 @@ const nextConfig = {
 }
 ```
 
+**Allow css-modules from node-modules:**
+
+```js
+const { patchWebpackConfig } = require('next-global-css')
+const webpackNodeExternals = require('webpack-node-externals')
+
+module.exports = {
+  reactStrictMode: true,
+  webpack: (config, options) => {
+    patchWebpackConfig(config, options)
+
+    if (options.isServer) {
+      config.externals = webpackNodeExternals({
+        // Uses list to add this modules for server bundle and process.
+        allowlist: [/design-system/],
+      })
+    }
+
+    return config
+  },
+}
+```
+
 ## 📜 License
 
 Project is [MIT licensed](https://github.com/yarastqt/next-global-css/blob/master/license.md).