Can't replace existing webpack rules for css files

Description

Hi! I am trying to make gatsby work with all .css files as CSS Modules. I want to make it work without having to add a .module.css extension.

So far it doesn’t seem to work.

Steps to reproduce

I tried using the onCreateWebpackConfig hook to add a css module rule for all \.css$ files. But I have this error when building:

ERROR in ./src/assets/sizes.css (./node_modules/css-loader??ref--11-oneOf-1-1!./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node
_modules/style-loader??ref--16-0!./node_modules/css-loader??ref--16-1!./node_modules/postcss-loader/lib??postcss-3!./src/assets/sizes.css)
Module build failed (from ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../node_modules/css-loader/index.js??ref--16-1!../../node_modules/postcss-loader/lib/index.js??postcss-3!./sizes.css");

What I found from googling is that this error can happen when there are multiple loaders trying to parse the same .css file. So I figured that this rule that I added probably conflicted with the default gatsby rule. I have tried to remove the default rule by getting the config with the getConfig() method. Code looks like this;

exports.onCreateWebpackConfig = ({
  rules,
  actions,
  getConfig,
}) => {
  const config = getConfig();

  const cssRule = rules.css({ modules: true });
  cssRule.test = /\.css$/;
  delete cssRule.exclude;

  config.module.rules = [
    // exclude existing css rules
    ...config.module.rules.filter((rule) => {
      if (rule.test instanceof RegExp) {
        return !(rule.test.test('.css') || rule.test.test('.module.css'));
      }
      return true;
    }),
    // replace with custom css rule
    cssRule,
  ];

  actions.replaceWebpackConfig(config);
};

But the config that I get doesn’t seem to have any rules for \.css.

Expected result

I expect to be able to replace existing rules for .css and replace with them my own.

Actual result

As far as I can tell the default rules aren’t getting replaced.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.10.1 - ~/.nvm/versions/node/v10.9.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.13 => 2.13.13
    gatsby-image: ^2.2.6 => 2.2.6
    gatsby-plugin-postcss: ^2.1.2 => 2.1.2
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.2.8 => 2.2.8
    gatsby-plugin-typescript: ^2.1.2 => 2.1.2
    gatsby-source-filesystem: ^2.1.5 => 2.1.5
    gatsby-source-graphql: ^2.1.1 => 2.1.1
    gatsby-transformer-sharp: ^2.2.4 => 2.2.4

[universse]

  const cssRule = {
    ...rules.cssModules(),
    test: rules.css().test
  }

  config.module.rules = [
    ...config.module.rules.filter(rule => {
      const areCssRules =
        rule.oneOf && rule.oneOf.some(r => r.test.test('style.css'))

      return !areCssRules
    }),
    cssRule
  ]

You can try this snippet. It seems to work with my local project. Lmk if something isn’t working.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!