Separate out style loader into css and sass loader for easier configuration

Make them css and sass loader

Update changelog

Don't mutate original object but make a copy

Author: gauravtiwari

CHANGELOG.md

@@ -50,6 +50,20 @@ environment.resolvedModules.set('vendor', 'vendor')
 
 - Enable sourcemaps in `style` and `css` loader
 
+- Separate `css` and `sass` loader for easier configuration. `style` loader is now
+`css` loader, which resolves `.css` files and `sass` loader resolves `.scss` and `.sass`
+files.
+
+```js
+// Enable css modules with sass loader
+const sassLoader = environment.loaders.get('sass')
+const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
+
+cssLoader.options = Object.assign(cssLoader.options, {
+  modules: true,
+  localIdentName: '[path][name]__[local]--[hash:base64:5]'
+})
+```
 
 ### Added (Gem)
 

package/rules/style.js renamed to package/rules/css.js

@@ -21,20 +21,19 @@ const extractOptions = {
   use: [
     { loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 3 } },
     { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
-    { loader: 'resolve-url-loader', options: { attempts: 1 } },
-    { loader: 'sass-loader', options: { sourceMap: true } }
+    { loader: 'resolve-url-loader', options: { attempts: 1 } }
   ]
 }
 
 // For production extract styles to a separate bundle
 const extractCSSLoader = {
-  test: /\.(scss|sass|css)$/i,
+  test: /\.(css)$/i,
   use: ExtractTextPlugin.extract(extractOptions)
 }
 
 // For hot-reloading use regular loaders
 const inlineCSSLoader = {
-  test: /\.(scss|sass|css)$/i,
+  test: /\.(css)$/i,
   use: [styleLoader].concat(extractOptions.use)
 }
 

package/rules/index.js

@@ -3,7 +3,8 @@ const coffee = require('./coffee')
 const elm = require('./elm')
 const erb = require('./erb')
 const file = require('./file')
-const style = require('./style')
+const css = require('./css')
+const sass = require('./sass')
 const typescript = require('./typescript')
 const vue = require('./vue')
 
@@ -12,8 +13,9 @@ module.exports = {
   coffee,
   elm,
   erb,
-  file,
-  style,
+  css,
+  sass,
   typescript,
-  vue
+  vue,
+  file
 }

package/rules/sass.js

@@ -0,0 +1,12 @@
+const cssLoader = require('./css')
+const deepMerge = require('../utils/deep_merge')
+
+// Duplicate and remove css loader object reference
+let sassLoader = JSON.parse(JSON.stringify(cssLoader))
+
+sassLoader = deepMerge(sassLoader, {
+  test: /\.(scss|sass)$/i,
+  use: [{ loader: 'sass-loader', options: { sourceMap: true } }]
+})
+
+module.exports = sassLoader