@stamcat/craftsman 0.0.35 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -202,13 +202,26 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
|
|
|
202
202
|
|
|
203
203
|
Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
|
|
204
204
|
|
|
205
|
-
### Cascade Layers and `
|
|
205
|
+
### Cascade Layers and `ThemeProvider`'s `layered`/`hoist` Options
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
`ThemeProvider` (and the underlying `themeBuilder`) exposes two related but independent options for controlling how the runtime theme CSS interacts with cascade layers:
|
|
208
208
|
|
|
209
|
-
|
|
209
|
+
- **`layered`** (default `true`) — whether the theme CSS is wrapped in the `craftsman-theme` cascade layer.
|
|
210
|
+
- **`hoist`** (default `true`) — whether the theme `<style>` is hoisted to `<head>` via React's resource precedence mechanism. React always inserts a hoisted style as the first stylesheet in the document, which wins any `@layer` name-registration race against your app's own `@layer` order pin.
|
|
211
|
+
|
|
212
|
+
By default (`hoist: true`), the hoisted style is always the first stylesheet in `<head>` regardless of import order, so its `@layer` declaration always wins the layer-registration race and permanently fixes `craftsman-theme`'s priority relative to any layers a consuming app declares afterward.
|
|
213
|
+
|
|
214
|
+
If the consuming app uses Tailwind or another framework that declares its own cascade layer order (for example Tailwind's `@layer theme, base, components, utilities;`) and needs that app-level order to win instead, set `hoist: false` so the theme `<style>` renders in normal tree/commit order instead — letting an earlier-declared app-level `@layer` statement control where `craftsman-theme` ranks:
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
<ThemeProvider theme={theme} hoist={false} />
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
Set `layered: false` (on `ThemeProvider` or `themeBuilder` directly) when the theme CSS should not join `@layer craftsman-theme` at all:
|
|
210
221
|
|
|
211
222
|
```tsx
|
|
223
|
+
<ThemeProvider theme={theme} layered={false} />
|
|
224
|
+
// or, calling themeBuilder directly:
|
|
212
225
|
themeBuilder(theme, { layered: false });
|
|
213
226
|
```
|
|
214
227
|
|
|
@@ -2,10 +2,13 @@ import { themeBuilder as e } from "../theme/theme.esm.js";
|
|
|
2
2
|
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
3
3
|
//#region src/styles/components/ThemeProvider.tsx
|
|
4
4
|
function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider", layered: c = !0 }) {
|
|
5
|
+
let l = e(i || {}, { layered: c });
|
|
5
6
|
return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
...o === !1 ? {} : {
|
|
8
|
+
precedence: o,
|
|
9
|
+
href: s
|
|
10
|
+
},
|
|
11
|
+
dangerouslySetInnerHTML: { __html: l }
|
|
9
12
|
}), a] });
|
|
10
13
|
}
|
|
11
14
|
//#endregion
|