Request feature: Add option to compile only top-level selectors in css-modules mode

[mizchi]

I use [postcss-nesting:https://github.com/jonathantneal/postcss-nesting] plugni ( implementation of CSS Nesting Module Level 3 ) and css-loader v0.26.1.

MyCode

.Hello {
  & .title {
    color: #00f;
  }
}

Compiled with css-loader?modules

._1yKwJThgxBsO6G-dlD__k6 {
}
._1yKwJThgxBsO6G-dlD__k6 ._2jGR-DRZ3K4plA7FSjgwvJ {
  color: #00f
}

All selector are flattened so I have to write like this.

import React from 'react'
import styles from './styles.css'
export default function Hello () {
  return <div className={styles.Hello}>
    <div className={styles.title}>Hello</div>
  </div>
}

But I want to write like next one.

  return <div className={styles.Hello}>
    <div className="title">Hello</div>
  </div>

So my expected behaviour is

._1yKwJThgxBsO6G-dlD__k6 {
}
._1yKwJThgxBsO6G-dlD__k6 .title {
  color: #00f
}

or styles.Hello.title (it will be hacky implementation of getter by Reflect)

To keep css moduleness, I think it's enough to convert top-level selectors and easy for css animation.

How do you think? (or already has other way of this?)

[michael-ciniawsky]

@mizchi This isn't possible with css-loader in it's current state and I think this would need some work require @css-modules instead of css-loader and the plugins there 😛 . Also wouldn't work in that way atm

<div className={styles.Hello}>
  <div className="title">Hello</div>
</div>

needs to be, because you still need the [hash] from styles.Hello as prefix for "title"

<div className={styles.Hello}>
  <div className={styles.Hello + " title"}>Hello</div>
</div>