Sublime Forum

Stylus Syntax Highlighting Not Working

#1

Hey folks, I’m running Sublime Text 4 and mostly love it except that I can’t seem to get syntax highlighting working for .styl files.

Context:

  • OSX 12.6
  • Sublime Text Build 4126
  • Latest Stylus package installed

Here’s what I’m seeing:

image
image.png1612×1666 271 KB

You can see how it only seems to work for the CSS Selectors and the @media queries. But not for properties or values or such.

Any idea how I could go about fixing this? Really want to keep working with Sublime, but the lack of Stylus syntax highlighting is a big pain point.

0 Likes
#2

Are you sure Stylus syntax is used? Check the bottom-right corner of the ST window.

0 Likes
#3

@jfcherng, good question, but the answer is yes:

image
image.png2294×1746 175 KB

0 Likes
#4

I can’t reproduce your issue.
image

I would suggest you try to delete the cache directory. sublime.cache_path() should tells where the directory is.

0 Likes
#5

@jfcherng This is what get as the location of my cache dir:

image
image.png1298×190 7.36 KB

It seems odd to me that it’s in the Sublime Text 3 dir given that I’m running Sublime build 4143, which I understand to be Sublime Text 4?

But there is no Sublime Text 4 dir in the Caches dir so …

Quick question: what does clearing this cache do?

0 Likes
#6

You won’t want to see all your settings gone when you upgrade from 3 to 4. So 4 uses the folder of 3 if there is no Sublime Text, which is for 4 (and later).

Well. To guarantee ST will regenerate the cache.

0 Likes
#7

@jfcherng Roger. Deleted the Cache dir and the issue persists. It did however fix the missing Context Backtrace info from before.

image
image.png1370×674 86.7 KB

0 Likes
#8

But the highlighting issue was unchanged:

image
image.png1274×1654 256 KB

0 Likes
#9

image
image.png1282×618 63.1 KB

0 Likes
#10

not sure why you have a leading source.css, (with a comma after that)… I have never seen something like this before so I don’t know what can possibly cause this.
image

0 Likes
#11

It seems to be an issue with the @media queries. Any selectors/blocks under them lose their highlighting …

0 Likes
#12

The only thing I can guess is maybe you are using a custom CSS or Stylus syntax.

0 Likes
#13

@jfcherng Thanks for your continued help, but not to my knowledge, I just used Package Control to install the only Stylus package that came up in the search:

image
image.png1202×314 34.5 KB

0 Likes
#15

Oh… I should notice this earlier.
image
You are using a Stylus syntax shipped in your theme rather than the one you just installed.

0 Likes
#16

@jfcherng Ah, I see. In Safe-Mode the issue does not exist:

image
image.png786×554 44.4 KB

Looking into the issue with the Seti theme…

0 Likes
#17

@jfcherng Okay! Uninstalled Seti theme, re-installed the Stylus package, cleared the Cache file and it’s all good now:

image
image.png1110×560 67.6 KB

Thanks a tonne for helping me chase this down, makes a huge difference in my experience with ST. Happy to pay for a license!

0 Likes
#18

One last question. I notice you have a block in your “Scope Inspector Popover” called Appearance.

It seems like you can also adjust the syntax highlighting directly from there?

How do I get that to show up for me.

0 Likes
#19

https://packagecontrol.io/packages/ScopeHunter

No you can’t. But it’s convenient for color scheme dev.

0 Likes
#20

@jfcherng Roger. I’ll give it a look.

Thanks again for all your help, much appreciated!

0 Likes