Added the ability to configure style-loader and css-loader

DocSpring · Nov 15, 2018 · 077f864 · 077f864
1 parent 0e607e8
commit 077f864
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -47,7 +47,46 @@ module.exports = {
 };
 ```
 
-Pass an `options` object to configure the `less-loader` options:
+## Configuration
+
+You can pass an `options` object to configure `style-loader`, `css-loader`, and `less-loader`:
+
+- `options.styleLoaderOptions`
+  - [View the `style-loader` options](https://webpack.js.org/loaders/style-loader/#options)
+- `options.cssLoaderOptions`
+  - [View the `css-loader` options](https://webpack.js.org/loaders/css-loader/#options)
+- `options.lessLoaderOptions`
+  - [View the `less-loader` documentation](https://webpack.js.org/loaders/less-loader/)
+  - [View the Less options](http://lesscss.org/usage/#less-options)
+    - You must use "camelCase" instead of "dash-case", e.g. `--source-map` => `sourceMap`
+
+For example, to configure `less-loader`:
+
+```js
+const CracoLessPlugin = require("craco-less");
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          modifyVars: {
+            "@primary-color": "#1DA57A",
+            "@link-color": "#1DA57A",
+            "@border-radius-base": "2px"
+          },
+          javascriptEnabled: true
+        }
+      }
+    }
+  ]
+};
+```
+
+## CSS Modules
+
+You can configure the [`css-loader` options](https://webpack.js.org/loaders/css-loader/#options) to set up CSS modules. For example:
 
 ```js
 const CracoLessPlugin = require("craco-less");
@@ -57,19 +96,23 @@ module.exports = {
     {
       plugin: CracoLessPlugin,
       options: {
-        modifyVars: {
-          "@primary-color": "#1DA57A",
-          "@link-color": "#1DA57A",
-          "@border-radius-base": "2px"
-        },
-        javascriptEnabled: true
+        cssLoaderOptions: {
+          modules: true,
+          localIdentName: "[local]_[hash:base64:5]"
+        }
       }
     }
   ]
 };
 ```
 
-> [View the less-loader Documentation](https://webpack.js.org/loaders/less-loader/).
+> [View the `css-loader` options](https://webpack.js.org/loaders/style-loader/#options)
+
+#### CSS modules gotcha
+
+There is a known problem with Less and [CSS modules](https://github.com/css-modules/css-modules) regarding relative file paths in `url(...)` statements. [See this issue for an explanation.](https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335)
+
+> ([Copied from the less-loader README](https://github.com/webpack-contrib/less-loader#css-modules-gotcha).)
 
 ## Further Configuration
 

diff --git a/lib/craco-less.js b/lib/craco-less.js
@@ -16,18 +16,22 @@ module.exports = {
 
     const lessExtension = /\.less$/;
 
+    pluginOptions = pluginOptions || {};
+
     const lessRule = {
       test: lessExtension,
       use: [
         {
-          loader: require.resolve("style-loader")
+          loader: require.resolve("style-loader"),
+          options: pluginOptions.styleLoaderOptions || {}
         },
         {
-          loader: require.resolve("css-loader")
+          loader: require.resolve("css-loader"),
+          options: pluginOptions.cssLoaderOptions || {}
         },
         {
           loader: require.resolve("less-loader"),
-          options: pluginOptions || {}
+          options: pluginOptions.lessLoaderOptions || {}
         }
       ]
     };

diff --git a/lib/craco-less.test.js b/lib/craco-less.test.js
@@ -43,10 +43,51 @@ test("the webpack config is modified correctly with less-loader options", () =>
       {
         plugin: CracoLessPlugin,
         options: {
-          modifyVars: {
-            "@less-variable": "#fff"
+          lessLoaderOptions: {
+            modifyVars: {
+              "@less-variable": "#fff"
+            },
+            javascriptEnabled: true
+          }
+        }
+      }
+    ]
+  });
+
+  const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf);
+  expect(oneOfRules).not.toBeUndefined();
+  const lessRule = oneOfRules.oneOf.find(
+    r => r.test && r.test.toString() === "/\\.less$/"
+  );
+  expect(lessRule).not.toBeUndefined();
+  expect(lessRule.use[2].loader).toContain("/less-loader");
+  expect(lessRule.use[2].options).toEqual({
+    javascriptEnabled: true,
+    modifyVars: {
+      "@less-variable": "#fff"
+    }
+  });
+});
+
+test("the webpack config is modified correctly with all loader options", () => {
+  applyCracoConfigAndOverrideWebpack({
+    plugins: [
+      {
+        plugin: CracoLessPlugin,
+        options: {
+          lessLoaderOptions: {
+            modifyVars: {
+              "@less-variable": "#fff"
+            },
+            javascriptEnabled: true
           },
-          javascriptEnabled: true
+          cssLoaderOptions: {
+            modules: true,
+            localIdentName: "[local]_[hash:base64:5]"
+          },
+          styleLoaderOptions: {
+            sourceMaps: true
+          }
         }
       }
     ]
@@ -58,6 +99,17 @@ test("the webpack config is modified correctly with less-loader options", () =>
     r => r.test && r.test.toString() === "/\\.less$/"
   );
   expect(lessRule).not.toBeUndefined();
+  expect(lessRule.use[0].loader).toContain("/style-loader");
+  expect(lessRule.use[0].options).toEqual({
+    sourceMaps: true
+  });
+
+  expect(lessRule.use[1].loader).toContain("/css-loader");
+  expect(lessRule.use[1].options).toEqual({
+    modules: true,
+    localIdentName: "[local]_[hash:base64:5]"
+  });
+
   expect(lessRule.use[2].loader).toContain("/less-loader");
   expect(lessRule.use[2].options).toEqual({
     javascriptEnabled: true,