Locally Scoped Styles

[dav-is]

Right now Styles are globally scoped. I don’t see a benifit in this and it has only caused conflicts between components. Can we change this to a local scope?

[tirthbodawala]

Hey @dav-is thanks for raising the question, only the Styles in resources are globally scoped and should be used for 3rd party library.
all the css in compnents like
src/components/home/style.scss
Is locally scoped.

[dav-is]

The classnames aren’t scoped. It uses style_${classname} so it may be scoped by the route but the classnames can conflict.

[dav-is]

See “modules” in the css-loader repo. Seems to be set to false in the repo when it should be true

[tirthbodawala]

@dav-is For development mode only there is style_${classname} for production mode that gets converted to module scoped with hash.

const localIdentName = isResource ?
    "[local]":
    (
      development ? "[name]__[local]" : "[name]_[local]_[hash:base64:5]"
    );

[dav-is]

That’s an issue. CSS doesn’t behave consistently.

[tirthbodawala]

Creating hash during development is really a heavy process... That is the reason hash is only included in production mode. Can you please explain a scenario where this can cause issue?

[dav-is]

I created a grid in layout.js. The main div had class name of “grid” and it’s children had the classnames of “header”, “decor”, “content”, “nav”, and “footer”. Inside the nav div there’s a <Header /> component. I gave one of the child elements in there the classname of “nav” again and it merged the styles between the two separate classes. Could we do `style_${className}_${componentName}`

…

On Dec 16, 2017, at 1:11 AM, Tirth Bodawala ***@***.***> wrote: Creating hash during development is really a heavy process... That is the reason hash is only included in production mode. Can you please explain a scenario where this can cause issue? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.