add no css rules case

README.md

@@ -1,27 +1,28 @@
-[![Build Status](https://travis-ci.org/jcreamer898/gatsby-plugin-typescript-css-modules.svg?branch=master)](https://travis-ci.org/jcreamer898/gatsby-plugin-typescript-css-modules)
+## Forked From
 
-# Gatsby Plugin Typescript CSS Modules
-This [GatsbyJS](gatsbyjs.org) plugin allows for using TypeScript along side CSS Modules.
+[https://github.com/jcreamer898/gatsby-plugin-typescript-css-modules](https://github.com/jcreamer898/gatsby-plugin-typescript-css-modules)
 
-It requires you to name your css files as `page.module.css`, but from there you can import them into TS files.
+# Gatsby Plugin Typescript CSS Modules
+This [GatsbyJS](gatsbyjs.org) plugin adds [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) to your configuration 
 
+Import styles normally
 ```ts
 import * as styles from "./page.module.css";
 ```
 
-The way this works is, under the covers the https://github.com/Jimdo/typings-for-css-modules-loader WebPack plugin reads the CSS file and generates a `.d.ts` file alongside your css.
+and typings-for-css-modules-loader will read the CSS file and generates a `.d.ts` file alongside your css.
 
 ### Installing
 First, install the plugin...
 
 ```bash
-npm i gatsby-plugin-typescript-css-modules
+npm i gatsby-transformer-typescript-css-modules --save
 ```
 
 Then, add the plugin to your `gatsby-config.js`...
 
 ```js
   // ...
-  "gatsby-plugin-typescript-css-modules"
+  "gatsby-transformer-typescript-css-modules"
 ]
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-transformer-typescript-css-modules",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A gatsbyjs transformer plugin for using CSS/SCSS Modules and Typescript",
   "main": "index.js",
   "scripts": {

src/gatsby-node.ts

@@ -1,17 +1,9 @@
-const CSS_PATTERN = /\.css$/
-const MODULE_CSS_PATTERN = /\.module\.css$/
-
-const isCssRules = rule =>
-    rule.test &&
+const CSS_PATTERN = /\.css$/;
+const MODULE_CSS_PATTERN = /\.module\.css$/;
+const isCssRules = rule => rule.test &&
     (rule.test.toString() === CSS_PATTERN.toString() ||
-        rule.test.toString() === MODULE_CSS_PATTERN.toString())
-
-const findCssRules = config =>
-    config.module.rules.find(
-        rule => Array.isArray(rule.oneOf) && rule.oneOf.every(isCssRules)
-    )
-
-
+        rule.test.toString() === MODULE_CSS_PATTERN.toString());
+const findCssRules = config => config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.every(isCssRules));
 /**
  * See documentation here: https://www.gatsbyjs.org/docs/add-custom-webpack-config/
  * Unfortunately, adding to the default css setup has to be hacky because
@@ -26,60 +18,52 @@ const findCssRules = config =>
  * @param rules
  */
 exports.onCreateWebpackConfig = ({ getConfig, stage, actions, loaders, rules }) => {
-
-    const isSSR = stage.includes(`html`)
-    const config = getConfig()
-    const cssRules = findCssRules(config)
+    const config = getConfig();
+    const cssRules = findCssRules(config);
     const typingLoader = {
-        loader  : 'typings-for-css-modules-loader',
-        options : {
-            modules         : true,
-            importLoaders   : 1,
-            localIndentName : '[path]___[name]__[local]___[hash:base64:5]',
-            namedExport     : true,
-            camelCase       : true
+        loader: 'typings-for-css-modules-loader',
+        options: {
+            modules: true,
+            importLoaders: 1,
+            localIndentName: '[path]___[name]__[local]___[hash:base64:5]',
+            namedExport: true,
+            camelCase: true
         }
-    }
-
-    const typingRule = {
-        test: CSS_PATTERN,
-        use: isSSR
-          ? [loaders.null()]
-          : [loaders.css({ importLoaders: 1 }), typingLoader],
-    }
-
-    const typingRuleModule = {
-        test : MODULE_CSS_PATTERN,
-        use  : [
-            loaders.css({
-              modules: true,
-              importLoaders: 1,
-            }),
-            typingLoader
-        ]
-    }
-
-    if (!isSSR) {
-        typingRule.use.unshift(loaders.miniCssExtract())
-        typingRuleModule.use.unshift(loaders.miniCssExtract())
-    }
-
-    const typingRules = { oneOf: [] }
-
-    switch (stage) {
-      case `develop`:
-      case `build-javascript`:
-      case `build-html`:
-      case `develop-html`:
-        typingRules.oneOf.push(...[typingRuleModule, typingRule])
-        break
-    }
+    };
 
+    //If css rules already exist we need to find the css loader and replace it since typings-for-css-modules-loader
+    //is a REPLACEMENT for css-loader
     if (cssRules) {
-        cssRules.oneOf.unshift(...typingRules.oneOf)
-        actions.replaceWebpackConfig(config)
+        cssRules.oneOf.forEach((statement) => {
+            const index = statement.use.findIndex(({ loader }) => loader.match(/\/css-loader\//))
+            if (index) {
+                statement.use[index] = typingLoader
+            }
+            //If we didn't find a css-loader we can push the typingLoader onto the use statement
+            else {
+                statement.use.push(typingLoader)
+            }
+        });
+
+        actions.replaceWebpackConfig(config);
     }
+    //If there aren't any existing css rules, add one
     else {
-        actions.setWebpackConfig({ module : { rules : [typingRules] } })
+        actions.setWebpackConfig({
+            module : {
+                rules : [{
+                    oneOf: [
+                        {
+                            test: CSS_PATTERN,
+                            use: typingLoader
+                        },
+                        {
+                            test: MODULE_CSS_PATTERN,
+                            use: typingLoader
+                        }
+                    ]
+                }]
+            }
+        });
     }
-}
+};