CSS Modules on by default and with a custom localIdentName

[FrancescoCioria]

stories

As a dev I'd like webpack to automagically prefix/suffix any CSS class with an identifier so to avoid style side effects once and for all

requirements

let's try CSS Modules!
why? because:

• It's integrated in css-loader by default
• does exactly this: it adds unique identifier (configurable) tu a CSS/SASS class

ex: .my-component => MyComponent-hash-my-component

specs

... (see misc)

misc

it would be nice to simply replace:

{
  loader: 'css-loader'
}

with:

{
  loader: 'css-loader',
  options: {
    modules: true
    localIdentName: '[name]__[local]' // or something like that
  }
}

and get it in every project with any additional effort needed, but it doesn't work properly with sass-loader. (maybe because of this: webpack-contrib/sass-loader#448 but I haven't investigated further)

so, we gotta find another way...if possible, as first iteration, let's find a way that requires zero/little backporting