Problem with locally scoped CSS module classes

[ghost]

Currently there can be only one locally scoped CSS class in a module because the webpack css-loader is set up to only create names based on the path:

test: /\.scss$/,
loader: 'style!css?localIdentName=[path]!postcss-loader!sass',

If webpack css-loader was set up in the following way each locally scoped class is given it's own name (plus globally unique hash etc.).

test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss-loader!sass',

As per the css-loader documentation

Example: css-loader?localIdentName=[path][name]---[local]---[hash:base64:5] for easier debugging.

[anorudes]

Hello, pathogen. It's not have problem because any components located in different folders and have one style scss file. If the problem is serious, can you show more example of this issue? :)

[ghost]

Sorry, yes, I didn't mean to call it a 'problem' so much as just a suggestion (but it was very late at night :sleeping:)

What I meant was that with a small change to the webpack css-loader config we can have several local CSS classes in a module, and just a lot more flexibility for declaring the CSS in the associated scss file.

Currently each scss file can only have a single

:local(.class) { ... } 

...which will output:

.src-components-Component- { ... }

If we try to have more than a single :local css selector:

:local(.class) { ... }
:local(.anotherClass) { ... }

...this is the output:

.src-components-Component- { ... } .src-components-Component- { ... }

Whereas by including at least the [local] to the webpack css-loader config (eg. loader: 'style!css?localIdentName=[path][local]) we get this output for instance:

.src-components-Component-class .src-components-Component-anotherClass

I have already done this on my local version of the boilerplate, but I just thought it might be helpful for others to have the possibility to declare their CSS their way and for it to 'just work' :smile:

[anorudes]

Thanks for big comment! But i think next code better for any components:

:local(.styles) {
  position: relative;
  .class {
   background: red;
  }
  .anotherClass {
     background: blue;    
  }
}

import { styles } from './styles.scss';

render() {
  return (
    <div style={style}> // pos - relative
      <div className="class"></div> // - background red
      <div className="anotherClass"></div> // background blue
    </div>
  )
}

[anorudes]

Pathogen you are right! I'm will fix this because it can be useful. But i wll add only "local" (local variables unique)