SCSS intellisense stops working for second style block

[Christilut]

• I searched through existing issues.
• I have looked through docs at https://vuejs.github.io/vetur/

Info

• Platform: Linux
• Vetur version: 0.9.7
• VSCode version: 1.16.0

Problem

Second <style lang="scss"> block in a .vue file does not have CSS intellisense.

The intellisense popup in the first block works as expected. The second shows the entire list of CSS properties starting with lots of ::moz-...

Tried vetur reinstall.

Reproducible Case

<template lang="pug">
div
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
@import 'src/styles/variables';

div {
  background: red; // popup works here
}

</style>

<style lang="scss">

div {
  bakground: red; // popup shows but no relevant CSS options. Only the entire list of CSS properties
}

</style>

[HerringtonDarkholme]

Currently we don't support multi blocks for the same languageID.

@octref is it worth adding?

[octref]

It's a use case the style guide recommends against, so I'd say no.
https://vue-style-guide-dev.surge.sh/v2/guide/style-guide.html#Component-style-scoping

[Christilut]

Well is it so much work to add this? Because I use this alot and just because it is against the styleguide doesn't mean a plugin should decide that it's users aren't allowed to do this...

[octref]

It's not much work, but you should put global styles inside the top-level <App>.

just because it is against the styleguide doesn't mean a plugin should decide that it's users aren't allowed to do this...

We are already doing it. In the future we might even mark this case as an error and link to the styleguide.

[Christilut]

Sometimes I use a library in a component that requires me to use global styles since scoped styles don't work on dynamically inserted nodes.
Then I always use a classname on that component that's very specific so it won't conflict with anything. This way all the styles for that specific component, including styles for the library that needed to be changed, are in 1 .vue file.

If I have to make those styles global then I wouldn't put them in App.vue but instead in a .scss file (which is imported in App.vue) but then there are 2 places for that component styles... In the scoped style and .scss file... I don't feel that this makes my code any clearer.

To be honest, I would like to use my own code guidelines here and marking my code as an error would force me to use guidelines that I don't fully agree on. I understand that it is work on your part to add this feature and not doing that is totally fine. But if you are going to mark my personal style preferences as error I would really appreciate an option to turn that off.

[octref]

We can try to support the completions, and it's the linter's job to complain about user not following the style guide. But because this is not recommended per style guide it'll get less prioritization.

[Coalescent]

I'm glad to hear that - thanks. The style guide reference earlier is a 404 now. Maybe it exists elsewhere still but in practice I'd argue two points for addressing this:

1. VueJS supports multiple style blocks and so I think vetur should follow suit, and;
2. I think VueJS supports this because there are valid use-cases. For example, a scoped style block for the component but then a global style block to add/override styles on a child component mounted there for that particular context. I'd rather see those latter styles in place there then in an external styles doc elsewhere in the project.

[octref]

https://vuejs.org/v2/style-guide/#Component-style-scoping-essential

[octref]

It's not against the spec: https://vue-loader.vuejs.org/spec.html#style, so I'll try to fix it.

[rossity]

@octref Any update on this? Right now I'm not able to even have two style blocks because the second block gets overwritten by the first one. (I'm using stylus-supremacy for auto-formatting)

[taikulawo]

Please add this feature

Vue loader allow us to use two style tag

https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

Current, when I type css in second style tag, it always show useless snippet.