Imports not working when using postcssPlugins

[ddeklerk]

Whenever I try to import my style sheets in JavaScript I get the normal object with the classnames inside. But if I add any postCSS plugins to the config in package.json, I get an empty object.

This is what my config for cssModules looks like:

  "cssModules": {
    "ignorePaths": [
      "node_modules"
    ],
    "postcssPlugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-each": {},
      "postcss-cssnext": {}
    }
  }

I need to be able to use both css-modules and postCSS in order to use the cssnext branch of the react-toolbox repository.

[akanix42]

When using postcssPlugins, you are overriding the defaults, so you must ensure that you include the core css modules plugins. Please see the PostCSS plugins section for more detail.

  "cssModules": {
    "ignorePaths": [
      "node_modules"
    ],
    "postcssPlugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-each": {},
      "postcss-cssnext": {},
      "postcss-modules-values": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    }
  }

[ddeklerk]

I must have read over that. With that added to my package.json the imports work as expected. However, any postCSS that I import in JavaScript does not get compiled. For that to work I would have to import in another CSS file, but that is not the case for any React-Toolbox components. As a result any of those components do not have the proper styling.

Again, I am using the css-next branch of React-ttoolbox for this.

EDIT: Found the solution. I am ignoring the entire node_modules folder, while I should not ignore the node_modules/react-toolbox folder. What should I put in the ignorePaths option to achieve that behavior?

[akanix42]

I think this will do the trick for you: node_modules\/(?!react-toolbox\/). See here for an explanation: https://regex101.com/r/bJ6qC9/3#javascript.

[ddeklerk]

I modified that string to node_modules\/(?!react-toolbox\/lib\/), because I only need that folder, but it works now. Thanks.