Vue-loader: Styles scoped by default?

[jaredreich]

Perhaps this is a conceptual question rather than an issue. I find myself writing scoped for nearly every single component I make, except maybe App. Following web component standards logic, shouldn't a component's style be scoped by default? I feel like the side effects of styles being global by default are worse than scoped by default.

Perhaps if this was implemented, a global attribute can be used in components that specifically intend to have their styles applied globally.

<style lang="scss" global></style>

Thoughts?

[v-stein]

LGTM

[znck]

I use module on every <style> element. Using scoped by default would discourage use of CSS modules (which are better than scoped style IMO).

[jaredreich]

I have never used CSS modules. How exactly is this different from scoped styles?

[znck]

https://github.com/css-modules/css-modules

[jaredreich]

Right so "A CSS Module is a CSS file in which all class names and animation names are scoped locally by default."

Again, how exactly is this different from scoped styles? Sounds like this further improves my point. I disagree that using scoped by default "discourages" anything. If one wants to use CSS modules, then by all means they should use CSS modules with the module setting.

[znck]

Descendent selector + recursive components with scoped style could be tricky.

Also, it feels like .foo-xxxx would more performant compared to .foo[_v-xxxx].

It should be your choice to use scoped or module or none.

[znck]

Making scoped default would break lots of components!

[qm3ster]

@znck do you happen to know why div[_v-xxxx] is used instead of div.v-xxxx?
Sure, .div-v-xxxx would have even better performance, but it's a less trivial rewrite.
Attribute seems like an odd choice.

[drwpow]

I have never used CSS modules. How exactly is this different from scoped styles?

@jaredreich Aside from differences in implementation, practically I’ve found scoped isn’t isolated. I ran into an issue where I was using a .container class in both Component A and B, nested inside each other. I found that 2 different elements in different components got the same data-xxxx attribute applied to both, because the .container class more-or-less was “owned” by the parent.

In other words, scoped forces you to use unique class names across multiple components, among your entire nested component tree, which IMO invalidates it as a sensible option. Whether this is a bug or design decision I’m not sure, but for my purposes I could only use module.

[jaredreich]

@znck what's an example of how "making scoped default would break lots of components"?

[qm3ster]

@jaredreich Any normal (not scoped) component that either:
1) Gets styled with styles from outside (applies classes that aren't declared global) (normal)
2) Wishes to style other things in the project (crazy, but possibly happening somewhere)

will change its behavior.

Anyhow, making it by default adds extra indirection and makes picking up .vue harder.
You want to use a scoped style? Great, I hope it keeps being developed. But the default for newcomers should be classically behaving css, just like I don't advocate for setting the default <template lang= to pug
Maybe a per-project setting for both is in order?

[jaredreich]

Thanks for the information all, guess the majority disagrees and has good points, closing!

[qm3ster]

I just realized that we already have this ungodly power, in a way, using loaders option on the webpack loader initialization as following:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          html: 'WHATEVER PUG LOADER IS, maybe impossible because https://github.com/vuejs/vue-loader/blob/8f9524ae2996cb38c49698a645c26b860ed844e0/lib/template-compiler/preprocessor.js',
          css: 'stylus-loader'
        }
      }
    }
  ]
}

Note, that this will shadow the default lang names instead of changing the default, so you would have to define your own "raw-html" lang and such if you wished to use it in some places.
Also as I said above this probably doesn't work with templates since they are pulled through consolidate and not webpack loaders.

[trusktr]

Is there a way to specify project defaults yet? I'd like to avoid writing lang="stylus" in every component.

[trusktr]

@qm3ster If I use your css: 'stylus-loader' loader trick, does it break anything? f.e., would lang="scss" still work (assuming sass-loader is installed and configured)?

[JounQin]

@trusktr see #500

[bitalchemist]

I also like the concept behind "scoped", but your css file will be somewhat bloated. On my last project (without any css frameworks) after removing "scoped", css file lost 25% of it's weight.

[falcon03]

I think that scoped style should be the default, at least for single file components. I was extremely surprised to find that I was having class clashes in between different components. And given Due 3.x is a major version, I think that breaking many components is not so relevant :)

Please let me know if we can reopen this issue or if I should fill another one.

[jaythomas]

@falcon03 I don't think breaking changes will fly with this repo, but I think making scoped by default a configuration-level thing makes sense.

I have a private repo with hundreds of components and never does it make sense for a component's styling to leak into the global space by default. Now I have to police the team to remember to put a scoped tag in every component. What other choice do I have besides writing my own custom linter?

[JsonKody]

The thing is .. you basically never want (or should want) to define global CSS in a component. Maybe in main.vue. So scoped should be implicit while global should be explicit. This is bad design -> doesn't make much sense from 'practical use' point of view.

It's similar thing as explicit break in switch statement .. nonsense. There is like 5% againtst 95% cases where you want that behavior. Look at Go or Kotlin (when expression).