at-rule or selector expected for correct CSS

[ZPetrovich]

I have following code in theme-app-extension/blocks/my-embed.liquid

  <style>
    button[is="my-button"] {
      background-image: url("{{ 'abc.svg' | asset_url }}") no-repeat center;
      transform: scale({{ block.settings.size }});
    }
  </style>

Theme-check signals about error in VS Code but resulting code is processed correctly

[{
    "resource": ".../my-embed.liquid",
    "owner": "_generated_diagnostic_collection_name_#7",
    "code": "css-ruleorselectorexpected",
    "severity": 8,
    "message": "at-rule or selector expected",
    "source": "css",
    "startLineNumber": 21,
    "startColumn": 5,
    "endLineNumber": 21,
    "endColumn": 6
}]

[charlespwd]

Hi, this is not a Theme-Check error, the theme-check diagnostic source is theme-check. This seems to come from a css reporter because the CSS plugin you use does not understand liquid.

In general, you're going to have a better time dealing with CSS and liquid separately. Dawn's approach is to set those kind of settings as CSS variables and then reference the variables themselves in the CSS.

Something like:

// embed.liquid
// Add some kind of disable lint rule for your tool for liquid files
<style>
:root {
  --setting-my-button-bg-image-url: "{{ 'abc.svg' | asset_url }}";
  --setting-my-button-size: {{ block.settings.size }};
}
</style>

// styles.css
button[is='my-button'] {
  background-image: url(var(--setting-my-button-bg-image-url)) no-repeat center;
  transform: scale(var(--setting-my-button-size));
}