Enable CSS Modules for SASS files

Author: lnhrdt

index.js

@@ -1,22 +1,47 @@
 
 const ruleChildren = (loader) => loader.use || loader.oneOf || Array.isArray(loader.loader) && loader.loader || []
 
-const getRule = (rulesSource, matcher) => {
-    let matchingRule = undefined
+const findRulesWithMatchingRule = (rulesSource, matcher) => {
+    let result = undefined
     const rules = Array.isArray(rulesSource) ? rulesSource : ruleChildren(rulesSource)
-    rules.some(rule => matchingRule = matcher(rule) ? rule : getRule(ruleChildren(rule), matcher))
-    return matchingRule
+    rules.some((rule, index) => result = matcher(rule) ? {index, rules} : findRulesWithMatchingRule(ruleChildren(rule), matcher))
+    return result
+}
+
+const getRule = (rulesSource, matcher) => {
+    const {index, rules} = findRulesWithMatchingRule(rulesSource, matcher)
+    return rules[index]
 }
 
 const createLoaderMatcher = (loader) => (rule) => rule.loader && rule.loader.indexOf(`/${loader}/`) !== -1
 const cssLoaderMatcher = createLoaderMatcher('css-loader')
+const postcssLoaderMatcher = createLoaderMatcher('postcss-loader')
+const fileLoaderMatcher = createLoaderMatcher('file-loader')
 const cssRuleMatcher = (rule) => rule.test && String(rule.test) === String(/\.css$/)
 
+const cloneDeep = require('lodash.clonedeep')
+
+const addAfterLoader = (rulesSource, matcher, value) => {
+    const {index, rules} = findRulesWithMatchingRule(rulesSource, matcher)
+    rules.splice(index + 1, 0, value)
+}
+
+const addBeforeLoader = (rulesSource, matcher, value) => {
+    const {index, rules} = findRulesWithMatchingRule(rulesSource, matcher)
+    rules.splice(index, 0, value)
+}
+
 module.exports = function (config, env) {
     const cssRule = getRule(config.module.rules, cssRuleMatcher)
     const cssRuleCssLoader = getRule(cssRule, cssLoaderMatcher)
 
     cssRuleCssLoader.options = Object.assign({modules: true, localIdentName: '[local]___[hash:base64:5]'}, cssRuleCssLoader.options)
 
+    const sassRule = cloneDeep(cssRule)
+    sassRule.test = /\.s[ac]ss$/
+    addAfterLoader(sassRule, postcssLoaderMatcher, require.resolve('sass-loader'))
+
+    addBeforeLoader(config.module.rules, fileLoaderMatcher, sassRule)
+
     return config
 }

index.test.js

@@ -109,25 +109,66 @@ describe('CSS Modules rewire', () => {
         }
     }
 
-    it('should enable CSS modules on the existing development CSS loader', () => {
-        const result = subject(mockDevelopmentConfig)
+    describe('CSS loader', () => {
+        it('should enable CSS modules (development)', () => {
+            const result = subject(mockDevelopmentConfig)
 
-        expect(result.module.rules[1].oneOf[2].use[1].options).toEqual({
-            importLoaders: 1,
-            modules: true,
-            localIdentName: '[local]___[hash:base64:5]'
+            expect(result.module.rules[1].oneOf[2].use[1].options).toEqual({
+                importLoaders: 1,
+                modules: true,
+                localIdentName: '[local]___[hash:base64:5]'
+            })
+        })
+
+        it('should enable CSS modules (production)', () => {
+            const result = subject(mockProductionConfig)
+
+            expect(result.module.rules[1].oneOf[2].loader[2].options).toEqual({
+                importLoaders: 1,
+                minimize: true,
+                sourceMap: true,
+                modules: true,
+                localIdentName: '[local]___[hash:base64:5]'
+            })
         })
     })
 
-    it('should enable CSS modules on the existing production CSS loader', () => {
-        const result = subject(mockProductionConfig)
+    describe('SASS loader', () => {
+        describe('development', () => {
+
+            const result = subject(mockDevelopmentConfig)
+            const cssLoader = result.module.rules[1].oneOf[2]
+            const sassLoader = result.module.rules[1].oneOf[3]
+
+            it('should configure the test regex', () => {
+                expect(result.module.rules[1].oneOf[3].test).toEqual(/\.s[ac]ss$/)
+            })
+
+            it('should build upon the CSS loader', () => {
+                expect(sassLoader.use.slice(0, 3)).toEqual(cssLoader.use)
+            })
+
+            it('should append the sass-loader', () => {
+                expect(sassLoader.use[3]).toContain('/sass-loader/')
+            })
+        })
+
+        describe('production', () => {
+            const result = subject(mockProductionConfig)
+            const cssLoader = result.module.rules[1].oneOf[2]
+            const sassLoader = result.module.rules[1].oneOf[3]
+
+            it('should configure the test regex', () => {
+                expect(result.module.rules[1].oneOf[3].test).toEqual(/\.s[ac]ss$/)
+            })
+
+            it('should build upon the CSS loader', () => {
+                expect(sassLoader.loader.slice(0, 4)).toEqual(cssLoader.loader)
+            })
 
-        expect(result.module.rules[1].oneOf[2].loader[2].options).toEqual({
-            importLoaders: 1,
-            minimize: true,
-            sourceMap: true,
-            modules: true,
-            localIdentName: '[local]___[hash:base64:5]'
+            it('should append the sass-loader', () => {
+                expect(sassLoader.loader[4]).toContain('/sass-loader/')
+            })
         })
     })
 })

package.json

@@ -3,6 +3,15 @@
     "test": "jest"
   },
   "devDependencies": {
-    "jest": "^21.2.1"
+    "jest": "^21.2.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6"
+  },
+  "dependencies": {
+    "lodash.clonedeep": "^4.5.0"
+  },
+  "peerDependencies": {
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6"
   }
 }