Use frontmatter variable as CSS placeholder value

[south scaffold]

Hey everyone

I'm looking for a way to use any frontmatter var inside component's <style> tag . Is it possible at all?)

For example:

---

const cssContent = div { color: red }

<style>
{cssContent}
</style>

Answer: use set:html directive https://docs.astro.build/en/reference/directives-reference/#sethtml

[wanton hill]

https://docs.astro.build/en/reference/directives-reference/#definevars

[south scaffold]

Right now with this approach I'm getting error like

CssSyntaxError: [postcss] /Users/skyeng/Developer/rolg.in-folio/src/components/FluidDesignSystem.astro?astro&type=style&lang.css:1:2: Unknown word
    at Input.error (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/input.js:148:16)
    at Parser.unknownWord (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/parser.js:540:22)
    at Parser.other (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/parser.js:164:12)
    at Parser.parse (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/parser.js:72:16)
    at parse (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/skyeng/Developer/rolg.in-folio/node_modules/postcss/lib/processor.js:28:14)
    at compileCSS (file:///Users/skyeng/Developer/rolg.in-folio/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:38483:63)
    at async preprocessCSS (file:///Users/skyeng/Developer/rolg.in-folio/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:38584:12)
    at async file:///Users/skyeng/Developer/rolg.in-folio/node_modules/astro/dist/core/compile/style.js:15:22

[south scaffold]

https://docs.astro.build/en/reference/directives-reference/#definevars
Does it work with is:global directive?

[final moth]

Yeah it should work with it

If you want to pass css rules you could use the set:html directive

[frail surge]

Reference: Template Directives Reference - Common Directives #sethtml

set:html={string} injects an HTML string into an element, similar to setting el.innerHTML.
The value is not automatically escaped by Astro! Be sure that you trust the value, or that you have escaped it manually before passing it to the template. Forgetting to do this will open you up to Cross Site Scripting (XSS) attacks.
Copied!
You can also use set:html on a <Fragment> to avoid adding an unnecessary wrapper element. This can be especially useful when fetching HTML from a CMS.
Copied!
set:html={Promise<string>} injects an HTML string into an element that is wrapped in a Promise.
This can be used to inject HTML stored externally, such as in a database.
Copied!
set:html={Promise<Response>} injects a Response into an element.
This is most helpful when using fetch(). For example, fetching old posts from a previous static-site generator.
Copied!
set:html can be used on any tag and does not have to include HTML. For example, use with JSON.stringify() on a <script> tag to add a JSON-LD schema to your page.
Copied!

read more