cascadeLayer constructor option to render CSS with cascade layers

[yhatt]

This suggestion is the framework-level support for dealing with subtle problems about style overloading like marp-team/marp-core#244. @layer at-rule in a new CSS proposal about cascade layers makes the order of styling be controlled.

Why?

CSS rendering in Marpit relies to the order of appearance: @import -> the scaffold theme -> theme CSS -> inline styles + scoped styles (mixed) -> styles for the advanced background

This was fragile approach because easy to break the styling priority by CSS specificity.

For example, if there was example theme like this:

/* @theme example */

section {
  background: #fff;
  color: #000;
}

section.invert {
  background: #000;
  color: #fff;
}

A following tweak will not work because of low specificity.

---
theme: example
class: invert
---

<style>
section {
  background: #666;
}
</style>

A pre-released Marp Core v3 has fixed this problem by using :where pseudo-class (marp-team/marp-core#244). But this approach is not so intuitive for custom theme authors.

An another broken case is the scoped style (<style scoped>). Users always would expect that styles in <style scoped> makes overriding styles defined in the theme CSS. However, a simple selector to section in <style scoped> (0-1-1 specificity) is not working against the section selector with 2+ classes (0-2-1 specificity).

<!-- class: a b -->

<style>
section.a.b {
  background: blue;
}
</style>

<style scoped>
section {
  /* Not working */
  background: red;
}
</style>

If supported CSS rendering with @layer, Marpit can make a border between the global style and slide-scoped style without no side effects. The slide author does no longer need to take care of the specificity.

Proposal

Add cascadeLayer constructor option to enable CSS rendering with cascade layers (@layer). The proposal of CSS cascade layers is still experimental in real world browsers, so cascadeLayers option should be disabled by default.

If cascadeLayer was enabled, styles added by the framework (and extended plugins) must try to contain in any @layer.

ToDo

• What kind of layers we have to generate
• Where we make configurable by the constructor option
• Whether should provide a high level interface to manage @layers in the ThemeSet interface

Resources

• The Future of CSS: Cascade Layers (CSS @layer) – Bram.us
• Cascade Layers? - CSS-Tricks

Difference from Marpit v3 proposal

If you had seen the proposal of Marpit v3 in #194, you might know about the concept of "Contents layer". It is using the same word "layer", but they have different goals.

• Cascade layers will affect only to the applicable order of styles.
• Content layers will affect only to the DOM structure of rendered Markdown.