scss syntax highlight broken after update to Sublime 3

[cogliaWho]

Nothing more than the title.
After the new Sublime Update (v. 3.1.1, Build 3176) the sass code in the components is not highlighted correctly giving the illusion that the code is broken.

[skyronic]

Hello!

Thanks for reporting this. One thing which would be super helpeful is if you could give us a code for a vue file which reproduces this issue, since I can't reproduce it on my end. I understand the code you sent is private, but if you can make a vue file which reproduces this issue that'll help us a lot to solve it.

The problem is actually with the JS side, not the SCSS side. The syntax thinks that the JavaScript part hasn't ended, and highlights SCSS as it's JS. Often putting a semicolon at the end of your export statement fixes it. Another thing that works for this situation is switching to the Babel extension. Install babel syntax, and disable the builtin JavaScript extension.

That said, this is a valid bug and I'm keeping it open until we find a fix for it. @Thom1729 any idea what could be causing this? The embed should have hopefully prevented scope from leaking out of </script>.

[Thom1729]

I'd need to see the beginning of the <script> tag. A working example would be extremely helpful here.

Are you using a third-party JavaScript syntax?

[cogliaWho]

Hi guys, good to see that you are still on board, this package is extremely helpful. Attached you can find a component that I'm using on my project. All my .vue file have the same issue..so I think every component count as an example. This component compile and works fine in the application. If you need a working example more structured, like something that really works on his own, I can't help right now. I'm in a rush for a a deliver..as soon as I get some free time I can help you out. Same thing for the babel switch, I'll try asap. Cheers Lorenzo Il giorno gio 17 mag 2018 alle ore 15:14 Thomas Smith < notifications@github.com> ha scritto:

…

I'd need to see the beginning of the <script> tag. A working example would be extremely helpful here. Are you using a third-party JavaScript syntax? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#145 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGRpZLQ3BN93dCgZufagZeEC3Lh8mfayks5tzXewgaJpZM4UCpI0> .

[alexmoreno]

(maybe unrelated but) My vue-syntax-highlight just broke after I updated sublime to 3.1. I reinstalled the extension and it works for now.

[skyronic]

@cogliaWho Please copy paste the vue file here or in a gist whenever you can :) I don't think github processes attachments to email replies.

@alexmoreno thanks for reporting, keep us updated if you encounter problems.

[cogliaWho]

Stupid github :D here we go: --- START ---- <template> <div class="tabs-container"> <div class="tab" v-for="(tab, index) in tabsOption.tabs" :key="index" @click.stop="showTab(tab.componentId, index)" v-bind:class="[tabsOption.tabs.length > 0 ? 'tabs-' + tabsOption.tabs.length : '']"> <p>{{tab.title}}</p> </div> </div> </template> <script> export default { props: { tabsOption: Object, cbShowTab: Function }, data () { return {} }, methods: { showTab (componentId, index) { window.$('.tab').removeClass('selected') window.$('.tab:nth-child(' + (index + 1) + ')').addClass('selected') this.cbShowTab(componentId) } }, mounted () { // Select the tabs passed in the options this.showTab(this.tabsOption.tabs[this.tabsOption.selectedIndex].componentId, this.tabsOption.selectedIndex) } } </script> <style lang="scss"> .tabs-container{ height: 50px; width: 100%; position: relative; display: flex; justify-content: center; @media (max-width: 767px) { height: 40px; } .tab{ position: relative; height: 100%; cursor: pointer; text-align: center; &.selected{ color: #007CC4; p{ box-shadow: inset 0px -20px 50px -25px #007CC4; } } &:hover{ color: #007CC4; } @media (max-width: 767px) { &.tabs-2{ width: 50%; } &.tabs-3{ width: 33.3333333%; } &.tabs-4{ width: 25%; } } p{ font-size: 1rem; line-height: 50px; width: 100%; padding: 0px 20px; font-weight: bold; @media (max-width: 767px) { white-space: nowrap; // overflow: hidden; text-overflow: ellipsis; padding: 0px 5px; font-size: 1rem; line-height: 40px; } } } } </style>

…

--- END ---- Hope it helps, have a good day! L Il giorno gio 17 mag 2018 alle ore 22:40 Anirudh Sanjeev < notifications@github.com> ha scritto:

@cogliaWho <https://github.com/cogliaWho> Please copy paste the vue file here or in a gist whenever you can :) I don't think github processes attachments to email replies. @alexmoreno <https://github.com/alexmoreno> thanks for reporting, keep us updated if you encounter problems. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#145 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGRpZFUq_r7amqbgzXKL5Zixj8FEalU9ks5tzeA8gaJpZM4UCpI0> .

[skyronic]

Thank you @cogliaWho

This seems to be working fine for me:

Things to try:

1. It might be the case that your internal JavaScript package is not updated or isn't set up properly. You can consider backing up your sublime text folder, deleting it, and running ST3 to create a fresh setup, and re-install. However this can be time consuming if you've extensively customized.
2. Check the version of vue-syntax-highlight installed, if it's 3.3.1

[cogliaWho]

Thanks! I've checked the version of vue-syntax-highlight and it' the 3.3.1, so I guess I will try to do a fresh installation when I have time. Thanks for the support, really appreciate. Have a good day L Il giorno ven 18 mag 2018 alle ore 14:57 Anirudh Sanjeev < notifications@github.com> ha scritto:

…

Thank you @cogliaWho <https://github.com/cogliaWho> This seems to be working fine for me: [image: image] <https://user-images.githubusercontent.com/80173/40235676-fc58f386-5a78-11e8-8c05-e3e92548b589.png> Things to try: 1. It might be the case that your internal JavaScript package is not updated or isn't set up properly. You can consider backing up your sublime text folder, deleting it, and running ST3 to create a fresh setup, and re-install. However this can be time consuming if you've extensively customized. 2. Check the version of vue-syntax-highlight installed, if it's 3.3.1 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#145 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGRpZIDqgd4u56HJzKU9hyD2O3UnUz0Uks5tzsUzgaJpZM4UCpI0> .

[skyronic]

Gonna close this since we can't repro this on multiple tries, @cogliaWho. Please do re-open if issue persists.

[programedia]

I just had the same problem and found some errors in the Sublime Text console coming from a package called Vuejs Complete Package. Just removed that and the highlighting started working again.

[aleph1]

I am having this same issue. I did a clean install of sublime text v3.2.2 for Mac OS including deleting the application and its associated support files in "~/Library/Application Support/Sublime Text 3/". As you can see in the screenshots, the only packages I have installed are "Package Control" and "Vue Syntax Highlight". The strange thing is that highlights works correctly if I set the lang attribute to anything but "scss" or "sass", even with strange values like "notcss".