Incorrect syntax highlighting & commenting format for *.css.liquid & *.scss.liquid files

[davelowensohn]

Great package, but I've been experiencing the following:

Syntax highlighting for .css.liquid & .scss.liquid files matches HTML, not CSS. Similarly, commenting via cmd-/ within a .css.liquid or .scss.liquid file inserts an rather than a /* CSS-style comment */.

A similar discussion is happening here: https://github.com/execjosh/atom-file-types/issues/5

[jmcmullen]

+1

[rptrk]

+1

[puranjayjain]

@davelowensohn is the .css.liquid, .scss.liquid standard liquid extension? If yes can you give a reference?

[davelowensohn]

@puranjayjain Yes, these are the default naming conventions for stylesheets in Shopify (old and new versions, respectively). Some examples:

• https://github.com/Shopify/skeleton-theme/tree/master/assets
• https://help.shopify.com/themes/development/templates/checkout-scss-liquid

[puranjayjain]

@davelowensohn Great I'll start work on it but it would be great if you can start a pr on that if you can?

[puranjayjain]

@burodepeper assigning this one to you seems to be your domain. :smile:

[burodepeper]

@puranjayjain Uhm, that's not how "this" works. It's not polite to assign me to a task without asking me if I want the "job" in the first place. This is al volunteer work, don't forget that.

But on the issue itself, this is related to https://github.com/atom/language-gfm/pull/154#issuecomment-221064121 in the sense that the current structure of the grammar is not suited for what it is intended to do. language-liquid should inject itself (preferably conditionally) in other grammars. That's rather a much more complex task, because it lies at the core of how this package works.

As I've mentioned before: I'm willing to help out (and this issue looks like an interesting challenge), but as I'm not personally invested in Liquid (I've used it exactly once) it doesn't make sense for me to dedicate my limited time and resources on something that comes close to rewriting the grammar.

[puranjayjain]

@burodepeper sorry my bad I'll possibly try to work this issue by this weeks end then If not I'll ask for your help

[burodepeper]

@puranjayjain No problem. If you start tearing down the foundation, be sure to add some specs first so you don't break things.

[puranjayjain]

@burodepeper good suggestion about the specs though not sure If i'll be able to do the specs too.

[burodepeper]

@puranjayjain Start by reading up on them then ; ). This package is still pretty barebones, and you can learn a lot about how Atom works by helping language-liquid become mature.

[sabbatical]

+1 to this issue. Quite a hassle to have to rename files to ".css/.scss" to work on them and then rename to ".css.liquid/.scss.liquid" to test on Shopify. I am reading Sublime Text has a package for this so for anyone else having this issue that seems to be the alternative? No workaround in Atom I've been able to find.

[puranjayjain]

Yup the fixes need to be written. Currently there is no workaround for this. A PR will be appreciated

[davelowensohn]

For those of you struggling with this currently, you can manually override the syntax highlighting on a per-file basis by clicking in the lower right-hand corner of the editor (where it probably says "HTML (Liquid)" and changing the file type to "SCSS":

https://monosnap.com/file/9OgJh8uu83hv2PusKVrglhrO5EhF01

Only lasts until you close the tab, but that's a very minor inconvenience.

[BB-000]

Anyone got a patch for this? Some override in user settings or something? Lots of projects / files so manually selecting scss from menu each time is annoying