added localByDefault option to allow you to override default behavior…

[hulkish]

What kind of change does this PR introduce?
Feature

Did you add tests for your changes?
Yes.

If relevant, did you update the README?
Yes.

Summary
The default behavior when using modules: true uses :local mode by default. This option allows you to override that behavior. This is useful for porting projects which weren't previously using CSS Modules to start using it.

Does this PR introduce a breaking change?
No.

Other information
N/A

[jsf-clabot]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #465 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #465      +/-   ##
==========================================
+ Coverage    98.3%   98.31%   +0.01%     
==========================================
  Files          10       10              
  Lines         354      357       +3     
  Branches       79       81       +2     
==========================================
+ Hits          348      351       +3     
  Misses          6        6

Impacted Files	Coverage Δ
lib/loader.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c8db489...6d30a7e. Read the comment docs.

[michael-ciniawsky]

@hulkish https://github.com/webpack-contrib/css-loader#css-modules ? This should be the current behaviour already, can you elaborate please ? 😛

[hulkish]

@michael-ciniawsky It is default behavior when you are not using css modules (modules: true) option. However, when you use modules: true - this behavior defaults to using :local instead of `:global:.

This feature will allow you to bypass that logic.

[TrySound]

@hulkish And you did an option to override modules option?

[hulkish]

@TrySound No, this option will solely override the local by default when modules: true behavior. You can see this change here: https://github.com/webpack-contrib/css-loader/pull/465/files#diff-7c7d4918b118d27d18538f53b8155e88

I also added tests which ensures that there is no impact for this option unless modules is true.

[michael-ciniawsky]

@hulkish Can you please show code before/after, because I thought the same as @TrySound tbh 😛

[hulkish]

@michael-ciniawsky https://github.com/webpack-contrib/css-loader/pull/465/files#diff-7c7d4918b118d27d18538f53b8155e88

[TrySound]

@hulkish But this is what modules option does, isn't it? I enables local by default. With modules false it's not default but available.

[hulkish]

@TrySound Yes, you are correct - I suppose the confusion is originating from the name of the option itself localByDefault - per my use case, I am actually setting it to false to get the outcome I am after.

Perhaps renaming it to globalByDefault would make more sense? I went with the current approach because it describes current behavior, and allowing you to toggle that original behavior.

[michael-ciniawsky]

@TrySound Yep, that should be the case 😉

[michael-ciniawsky]

@hulkish But that's { modules: false } then 😛 . Use :local(.className) { ... } to make portions local

[michael-ciniawsky]

@hulkish If I missunderstand something here, please give an example how it will look like before/after

[TrySound]

:global is default without options :)

[hulkish]

@michael-ciniawsky wait...but solely setting localIdentName to true doesn't really enable all the css modules features, though?

[TrySound]

localIdentName customizes local output

[hulkish]

I want css modules to only localize class names which I've selectively designated via :local .myclass {}

[TrySound]

Then it should work without options.

[michael-ciniawsky]

@hulkish That should work in global mode

[hulkish]

@i guess I'm confused by the notion... So you're saying that I can use css modules without setting modules: true, and only defining a localIdentName?

Here's the scenario I'm in..:

• Porting an existing app which relies heavily on globals. (bootstrap, etc etc)
• Due to the sheer amount of work it's going to take to port all styles to use css modules is considerably large.
• Would like to progressively port the application to using css modules without breaking everything that hasn't yet been ported to use css modules.

@michael-ciniawsky @TrySound Is this possible currently? I guess I incorrectly assumed that localIdentName is only applicable if you're using modules: true?

[michael-ciniawsky]

@hulkish Vendors (e.g Bootstrap) will need to stay global and it is better to reference them as static assets via <link href=""> (CDN) (faster build) in e.g index.html. Your current App will need bigger refactors anyways, when it should use a component based architecture 😛

app/components/component1/*.{css, js}

index.css

.btn {
   background-color: red;
}

index.js

import styles from './style.css'

function render () {
  // styles.btn === "BHML95n" 
  return `<div class="container"><button class=${styles.btn}></button></div>`
}

app/components/component2/*.{css, js}

index.css

.btn {
   background-color: green;
}

index.js

import styles from './index.css'

function render () {
  // styles.btn === "KhJZrL85n" 
  return `<div class="container"><button class=${styles.btn}></button></div>`
}

[hulkish]

@michael-ciniawsky I agree they would be better moved to a CDN - but the reality is that doing the complete refactor in one single motion introduces more risk than we can afford just by the sheer amount of work and regression involved.

Also, this line here: https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L138 leads me to to believe that there's more to it than just simply defining a localIdentName.. does :local work when modules is not true?

[michael-ciniawsky]

Yep relevant lines are below, but I can't speak for your particular code base and which caveats this may have or not 😛

https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L138 (Query)
https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L154 (Mode)
https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L171 (Scope [LocalIdent])

I close this PR since it duplicates the modules option thx 🙃