add an optional css reset

[brunoti]

I was wondering if it's possible to add that feature. I'm willing to build but I think for that we need to have:

• a way to create global styles
• :root

[ghivert]

I was thinking about that lately. What would be your usage of selecting :root? For me, it was mainly for CSS variables, which can simply be set at the top of the root node of the app (just set the variables in the first div in your app).

I agree for global styles, I'm thinking on adding a new function sketch.global(cache: Cache, classes: List(Class)), and something like sketch.selector(selector: String, styles: List(Style)).
The idea would be to have something like:

// main.gleam
pub fn main() {
  let assert Ok(cache, render) = sketch.setup()

  sketch.global(cache, [
    sketch.selector("p", [sketch.text_align("center")]),
    sketch.selector("div", [sketch.margin(px(0))]),
  ])

  lustre.application() |> lustre.start()
}

I'm still unsure about the API though, and I'm wondering if a CLI in that case wouldn't be better. Something to compile styles to CSS, then we could have something like:

// normalize.gleam
pub fn p() {
  sketch.class([
    sketch.sketch.text_align("center")
  ])
}

pub fn div() {
  sketch.margin(px(0))
}

And then run sketch compile normalize.gleam and everything is outputted correctly in a styles.css. We could put the CLI in your workflow, and avoid the burden of running Sketch for global styles (which wouldn't be huge however, due to the nature of static styling).

[brunoti]

I like this approach better:

  sketch.global(cache, [
    sketch.selector("p", [sketch.text_align("center")]),
    sketch.selector("div", [sketch.margin(px(0))]),
  ])

I think the other one gets very limited for pseudo-selectors as you can see here:

https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css

Maybe something like this:

  sketch.class([
    sketch.width_("100%"),
  ], [
    sketch.selector("p", [sketch.text_align("center")]),
    sketch.selector("a", [sketch.color("red")]),
  ]) |> sketch.on("div")

[ghivert]

I'm missing some descendent selectors in sketch no matter what.

There's right now no way to target .class:hover child which seems to me a rather recurrent pattern. Maybe we could do something like

sketch.class([
  property1,
  property2,
  sketch.child("div", [
    property3,
  ]),
  sketch.neighbors("div", [
    property4,
  ]),
])

By the way I really like the idea of sketch.on(), I'll explore if we could get something great with this! Unfortunately, it's not possible to use it like you do right now, because a Class is actually already compiled and pushed in the StyleSheet, it will be complicated to change the name afterwards. Starting with the selector would be simpler. The idea of Class is to represent an abstract class, without having to worry on the selector, with nice scoped styles. The idea is to avoid to execute code doing side-effects globally on the DOM.

[ghivert]

FYI, I'll change the init setup of sketch in order to build more easily common CSS. It's still on my to-do list, just building it as things are needed for me mainly, but if you have any idea/experiment to share, feel free!

[ghivert]

The change in init is done, I can experiments on building custom stylesheets!