PostCSS Syntax Highlighting

Hello. Thank you for your hard work.

I'm wondering if there is any interest in syntax highlighting postcss like an scss block?

I'm currently using a vanilla style tag that is processed correctly by postcss, but nesting and other syntax highlighting is nicer when using lang="scss".

I looked through the code base to see if I could figure out a hack and came upon this:

language-tools/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml

Line 65 in a8fd808

# PostCSS | 'postcss' | 'source.css.postcss'

Not sure if I'm looking in the right place?

After reading the contributing guide it seems like there is some interesting stuff going with how things get processed. I would be open to making a PR with a little guidance.

Thank you.

[jasonlyu123]

We did define syntax-highlight for postcss but you would have to have another extension for it to work. In the syntax-highlight of VSCode, you can define a region in your scope to follow another scope. svelte-vscode chose to use source.css.postcss scope name for <style lang="postcss". But doesn't come with a built-in highlight for this scope. It relies on another extension to provide the syntax highlight for the scope. So you would have to find the right extension to provide a highlight to postcss scope.

The main problem is that there aren't many extensions that use this scope name to provide syntax highlight for postcss. and they all didn't get updates for a while. For example, https://marketplace.visualstudio.com/items?itemName=mhmadhamster.postcss-language.

The most recently maintained extension that provides syntax-highlight for postcss one doesn't use this scope. Instead, it overrides CSS with postcss syntax highlight. and let postcss files use CSS scope. And it also disables built-in CSS language features.

Another one providing syntax-highlight for this scope is vetur. It's a language extension for vue. It would use more disk storage. If you don't mind the disk usage or you use vue, that's also an option.

Right now I don't know how can we solve this. I think we won't want to maintain our own version. That would be a maintenance burden, and it requires someone with more knowledge of postcss. Besides the current solution, I guess the easiest solution is to set up a way to copy some syntax highlight from other repo and bundle it with svelte-vscode.

This is good information. Thank you.

I achieved the same results with Vetur and postcss-sugarss-language

postcss before:

postcss with syntax highlighting plugin:

scss:

It wasn't initially clear that a syntax highlighting plugin would be necessary. Since postcss uses the .css extension, you generally get css features for free. Although in hindsight it makes sense.

Not suggesting we create more of a maintenance burden, but would it be prudent to add a list item under features with a link to these plugins?

I'm happy to PR 🙂

[jasonlyu123]

I want to clarify that I don't know if we should recommend these two as the official solution. Vetur is too overkill for just postcss syntax highlight. And postcss-sugarss-language haven't been updated for a long time which I don't if that's a good recommendation. But until we have another conclusion. These are probably two valid options for now.

[dummdidumm]

For reference, this is the grammar for postcss in vetur . Not sure if we should copy it over (with giving credit, of course).

I haven't had time to dig into how language services work yet, but for what it's worth I found the official Microsoft language tools. A naïve approach to get started could be to convert the SCSS code to handle PostCSS. Do you think that would work?

cssLanguageService.ts

scssParser.ts

[dummdidumm]

These are for dealing with autocompletion, error diagnostics etc and have nothing to do with syntax highlighting. The syntax highlighting files are probably somewhere in the VS Code repository.

[Monkatraz]

The way to handle this issue in the most generic, workaround-enabling way possible would be to provide an attribute that sets the scope of the language to be used.

Something like:

<style lang="postcss" tm-scope="source.sugarss">

This is hacky, but it would work. It is maybe possible to dynamically generate textmate grammars that extend/inject into the original - I have no idea if that sorta system could be dynamically loaded.

@Monkatraz Syntax highlighting works if you have either plugin installed and use lang="postcss". Seems like my original issue was resolved by @jasonlyu123 's first comment.

lang="scss" is nicer aesthetically than lang="postcss" imo. I'm trying to figure out how to alias lang="postcss" to use lang="scss" highlighting. This could be done in the settings.json the way the "files.associations" property works?

Although leaving the lang attribute off altogether seems to work just fine. (Assuming you have your PostCSS config setup correctly.) Hard to know what the right thing to do here is. Just figuring out the best tradeoff for my personal taste at this point.

I can understand why the project maintainers don't want to take on this maintenance burden. Seems out of scope. I'm going to be thinking about possible solutions taking into account that Svelte uses CSS Modules syntax as well.

[Monkatraz]

Unfortunately, you won't be able to manipulate VSCode's settings in a way that'll actually do something useful. The TextMate grammar, because we have to, directly references source.css.postcss, and nothing else. We can't force it to do anything else without hacks. It's a longstanding issue with VSCode and stems from its inherited and archaic grammar format.

Yeah, it seems like there are deeper constraints here that I'm not privy to. Thank you for the responses.

[pikeas]

<style lang="postcss"> sets the VS Code language (and scope?) to svelte, which is why there's no highlighting in that mode.

Can this extension pass through a language config setting? If not, perhaps it's worth cheating for now and setting the SCSS language when style tags are configured for PostCSS?

[jasonlyu123]

Because of the customizable nature of postcss. Treat postcss as SCSS would not be right in some cases. If your build step allows and the style is valid SCSS. I would suggest just use lang="scss". That's also the case for CSS.

About config, the syntax highlight of vscode can't be dynamic. So we can't pass through a config. Maybe fallback is possible, but I don't know if that would cause other problems.

[takoyaro]

I'm just gonna leave this here, it might work for you or not but I personally just added another style to the tag. I.e.:

<style style lang="postcss">
  .yourStylesHere{
    @apply coolstuff
  }
</style>

I can't explain why it works but it does and I didn't have to install any package or edit any config files.