Andreas Reinhold / reiniandClaude Opus 5
5f899c7287
Plan step 33. Each token file now opens with the material layer statement and wraps its declarations in material.tokens (the font face in material.base), so an application's unlayered scheme outranks the package default whatever the selectors, and the foundation can import the files with no layer() on the import. The type-* and state utilities move to tokens/utilities.css, still imported by material.css, so no file the foundation imports carries a Tailwind directive. [x-cloak] moves beside the [hidden] rule in foundation/hidden.css, outside every layer; material.css imports it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
24 lines
1.0 KiB
CSS
24 lines
1.0 KiB
CSS
/*
|
|
* The two rules that hide, outside every layer.
|
|
*
|
|
* A layered rule always loses to an unlayered one, and no rule without `!important` beats one with
|
|
* it, so these two sit outside the layers and carry `!important`: whatever `display` a component
|
|
* gives its root, `hidden` on it hides it, and an application can pass `hidden` to any component.
|
|
* `hidden="until-found"` is left to the browser, which keeps such content searchable.
|
|
* `[x-cloak]` hides what Alpine has not started yet; Alpine removes the attribute when it has.
|
|
*
|
|
* Only a layered `!important` could outrank these, and the package writes none. The file is
|
|
* apart from reset.css because material.css, which stays for applications importing it after
|
|
* Tailwind, needs `[x-cloak]` without the reset.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
[hidden]:where(:not([hidden='until-found'])) {
|
|
display: none !important;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|