Are Lua filters the canonical way to provide reusable style elements in Typst?

[jimjam-slam]

Description

When outputting to HTML, I can put a class name on a fenced Pandoc div or span and then attach a stylesheet to consistently style all elements with that classname:

---
title: Typst styling
format: html
---

Eiusmod fugiat cupidatat cillum esse labore ea nostrud ullamco deserunt.

:::{.mystyle}
Aliqua sint occaecat adipisicing enim exercitation irure commodo dolor.
:::

```{=html}
<style>
  .mystyle {
    color: red;
    font-weight: bold;
    padding: 0.5em;
    border: 2px dashed lightgrey;
  }
</style>
```

I can also inline those styles on a given block:

---
title: Typst styling
format: html
---

Eiusmod fugiat cupidatat cillum esse labore ea nostrud ullamco deserunt.

:::{style="color: red; border: 2px dashed lightgrey;"}
Aliqua sint occaecat adipisicing enim exercitation irure commodo dolor.
:::

If I'm outputting to Typst, I can do the latter on a fenced Pandoc div classed .block with inline styles:

---
title: Typst styling
format: typst
---

Eiusmod fugiat cupidatat cillum esse labore ea nostrud ullamco deserunt.

:::{.block fill="luma(230)" inset="8pt"}
Aliqua sint occaecat adipisicing enim exercitation irure commodo dolor.
:::

But the only ways I can find to do the former are:

1. include a Lua filter (like the ones in Quarto's templates) to transform the fenced Pandoc divs into Typst selectors
   • these filters also process arguments on the divs, which might be more complex than the use case I'm considering (just translate to some custom selector, then provide a show rule for that selector in raw Typst)
2. write raw Typst all the way, where you can define a custom selector with a show rule and then use it

One shortcoming with the latter is that, as far as I know, if you define a custom selector in raw Typst with a show rule, you can only use that custom selector in raw Typst. Are there any plans to more generally map Pandoc fenced div class names to Typst selectors that may be defined either in the template or in raw Typst?

(I ask this knowing it's likely a significant engineering effort and there may be other blockers or reasons not to do it — just wondering whether I should assume I'll be writing Lua filters for this sort of thing going into the future!)

Or, alternatively, does Typst CSS happen early enough that I can include custom styles (only the ones specifically translated by Quarto) in a CSS stylesheet, use class names on fenced divs and trust that the CSS styles will be translated by Quarto? The examples given in the Quarto docs have only inline styles being translated, so I'm currently assuming that styles attached to Pandoc classes or any other kind of CSS cascade are not processed.

I think the sort of thing I'm hoping to do is more like:

---
title: Typst test
format: typst
---

```{=typst}
#show myblock: it => [
  #set align(center)
  #set text(13pt, weight: "regular")
  #block(smallcaps(it.body))
]

#show fancytext: it => text(
  fill: "red",
  weight: "regular",
  style: "italic",
  it.body)
```

Welcome to my report!

:::{.myblock}
This is my [fancy report]{.fancytest} right here!
:::

Also, small aside — the link in the documentation to the Quarto filter for Typst CSS ("Lua filter which translates CSS properties to Typst") appears to be broken, as the file has been renamed: it's now https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/filters/quarto-post/typst-css-property-processing.lua, not

[jimjam-slam]

I can see there's some Pandoc discussion on doing something like this with Typst labels too!