Nested styles don't work

[aevk]

An example

.nav {
  &-item {
    color: red;
  }
}

...
  Module build failed: Error: /path/to/my/component.js: CSS module does not exist.
...

I solved this problem by installing postcss-nested in

  /path/to/myproject/node_modules/babel-plugin-react-css-modules/

and added in requireCssModule.js

...
import ExtractImports from 'postcss-modules-extract-imports';
import LocalByDefault from 'postcss-modules-local-by-default';
import Parser from 'postcss-modules-parser';
import Scope from 'postcss-modules-scope';
import Values from 'postcss-modules-values';
import Nested from 'postcss-nested'; // add
...
const plugins = [
  Nested, // add (before or after Values)
  Values,
  LocalByDefault,
  ExtractImports,
  new Scope({
    generateScopedName: scopedName
  }),
  new Parser({
    fetch
  })
];
...

And all works well. But it would be nice to have native support.

[gajus]

@aevk Can you raise a PR please?

[bas-ie]

Thanks @aevk that was bugging me too! Thanks to @gajus for the excellent work :)

[gajus]

Sorry, I've misinterpreted the original issue.

The nested styles are not supposed to work out of the box: it is not part of the CSS standard. You can use a CSS preprocessor, e.g. https://github.com/postcss/postcss#syntaxes

[tyler-dot-earth]

@aevk @richchurcher I use my own PostCSS plugins and have no problem with nesting. Just make sure your style loaders and PostCSS plugins are configured properly. For example:

postcss.config.js

module.exports = {
  // Note that PostCSS plugin ordering is important.
  plugins: [
    require('postcss-nested')(),
    require('postcss-import')({
      path: [
        './src'
      ],
    }),
    require('postcss-custom-properties')(),
    require('postcss-color-function')(),
    require('autoprefixer')({ browsers: ['last 2 versions'] }),
  ]
}

✨

[bas-ie]

Yes, I forgot not everyone would be using SASS etc with this plugin! Thanks for the suggestions, I'll follow those up.

[levity]

@gajus -- to be clear, my issue in #71 is that even if you are using the postcss-scss preprocessor, nested styles are still not supported. So postcss-scss by itself is actually insufficient to handle Sass syntax, and postcss-nested also needs to be included.

@tsnieman, when you define your own postcss.config.js this way, how does it interact with the list of postcss plugins that babel-plugin-css-modules sets up in requireCssModule.js? Does it prepend, append, override, etc.?