Add support for postcss-nested plugin

[mvsmal]

Currently if .scss file contains nested classes, postcss doesn't generate them, so they could not be resolved. To fix that we need one more plugin in requireCssModule.js file.

[gajus]

@mvsmal Please add a test demonstrating the use case.

[gajus]

So this is a specific plugin that you'd like to add to the processing chain, not a generic use case.

I am not going to merge this (as this would require merging a plugin for every other use case). Instead, need to look into how to make the plugin chain configurable.

Furthermore, the reason this particular setup will work for most of the users is because it is not uncommon to run SASS before postcss. By the time CSS reaches postcss, it is already flat.

[mvsmal]

It is not a specific plugin. Nested classes are one of the key features of SASS, and LESS too. Only with this plugin you can say that you support SASS (with postcss, of course). Otherwise you cannot use .scss files directly.

As for flat CSS, could you provide an example of config?

[gajus]

It is not a specific plugin. Nested classes are one of the key features of SASS, and LESS too. Only with this plugin you can say that you support SASS (with postcss, of course).

"postcss" is not designed as a replacement for SASS. You can use (and should) use these together.

This is my webpack setup in the project I am working on ATM,

{
  include: path.resolve(__dirname, '../app'),
  loader: 'babel-loader',
  options: {
    babelrc: false,
    extends: path.resolve(__dirname, '../app/webpack.production.babelrc'),
    plugins: [
      [
        'react-css-modules',
        {
          context: common.context,
          filetypes: {
            '.scss': 'postcss-scss'
          },
          generateScopedName: '[name]___[local]___[hash:base64:5]',
          webpackHotModuleReloading: false
        }
      ]
    ]
  },
  test: /\.js$/
},
{
  test: /\.scss$/,
  use: extractStyles.extract({
    use: [
      {
        loader: 'css-loader',
        options: {
          camelCase: true,
          importLoaders: 1,
          localIdentName: '[name]___[local]___[hash:base64:5]',
          minimize: true,
          modules: true
        }
      },
      'resolve-url-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => {
            return [
              require('postcss-svg')({
                dirs: [
                  path.resolve(__dirname, '../app/styles/icons')
                ]
              }),
              require('autoprefixer')
            ];
          }
        }
      },
      'sass-loader'
    ]
  })
},

Anything thats not postcss-modules-* plugin is out of scope for this project, but it can be supported using a configuration.

[mvsmal]

With your config, if you have nested classes in .scss files, styleName won't be able to resolve the subclasses. It just doesn't make sense to use SASS with this plugin then. It would be limited SASS.

[gajus]

With your config, if you have nested classes in .scss files, styleName won't be able to resolve the subclasses.

On a second thought, you are right. It shouldn't work in this case.

But it does work.. I will need to look into what I am doing different.

[kkwiatkowski]

Any update on this? This is really something critical since it's preventing SASS users from using this plugin and this PR looks like solution for given problem.

EDIT:
I see that similar PR is already merged that allows us to add additional plugins (it's #100), so question is no longer valid.

[seeruk]

This does indeed work, but isn't the only reason that this works because coincidentally the postcss-nested syntax for nesting is the same as SCSS's? What if SCSS add some new bit of syntax in the future or something, does it mean we're just limited to whatever PostCSS can "emulate" for us?

Is there no way we could have actual SCSS work with this plugin? It seems like that would require having the SCSS be compiled beforehand though, is that right?

Given that editor support for PostCSS seems to be improving, I'm beginning to wonder if just ditching SCSS for a set of PostCSS plugins that achieve similar functionality would be a good idea. But I worry about the potential implications of doing that (i.e. is editor support really any good? will I be missing out on being able to use existing SCSS libraries? etc.).

Edit: #90 also touches on another issue with SCSS, and it does seem that it is because the SCSS would need to be compiled to CSS first.