Css-loader: [Discussion] Deprecate :local

[geelen]

In my mind, it makes more sense to consider local-scope (and CSS Modules by extension) as something that's always on or always off.

I'm seeing a lot of folks hitting the problem where they enable ?modules and then want to include non-local CSS (e.g. https://github.com/webpack/css-loader/issues/253) but never in the same file. I think @chrislloyd's suggestion in https://github.com/webpack/css-loader/pull/287 is a better approach, so you can configure two instances of css-loader, one local and one global, maybe having ".module.css" be local and ".css" be global (like https://github.com/gatsbyjs/gatsby/issues/193).

In global CSS files, then, I don't see any reason to keep :local, except that that was how CSS Modules got started in the first place. But I'm interested in having a discussion about this because I want to know if anyone's still using :local and feels it should be kept.

[joshwnj]

I agree, we can reduce some confusion by having 1 less keyword.

I can see a (rare) use case for wanting to opt-out within a css module by using :global, but I haven't come across any place where it makes sense to opt-in to :local within a css file intended to be global.

[gaearon]

We also have this problem in https://github.com/facebookincubator/create-react-app: we intentionally don’t support CSS modules but people work around this by using :local. Which means changes to our CSS pipeline could break them in the future.

[markdalgleish]

I think we should deprecate it. It's totally vestigial, not something that we should encourage people to use going forward.

[geelen]

Cool. I'll make a PR.

[Jessidhia]

I actually have an instance in my css-modules-using code where I had to use :global .global-selector :local .local-selector; the case itself is a bit strange, and really should be avoided in "proper" code, but removing :local might make incremental adoption of modules in existing codebases harder.

I am definitely not using :local in any files that are not local-by-default, though; only to override when nested inside a :global.

[tiagocpontesp]

In global CSS files, then, I don't see any reason to keep :local

It's late. Perhaps I'm not reading this correctly.

I've had to turn off the modules option to achieve this pattern for my components:

:local(.component)   // ---- the only mangled/imported classname
   & .nested_child   // ---- nested and unchanged 
      ..rules

I noticed some suggestions of sprinkling :globals on nested selectors within :locals-by-default, but it didn't seem to work, and seems less legible (several nested, vs one parent).
If this PR goes against this, here's my -1.

[alexander-akait]

Thanks everyone, it is out of scope css-loader, please recreate issue in css modules repo, it is their rfc.