Doesn't work with `.css.liquid` files

[haotan19]

Describe the bug A clear and concise description of what the bug is.

Unformatted source

.countdown-timer {
  width: 360px;
  max-width: 100%;
  margin: 0 auto 20px;
}
.countdown-item__num {
  border-radius: 10px;
  background-color: #131313;
  color: #ffffff;
}

Expected output

.countdown-timer {
  width: 360px;
  max-width: 100%;
  margin: 0 auto 20px;
}
.countdown-item__num {
  border-radius: 10px;
  background-color: #131313;
  color: #ffffff;
}

Actual output

.countdown-timer { width: 360px; max-width: 100%; margin: 0 auto 20px; }
.countdown-item__num { border-radius: 10px; background-color: #131313; color:
#ffffff; }

Debugging information

• OS: Windows 11
• Version 0.4.0

[charlespwd]

We should be clearer that we have no intention of supporting this (since this is a LiquidHTML prettier plugin).

Our recommendation is the following:

• Define CSS Custom properties somewhere in your HTML-Liquid files.
• Use plain .css files that refer to those custom CSS properties

Example:

theme.liquid

<style>
  :root {
    --accent-colour: {{ some_setting }};
  }
</style>

styles.css

button.accent {
  color: var(--accent-colour);
}

You can see this pattern used in the Dawn repo.

• theme.liquid
• base.css

Pros of this approach:

• Your CSS files are then true CSS files. This means you can use the official syntax highlighting for CSS, the formatter for CSS, etc. Which are bound to have better support that this plugin can offer.
• You can use build tools independently of Liquid that work with CSS files.
• You could even use LESS or SCSS independently if you are so inclined.

[BrendanBerkley]

I see that the solve here is "don't put CSS in liquid files" so I'll refactor away, but I just wanted to document my problem here.

If I put

// Comment
.mobile-menu {
  display: block;
}

// Longer comment to force a line break
.page-faqs
  .name-long-enough-to-force-a-line-break-from-the-linter {
  display: block;
}

into a custom.scss.liquid file, this plugin transforms it to

// Comment .mobile-menu { display: block; }

// Longer comment to force a line break .page-faqs .name-long-enough-to-force-a-line-break-from-the-linter { display:
block; }

which caused a transformation error and a bunch of styles to go missing.

I'm not around Shopify enough to know why someone did a custom.scss.liquid file in the first place; I'm hoping that I'll move this to a scss file and be able to move on. But if someone has to use a file like that, seems like it'll be very hard to make it work.