@stamcat/craftsman 0.0.34 → 0.0.35
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,6 +202,18 @@ 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 `themeBuilder`'s `layered` Option
|
|
206
|
+
|
|
207
|
+
Runtime theme CSS produced by `themeBuilder`/`ThemeProvider` is wrapped in the `craftsman-theme` cascade layer by default (`layered: true`). This stylesheet is inserted via a hoisted `<style>` tag, which browsers always place first 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.
|
|
208
|
+
|
|
209
|
+
If the consuming app uses Tailwind or another framework that declares its own cascade layers (for example Tailwind's `@layer theme, base, components, utilities;`), set `layered: false` so Craftsman's theme overrides don't pre-register `craftsman-theme` ahead of the app's own layer order:
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
themeBuilder(theme, { layered: false });
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
With `layered: false`, the theme CSS still declares `@layer craftsman-theme` but does not join a Craftsman-owned layer order — the consuming app is responsible for declaring `craftsman-theme` in its own `@layer` order statement wherever it wants that priority to apply.
|
|
216
|
+
|
|
205
217
|
### Theme Authoring Usage Parameters
|
|
206
218
|
|
|
207
219
|
- Prefer authoring theme styles as SCSS over JS styling, except in apps that primarily use JS styling and do not use SCSS.
|
|
@@ -4,6 +4,7 @@ type ThemeProviderProps = {
|
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
precedence?: string;
|
|
6
6
|
href?: string;
|
|
7
|
+
layered?: boolean;
|
|
7
8
|
};
|
|
8
|
-
export declare function ThemeProvider({ theme, children, precedence, href, }: ThemeProviderProps): import("react").JSX.Element;
|
|
9
|
+
export declare function ThemeProvider({ theme, children, precedence, href, layered, }: ThemeProviderProps): import("react").JSX.Element;
|
|
9
10
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
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
|
-
function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider" }) {
|
|
4
|
+
function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider", layered: c = !0 }) {
|
|
5
5
|
return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", {
|
|
6
6
|
precedence: o,
|
|
7
7
|
href: s,
|
|
8
|
-
dangerouslySetInnerHTML: { __html: e(i || {}) }
|
|
8
|
+
dangerouslySetInnerHTML: { __html: e(i || {}, { layered: c }) }
|
|
9
9
|
}), a] });
|
|
10
10
|
}
|
|
11
11
|
//#endregion
|
|
@@ -27,18 +27,23 @@ function s(t) {
|
|
|
27
27
|
function c(e) {
|
|
28
28
|
if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
|
|
29
29
|
}
|
|
30
|
-
function l(e) {
|
|
31
|
-
let n = [
|
|
30
|
+
function l(e, n) {
|
|
31
|
+
let o = n?.layered ?? !0, l = [
|
|
32
32
|
t(":root", { ...e.colors || {} }),
|
|
33
33
|
c(e.widths),
|
|
34
34
|
a(e.root),
|
|
35
35
|
...s(e.components)
|
|
36
36
|
].filter(Boolean).join("\n");
|
|
37
|
-
return [
|
|
37
|
+
return o ? [
|
|
38
38
|
`:root { ${i} ${r} }`,
|
|
39
39
|
"@layer craftsman-base, craftsman-theme;",
|
|
40
40
|
"@layer craftsman-theme {",
|
|
41
|
-
|
|
41
|
+
l,
|
|
42
|
+
"}"
|
|
43
|
+
].filter(Boolean).join("\n") : [
|
|
44
|
+
`:root { ${i} ${r} }`,
|
|
45
|
+
"@layer craftsman-theme {",
|
|
46
|
+
l,
|
|
42
47
|
"}"
|
|
43
48
|
].filter(Boolean).join("\n");
|
|
44
49
|
}
|