Superimpose Liquid highlighting on JS, CSS, SASS, SCSS etc.

[ADTC]

Do you think it is possible to superimpose Liquid highlighting on JS, CSS, SASS, SCSS etc.? I saw #2 and #3 but briefly looking at the tmLanguage file and the language JSON I get the feeling that this is possible.

Am I not right that the Liquid highlighting in this extension is superimposed on the basic HTML highlighting already built-in to VSCode? (i.e. the extension doesn't have its own HTML grammar)

Surely the same can be done for *.[js|css|scss|sass].liquid files, right?

[davelowensohn]

I've been following issue #1751 on VSCode itself - it looks like there's no good way to stack syntax highlighting natively, and it's not currently on the development roadmap. Given that there are only a handful of combinations that come up daily (at least in my life as a Shopify developer), would it make sense to just create individual, blended language profiles for the following combos:

• *.html.liquid
• *.js.liquid
• *.[css|scss|sass].liquid
• [everything else].liquid

{% comment %} works across the board, and I can't imagine any situations where a Liquid autocomplete would override an HTML/JS/SCSS autocomplete. (Or at least any that are more of a hassle than the status quo.)

This extension is still a lifesaver, it just feels janky having to manually change the filetype on main.scss.liquid every time & then manually type in {% comment %}, etc. blocks when I know the right macros are there, just out of reach.

[CodeBrotha]

I love this extension for what it currently does, but this issue is the one thing preventing me from switching to VS Code completely. I still use Atom for any Shopify development work, because there is a plugin for Atom that handles this well.

If it syntax highlighting for *.[js|css|scss|sass].liquid files could be sorted out, I could finally complete the switch.

[jcat4]

Something I figured out you can do that kind of helps is add the following to your settings json:
"files.associations": { "*.scss.liquid": "scss" }

Which will apply SCSS syntax highlighting to scss.liquid files, but then you lose the liquid syntax highlighting on 'em. Since the emmet config doesn't have to change, emmet completions still work for me for both liquid and SCSS stuff (I have the snippets plugin). :)

[panoply]

If you're looking for Syntax highlighting for the liquid code within the .scss.liquid or .js.liquid at this point in time there is no easy fix or solution.

The liquid.tmLanguage file imports syntax from VScode. The VS Code team would need to apply changes to their source files. I know developers requested syntax highlighting for PHP when used within <script></script> tags and while a merge was applied and this feature was eventually supported, it took a long time.

From the best of my knowledge (and I might be wrong here) to apply syntax highlighting of liquid code within <style></style>, <script></script> tags or .scss.liquid and .js.liquid files would only be possible if the source files within VScode are adjusted which means making a feature request to the VSCode team and with the project having over 4000+ open issues the chances of this getting fulfilled in a timely manner would be like getting blood from a stone, so don't hold your breath.

Realistically, the engineers over at Shitify Shopify should be ones applying pull requests and making these features available for the liquid language but I mean Shopify fails to minify their production code, so yeah...

[jcat4]

Realistically, the engineers over at Shitify Shopify should be ones applying pull requests and making these features available for the liquid language but I mean Shopify fails to minify their production code, so yeah...

Damn, Shopify BTFO.

Welp, if I end up caring enough or getting enough liquid work to care, I may invest some time in learning how to do some of that work myself. In the meantime, I may look into submitting a request, despite the low chance of it actually getting attention. We'll see. :D

[panoply]

I managed to get a day to compose a VS Code extension to support the shopify variation of liquid at vscode-shopify-liquid for anyone interested. If I find enough time I will try get liquid working in-conjunction with stylesheets and javascript sheets.

[jcat4]

I managed to get a day to compose a VS Code extension to support the shopify variation of liquid at vscode-shopify-liquid for anyone interested. If I find enough time I will try get liquid working in-conjunction with stylesheets and javascript sheets.

What's the difference between the shopify variation and what is provided by this version?

Also, how are you using snippets/autocomplete on your version? I had this plugin for it, but it relies on that original liquid syntax plugin. I figure having both your and the other version installed together would not play out well...

[panoply]

Few months since I stopped by here but the extension I maintain support not only the liquid language as a whole but also liquid in .scss.liquid, .css.liquid, .js.liquid files. Also, Liquid infused within <script> tags within HTML, liquid formatting (beautification) and snippets are all included. Hope it helps.