Using placeholders in <style> tags reports errors

[AngusMorton]

Marko VSCode Plugin 1.0.8

Details

Using placeholders in <style> tags reports errors.

Dynamic placeholders in <style> tags are only allowed when not using the Tags API, so maybe this is something we're willing to live with for now.

Expected Behavior

<style> tags support placeholders when not using the new tags API and so should not cause errors. This code block should not cause errors in the tooling because it's valid (at least according to the docs) and works:

import largeCover from "../images/cover-1920.png"
<style>
  #hero-banner {
        background-image: url(${largeCover});
    }
</style>

Actual Behavior

It reports missing semi-colons.

Your Environment

VSCode: 1.76.2

[DylanPiercey]

@AngusMorton the issue here is that we're planning to in Marko 6 change how the <style> tag works so that instead of inlining it in the html it becomes bundled. It replaces the style {} block in the tags api preview.

With interpolations like this the tags api preview currently errors, however the plan is to make it so that these are replaced with a css var(--GENERATED_PROPERTY) which Marko will set for you. This we think strikes the balance of dynamic css properties while still being able to optimize the css in a bundle.

In your code the final output css would be something like:

#hero-banner {
  background-image: url(var(--GENERATED_ID));
}

And using a var inside a url is not valid css (https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url). Instead you could change your code a bit to look like this:

import largeCover from "../images/cover-1920.png"
<style>
  #hero-banner {
        background-image: ${`url(${largeCover})`};
    }
</style>

Which would make the final css something like:

#hero-banner {
  background-image: var(--GENERATED_ID);
}

which would then be valid.

If you'd like to generate a truly dynamic <style> tag you can always use unescaped html as well which will continue to work in Marko 6, eg:

<div>
  $!{`<style>
  #hero-banner {
    background-image: url(${largeCover});
  }
</style>`}
</div>

[AngusMorton]

Thanks, this is really helpful! It's really helpful to hear the context and direction Marko is going.

Love the idea of using autogenerated CSS variables!

[DylanPiercey]

Glad you like it! For more info on the what we're planning for Marko 6 and the tags api preview you might find this interesting: https://hackmd.io/@markojs/SJutuCa7o