Removing Sublime syntax highlight for just '@apply'

Question

I'm using Tailwindcss for my scss files which introduces a new command @apply. But the problem is Sublime highlights this (presumably as an error or unrecognized syntax). How do I just turn off that single highlight so it won't appear as a glaring error for all my @apply rules?

Answer 1

Syntax highlighting in Sublime is driven by syntax definitions that allow Sublime to recognize the language and highlight it as appropriate. This is done either in a tmLanguage (older TextMate compatible) XML PLIST file or a sublime-syntax (new form with more capabilities) JSON file.

Essentially the syntax definition boils down to a list of regular expression rules and a description of how and when to apply them in order to recognize the language. The syntax that you're using is for SCSS which doesn't recognize the @apply directive and thus marks it as invalid.

So there's no simple setting or toggle that you can make that will stop this from happening and you have to instead do one of three things:

1. Modify the syntax definition to know that @apply is valid so that it doesn't highlight as invalid code

2. Modify your color scheme to not use obnoxious colors for invalid code in SCSS files.

3. Use an alternate syntax that either knows about @apply or doesn't mark code as invalid with a specific scope

The first of these is not particularly straight forward because it requires knowledge of how the @apply syntax works and how to write and modify syntax definitions in Sublime.

The second option is fairly simple to pull off; basically you would add a color scheme rule that matches the scope source.css invalid.illegal and color it like plain text instead of the colors that your color scheme is using. However it's not possible to target this only to the @apply type lines, so you would lose being told about other invalid code that's actually invalid.

For the third option, there is the Syntax Highlighting for Sass package, which also includes a syntax definition for SCSS which doesn't have a problem with the @apply directive:

This package is much newer than the one you're currently using so you may see some things visually change colors from what you're used to seeing since this syntax may use different scopes than the old package does for the same constructs; the guidelines for what scopes to use have evolved a lot in the last couple of years, for example.

You may also want to peek at the README for the package as well, which outlines things that may require additional setup if you're coming from the older package.