vuejs/vue-syntax-highlight

SCSS no longer being highlighted in Vue SFCs

dgirgenti opened this issue · 13 comments

dgirgenti commented

As of the most recent update to this package, SCSS is no longer being highlighted in any way within <style lang="scss"> tags. It is completely white in all of my .vue files.

image

If I do a <style lang="css"> or just <style>, it is working but only for CSS (not SCSS).

dgirgenti commented

Seems it is likely related to bc43274 ?

dgirgenti commented

For anyone who stumbles upon this, go see #161 (comment)

While I do not agree that we are expected to know the specific package to use for SCSS highlighting (I don't see the aforementioned package listed as a requirement anywhere), Braver's Sass package does work for me.

greyscaled commented

@dgirgenti I may be mistaken, I had read (quite possibly in another user's comment) that the Sass package was the one Vue Syntax Highlight had in mind.

Edit:
This is the comment I found/was referencing: #146 (comment)

However, I'd like to point this comment out from braver which basically implies all Sass package should update how they define their scope. Personally, I have no idea if it's accurate or not, but it might help other Sass packages reason about whether or not they should all update the scope:

See the following:
SublimeText/Sass#15 (comment)
SublimeText/Sass#15 (comment)

dgirgenti commented

Thanks for consolidating all this info @vapurrmaid ! I think updating the docs/readme might be in order, since I imagine a large number of people want proper SCSS highlighting in Vue.

  • ❤️1
greyscaled commented

I agree, although from my reading of the information, contributors should ask other Sass/Scss packages to see if they think updating the scope is a good idea. If other packages do, then one can remain free in their choice as opposed to solely being bound to the braver/Sass package.

I'm glad it helped though - and I hope other's can see the trace more clearly now. It was a funny patch of events:

  • the most downloaded sass package was seemingly abandoned by the creator
  • braver forked it, updated it and then after a year, package control switched to using that fork as the official source
  • the fork contained a change to the language's scope
skyronic commented
skyronic commented

Looked into the problem in a bit more detail. There's no clear way how we can dynamically decide which scope to select and use.

Looks like there's two SCSS based extensions: https://packagecontrol.io/packages/SCSS and @braver's

While @braver's reasoning about the change does make some sense, it's put us in an awkward state at this point.

@braver would you be open to keeping the old scope name for the time being until we can figure out a stable solution?

  • 👍1
braver commented

@skyronic that is a possibility. It's something I contemplated before, maintaining compatibility with the css syntax for features like completions is tricky anyway. Looks like this is another case where it's perhaps not the easiest approach. I'll look into it, it probably just entails copying over the css completions and keybindings. Not a big problem, just more maintenance overhead for me.

braver commented

@skyronic Ok, let's do it. I'm about to release 2.1.0 of Sass that will switch it back to source.scss.

  • ❤️2
skyronic commented

@braver that's great to hear. Thank you. I'll make a new release reverting the last change as well.

  • ❤️1
skyronic commented

New release out. Hopefully this should support the new extension and the older one as well. Thanks again for your quick response, and helping with this situation @braver.

braver commented

No problem, I caused the situation in the first place 😂

  • ❤️1
assembledadam commented

Hey - since this change i've also noticed when I use sublime's comment shortcut (CMD+/) it uses the wrong type of comments within the SCSS block (<!-- html comments --> instead of // css/scss comments). Worked fine before!

  • 🎉1