@praxisjs/css 0.3.3 → 0.3.5
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/CHANGELOG.md +31 -0
- package/dist/builder/css-builder.d.ts.map +1 -1
- package/dist/builder/css-builder.js +68 -74
- package/dist/builder/css-builder.js.map +1 -1
- package/dist/builder/keyframes.d.ts +5 -0
- package/dist/builder/keyframes.d.ts.map +1 -1
- package/dist/builder/keyframes.js +12 -14
- package/dist/builder/keyframes.js.map +1 -1
- package/dist/cx.d.ts.map +1 -1
- package/dist/cx.js +23 -18
- package/dist/cx.js.map +1 -1
- package/dist/decorators/param.d.ts +1 -2
- package/dist/decorators/param.d.ts.map +1 -1
- package/dist/decorators/param.js +9 -17
- package/dist/decorators/param.js.map +1 -1
- package/dist/decorators/style.d.ts.map +1 -1
- package/dist/decorators/style.js +61 -33
- package/dist/decorators/style.js.map +1 -1
- package/dist/decorators/styled.d.ts.map +1 -1
- package/dist/decorators/styled.js +112 -95
- package/dist/decorators/styled.js.map +1 -1
- package/dist/extract.d.ts.map +1 -1
- package/dist/extract.js +19 -35
- package/dist/extract.js.map +1 -1
- package/dist/global.d.ts +3 -0
- package/dist/global.d.ts.map +1 -1
- package/dist/global.js +9 -4
- package/dist/global.js.map +1 -1
- package/dist/internal/kebab.d.ts +5 -0
- package/dist/internal/kebab.d.ts.map +1 -0
- package/dist/internal/kebab.js +23 -0
- package/dist/internal/kebab.js.map +1 -0
- package/dist/internal/lifecycle.d.ts +15 -0
- package/dist/internal/lifecycle.d.ts.map +1 -0
- package/dist/internal/lifecycle.js +16 -0
- package/dist/internal/lifecycle.js.map +1 -0
- package/dist/internal/registry.d.ts +5 -1
- package/dist/internal/registry.d.ts.map +1 -1
- package/dist/internal/registry.js +9 -23
- package/dist/internal/registry.js.map +1 -1
- package/dist/internal/sheet.d.ts +20 -0
- package/dist/internal/sheet.d.ts.map +1 -0
- package/dist/internal/sheet.js +56 -0
- package/dist/internal/sheet.js.map +1 -0
- package/dist/internal/static-mode.d.ts +2 -0
- package/dist/internal/static-mode.d.ts.map +1 -0
- package/dist/internal/static-mode.js +2 -0
- package/dist/internal/static-mode.js.map +1 -0
- package/dist/preflight.d.ts +3 -1
- package/dist/preflight.d.ts.map +1 -1
- package/dist/preflight.js +7 -3
- package/dist/preflight.js.map +1 -1
- package/dist/tokens/decorators.d.ts.map +1 -1
- package/dist/tokens/decorators.js +13 -4
- package/dist/tokens/decorators.js.map +1 -1
- package/dist/tokens/theme-instance.d.ts +5 -0
- package/dist/tokens/theme-instance.d.ts.map +1 -1
- package/dist/tokens/theme-instance.js +25 -17
- package/dist/tokens/theme-instance.js.map +1 -1
- package/dist/tokens/token-sheet.d.ts.map +1 -1
- package/dist/tokens/token-sheet.js +12 -9
- package/dist/tokens/token-sheet.js.map +1 -1
- package/package.json +13 -5
- package/src/builder/css-builder.ts +79 -83
- package/src/builder/keyframes.ts +12 -20
- package/src/cx.ts +20 -13
- package/src/decorators/param.ts +12 -16
- package/src/decorators/style.ts +79 -35
- package/src/decorators/styled.ts +127 -111
- package/src/extract.ts +18 -34
- package/src/global.ts +10 -9
- package/src/internal/kebab.ts +23 -0
- package/src/internal/lifecycle.ts +21 -0
- package/src/internal/registry.ts +9 -35
- package/src/internal/sheet.ts +71 -0
- package/src/internal/static-mode.ts +6 -0
- package/src/preflight.ts +8 -3
- package/src/tokens/decorators.ts +15 -3
- package/src/tokens/theme-instance.ts +26 -16
- package/src/tokens/token-sheet.ts +12 -12
- package/dist/__tests__/css-builder.test.d.ts +0 -2
- package/dist/__tests__/css-builder.test.d.ts.map +0 -1
- package/dist/__tests__/css-builder.test.js +0 -198
- package/dist/__tests__/css-builder.test.js.map +0 -1
- package/dist/__tests__/cx.test.d.ts +0 -2
- package/dist/__tests__/cx.test.d.ts.map +0 -1
- package/dist/__tests__/cx.test.js +0 -47
- package/dist/__tests__/cx.test.js.map +0 -1
- package/dist/__tests__/decorators.test.d.ts +0 -2
- package/dist/__tests__/decorators.test.d.ts.map +0 -1
- package/dist/__tests__/decorators.test.js +0 -264
- package/dist/__tests__/decorators.test.js.map +0 -1
- package/dist/__tests__/extract.test.d.ts +0 -2
- package/dist/__tests__/extract.test.d.ts.map +0 -1
- package/dist/__tests__/extract.test.js +0 -416
- package/dist/__tests__/extract.test.js.map +0 -1
- package/dist/__tests__/global.test.d.ts +0 -2
- package/dist/__tests__/global.test.d.ts.map +0 -1
- package/dist/__tests__/global.test.js +0 -136
- package/dist/__tests__/global.test.js.map +0 -1
- package/dist/__tests__/keyframes.test.d.ts +0 -2
- package/dist/__tests__/keyframes.test.d.ts.map +0 -1
- package/dist/__tests__/keyframes.test.js +0 -90
- package/dist/__tests__/keyframes.test.js.map +0 -1
- package/dist/__tests__/preflight.test.d.ts +0 -2
- package/dist/__tests__/preflight.test.d.ts.map +0 -1
- package/dist/__tests__/preflight.test.js +0 -74
- package/dist/__tests__/preflight.test.js.map +0 -1
- package/dist/__tests__/registry.test.d.ts +0 -2
- package/dist/__tests__/registry.test.d.ts.map +0 -1
- package/dist/__tests__/registry.test.js +0 -132
- package/dist/__tests__/registry.test.js.map +0 -1
- package/dist/__tests__/style.test.d.ts +0 -2
- package/dist/__tests__/style.test.d.ts.map +0 -1
- package/dist/__tests__/style.test.js +0 -281
- package/dist/__tests__/style.test.js.map +0 -1
- package/dist/__tests__/styled.test.d.ts +0 -2
- package/dist/__tests__/styled.test.d.ts.map +0 -1
- package/dist/__tests__/styled.test.js +0 -904
- package/dist/__tests__/styled.test.js.map +0 -1
- package/dist/__tests__/theme-instance.test.d.ts +0 -2
- package/dist/__tests__/theme-instance.test.d.ts.map +0 -1
- package/dist/__tests__/theme-instance.test.js +0 -309
- package/dist/__tests__/theme-instance.test.js.map +0 -1
- package/dist/__tests__/theme-uninit.test.d.ts +0 -2
- package/dist/__tests__/theme-uninit.test.d.ts.map +0 -1
- package/dist/__tests__/theme-uninit.test.js +0 -10
- package/dist/__tests__/theme-uninit.test.js.map +0 -1
- package/dist/__tests__/token-sheet.test.d.ts +0 -2
- package/dist/__tests__/token-sheet.test.d.ts.map +0 -1
- package/dist/__tests__/token-sheet.test.js +0 -74
- package/dist/__tests__/token-sheet.test.js.map +0 -1
- package/src/__tests__/css-builder.test.ts +0 -230
- package/src/__tests__/cx.test.ts +0 -63
- package/src/__tests__/decorators.test.ts +0 -127
- package/src/__tests__/extract.test.ts +0 -459
- package/src/__tests__/global.test.ts +0 -163
- package/src/__tests__/keyframes.test.ts +0 -103
- package/src/__tests__/preflight.test.ts +0 -85
- package/src/__tests__/registry.test.ts +0 -151
- package/src/__tests__/style.test.ts +0 -170
- package/src/__tests__/styled.test.ts +0 -443
- package/src/__tests__/theme-instance.test.ts +0 -374
- package/src/__tests__/theme-uninit.test.ts +0 -12
- package/src/__tests__/token-sheet.test.ts +0 -87
- package/tsconfig.json +0 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @praxisjs/css
|
|
2
2
|
|
|
3
|
+
## 0.3.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 75115a9: Decorated fields are defined by their innermost decorator. With `@praxisjs/vite-plugin`, `@State()`, `@Prop()`, every built-in field decorator and `createFieldDecorator` bindings install their property directly with the field's initial value instead of replacing a plain value, which kept every instance in V8's slow dictionary mode. New `addClaimableInitializer(context, init)` export for field decorators written against the TC39 API.
|
|
8
|
+
- 75115a9: Field decorators throw a `TypeError` when the class is defined if they decorate an `accessor`, naming the member to fix. Covers `@State()`, `@Prop()`, every built-in field decorator and `createFieldDecorator` bindings. New `assertFieldContext(context, label?)` export for field decorators written against the TC39 API directly.
|
|
9
|
+
- 75115a9: Published packages no longer contain their tests: package builds compile `src` without `src/**/__tests__` (through a `tsconfig.build.json`), and each package's `files` leaves test sources and stale compiled tests out of the tarball. `pnpm typecheck` still type-checks the tests.
|
|
10
|
+
- 75115a9: Faster utils packages and fixes. `@praxisjs/css`: shared per-field state for `@Styled`, `@Param` and `@Style`, a prototype-based `css()` builder, cached token reads and a direct `cx()`. Static extraction now keeps `globalStyle()` layers and supports `preflight()`. Server renders collect theme vars, and instantiating a `@Themed` class keeps the active theme. `@praxisjs/composables`: listeners, observers and timers start on mount. `Idle` and `TimeAgo` no longer reschedule or poll timers, and `FileUpload.clear()` no longer starts discarded uploads. `add()` called from an effect no longer subscribes it to the list. `@praxisjs/concurrent`: cached signal detection, direct signal views, O(1) queues, and `@Pool` no longer subscribes the calling effect.
|
|
11
|
+
- Updated dependencies [75115a9]
|
|
12
|
+
- Updated dependencies [75115a9]
|
|
13
|
+
- Updated dependencies [75115a9]
|
|
14
|
+
- Updated dependencies [75115a9]
|
|
15
|
+
- Updated dependencies [75115a9]
|
|
16
|
+
- Updated dependencies [75115a9]
|
|
17
|
+
- Updated dependencies [75115a9]
|
|
18
|
+
- Updated dependencies [75115a9]
|
|
19
|
+
- Updated dependencies [75115a9]
|
|
20
|
+
- Updated dependencies [75115a9]
|
|
21
|
+
- Updated dependencies [75115a9]
|
|
22
|
+
- @praxisjs/decorators@2.0.0
|
|
23
|
+
- @praxisjs/core@2.3.0
|
|
24
|
+
|
|
25
|
+
## 0.3.4
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [a97a37c]
|
|
30
|
+
- Updated dependencies [c7a5950]
|
|
31
|
+
- @praxisjs/core@2.2.0
|
|
32
|
+
- @praxisjs/decorators@1.7.0
|
|
33
|
+
|
|
3
34
|
## 0.3.3
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-builder.d.ts","sourceRoot":"","sources":["../../src/builder/css-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"css-builder.d.ts","sourceRoot":"","sources":["../../src/builder/css-builder.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,79 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { declarations } from "../internal/kebab.js";
|
|
2
|
+
// Every method lives once on the prototype: `this.css()` runs for each `$` field of every
|
|
3
|
+
// stylesheet, and a per-builder set of ~40 closures made each call allocate them all.
|
|
4
|
+
class CSSBuilderImpl {
|
|
5
|
+
#parts = [];
|
|
6
|
+
constructor(props) {
|
|
7
|
+
const root = declarations(props, "");
|
|
8
|
+
if (root)
|
|
9
|
+
this.#parts.push(root);
|
|
10
|
+
}
|
|
11
|
+
#nest(selector, props) {
|
|
12
|
+
const css = declarations(props, "");
|
|
13
|
+
// Indents every line, including the continuation lines of a multi-line value.
|
|
14
|
+
if (css)
|
|
15
|
+
this.#parts.push(`${selector} {\n ${css.replaceAll("\n", "\n ")}\n}`);
|
|
16
|
+
return this;
|
|
17
|
+
}
|
|
18
|
+
toString() {
|
|
19
|
+
return this.#parts.join("\n");
|
|
20
|
+
}
|
|
21
|
+
[Symbol.toPrimitive]() {
|
|
22
|
+
return this.toString();
|
|
23
|
+
}
|
|
24
|
+
// Pseudo-classes — interaction
|
|
25
|
+
hover(p) { return this.#nest("&:hover", p); }
|
|
26
|
+
focus(p) { return this.#nest("&:focus", p); }
|
|
27
|
+
focusWithin(p) { return this.#nest("&:focus-within", p); }
|
|
28
|
+
focusVisible(p) { return this.#nest("&:focus-visible", p); }
|
|
29
|
+
active(p) { return this.#nest("&:active", p); }
|
|
30
|
+
visited(p) { return this.#nest("&:visited", p); }
|
|
31
|
+
target(p) { return this.#nest("&:target", p); }
|
|
32
|
+
// Pseudo-classes — form state
|
|
33
|
+
disabled(p) { return this.#nest('&:disabled, &[disabled], &[aria-disabled="true"]', p); }
|
|
34
|
+
enabled(p) { return this.#nest("&:enabled", p); }
|
|
35
|
+
checked(p) { return this.#nest("&:checked", p); }
|
|
36
|
+
indeterminate(p) { return this.#nest("&:indeterminate", p); }
|
|
37
|
+
required(p) { return this.#nest("&:required", p); }
|
|
38
|
+
optional(p) { return this.#nest("&:optional", p); }
|
|
39
|
+
valid(p) { return this.#nest("&:valid", p); }
|
|
40
|
+
invalid(p) { return this.#nest("&:invalid", p); }
|
|
41
|
+
readOnly(p) { return this.#nest("&:read-only", p); }
|
|
42
|
+
// Pseudo-classes — structural
|
|
43
|
+
first(p) { return this.#nest("&:first-child", p); }
|
|
44
|
+
last(p) { return this.#nest("&:last-child", p); }
|
|
45
|
+
nthChild(n, p) { return this.#nest(`&:nth-child(${String(n)})`, p); }
|
|
46
|
+
empty(p) { return this.#nest("&:empty", p); }
|
|
47
|
+
// Pseudo-classes — relational (Selectors Level 4)
|
|
48
|
+
has(sel, p) { return this.#nest(`&:has(${sel})`, p); }
|
|
49
|
+
is(sel, p) { return this.#nest(`&:is(${sel})`, p); }
|
|
50
|
+
where(sel, p) { return this.#nest(`&:where(${sel})`, p); }
|
|
51
|
+
not(sel, p) { return this.#nest(`&:not(${sel})`, p); }
|
|
52
|
+
// Pseudo-elements
|
|
53
|
+
before(p) { return this.#nest("&::before", p); }
|
|
54
|
+
after(p) { return this.#nest("&::after", p); }
|
|
55
|
+
placeholder(p) { return this.#nest("&::placeholder", p); }
|
|
56
|
+
selection(p) { return this.#nest("&::selection", p); }
|
|
57
|
+
firstLine(p) { return this.#nest("&::first-line", p); }
|
|
58
|
+
firstLetter(p) { return this.#nest("&::first-letter", p); }
|
|
59
|
+
marker(p) { return this.#nest("&::marker", p); }
|
|
60
|
+
backdrop(p) { return this.#nest("&::backdrop", p); }
|
|
61
|
+
// At-rules
|
|
62
|
+
media(q, p) { return this.#nest(`@media (${q})`, p); }
|
|
63
|
+
container(q, p) { return this.#nest(`@container (${q})`, p); }
|
|
64
|
+
supports(cond, p) { return this.#nest(`@supports (${cond})`, p); }
|
|
65
|
+
on(sel, p) { return this.#nest(sel, p); }
|
|
9
66
|
}
|
|
10
|
-
function
|
|
11
|
-
return
|
|
12
|
-
.filter(([, v]) => v != null)
|
|
13
|
-
.map(([k, v]) => `${toKebab(k)}: ${String(v)};`)
|
|
14
|
-
.join("\n");
|
|
67
|
+
export function isCSSBuilder(value) {
|
|
68
|
+
return value instanceof CSSBuilderImpl;
|
|
15
69
|
}
|
|
16
70
|
export function createCSSBuilder(initialProps) {
|
|
17
|
-
|
|
18
|
-
const rootCSS = propsToCSS(initialProps);
|
|
19
|
-
if (rootCSS)
|
|
20
|
-
parts.push(rootCSS);
|
|
21
|
-
const addNested = (selector, props) => {
|
|
22
|
-
const rawCSS = propsToCSS(props);
|
|
23
|
-
if (!rawCSS)
|
|
24
|
-
return builder;
|
|
25
|
-
const inner = rawCSS.split("\n").map((l) => ` ${l}`).join("\n");
|
|
26
|
-
parts.push(`${selector} {\n${inner}\n}`);
|
|
27
|
-
return builder;
|
|
28
|
-
};
|
|
29
|
-
const toCSS = () => parts.join("\n");
|
|
30
|
-
const builder = Object.assign(Object.create(null), {
|
|
31
|
-
[CSS_BUILDER]: true,
|
|
32
|
-
toString: toCSS,
|
|
33
|
-
[Symbol.toPrimitive]: toCSS,
|
|
34
|
-
// Pseudo-classes — interaction
|
|
35
|
-
hover: (p) => addNested("&:hover", p),
|
|
36
|
-
focus: (p) => addNested("&:focus", p),
|
|
37
|
-
focusWithin: (p) => addNested("&:focus-within", p),
|
|
38
|
-
focusVisible: (p) => addNested("&:focus-visible", p),
|
|
39
|
-
active: (p) => addNested("&:active", p),
|
|
40
|
-
visited: (p) => addNested("&:visited", p),
|
|
41
|
-
target: (p) => addNested("&:target", p),
|
|
42
|
-
// Pseudo-classes — form state
|
|
43
|
-
disabled: (p) => addNested('&:disabled, &[disabled], &[aria-disabled="true"]', p),
|
|
44
|
-
enabled: (p) => addNested("&:enabled", p),
|
|
45
|
-
checked: (p) => addNested("&:checked", p),
|
|
46
|
-
indeterminate: (p) => addNested("&:indeterminate", p),
|
|
47
|
-
required: (p) => addNested("&:required", p),
|
|
48
|
-
optional: (p) => addNested("&:optional", p),
|
|
49
|
-
valid: (p) => addNested("&:valid", p),
|
|
50
|
-
invalid: (p) => addNested("&:invalid", p),
|
|
51
|
-
readOnly: (p) => addNested("&:read-only", p),
|
|
52
|
-
// Pseudo-classes — structural
|
|
53
|
-
first: (p) => addNested("&:first-child", p),
|
|
54
|
-
last: (p) => addNested("&:last-child", p),
|
|
55
|
-
nthChild: (n, p) => addNested(`&:nth-child(${String(n)})`, p),
|
|
56
|
-
empty: (p) => addNested("&:empty", p),
|
|
57
|
-
// Pseudo-classes — relational (Selectors Level 4)
|
|
58
|
-
has: (sel, p) => addNested(`&:has(${sel})`, p),
|
|
59
|
-
is: (sel, p) => addNested(`&:is(${sel})`, p),
|
|
60
|
-
where: (sel, p) => addNested(`&:where(${sel})`, p),
|
|
61
|
-
not: (sel, p) => addNested(`&:not(${sel})`, p),
|
|
62
|
-
// Pseudo-elements
|
|
63
|
-
before: (p) => addNested("&::before", p),
|
|
64
|
-
after: (p) => addNested("&::after", p),
|
|
65
|
-
placeholder: (p) => addNested("&::placeholder", p),
|
|
66
|
-
selection: (p) => addNested("&::selection", p),
|
|
67
|
-
firstLine: (p) => addNested("&::first-line", p),
|
|
68
|
-
firstLetter: (p) => addNested("&::first-letter", p),
|
|
69
|
-
marker: (p) => addNested("&::marker", p),
|
|
70
|
-
backdrop: (p) => addNested("&::backdrop", p),
|
|
71
|
-
// At-rules
|
|
72
|
-
media: (q, p) => addNested(`@media (${q})`, p),
|
|
73
|
-
container: (q, p) => addNested(`@container (${q})`, p),
|
|
74
|
-
supports: (cond, p) => addNested(`@supports (${cond})`, p),
|
|
75
|
-
on: (sel, p) => addNested(sel, p),
|
|
76
|
-
});
|
|
77
|
-
return builder;
|
|
71
|
+
return new CSSBuilderImpl(initialProps);
|
|
78
72
|
}
|
|
79
73
|
//# sourceMappingURL=css-builder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-builder.js","sourceRoot":"","sources":["../../src/builder/css-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"css-builder.js","sourceRoot":"","sources":["../../src/builder/css-builder.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import type { CSSProperties } from "./css-builder.js";
|
|
2
2
|
type KeyframeStops = Record<string, CSSProperties>;
|
|
3
|
+
/** The scoped name and `@keyframes` rule for a set of stops — shared with build-time extraction. */
|
|
4
|
+
export declare function keyframesRule(name: string, stops: KeyframeStops): {
|
|
5
|
+
name: string;
|
|
6
|
+
css: string;
|
|
7
|
+
};
|
|
3
8
|
/**
|
|
4
9
|
* Defines a scoped `@keyframes` animation and injects it into `document.head`.
|
|
5
10
|
* Returns the scoped animation name — use it in the `animation` or
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAInD,oGAAoG;AACpG,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAQ/F;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,CAiBpE"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { getCollector } from "../internal/collector.js";
|
|
2
2
|
import { hashCSS } from "../internal/hash.js";
|
|
3
|
-
|
|
3
|
+
import { declarations } from "../internal/kebab.js";
|
|
4
|
+
import { STATIC_MODE } from "../internal/static-mode.js";
|
|
4
5
|
const injected = new Set();
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
/** The scoped name and `@keyframes` rule for a set of stops — shared with build-time extraction. */
|
|
7
|
+
export function keyframesRule(name, stops) {
|
|
8
|
+
let body = "";
|
|
9
|
+
for (const stop in stops) {
|
|
10
|
+
const block = ` ${stop} {\n${declarations(stops[stop], " ")}\n }`;
|
|
11
|
+
body = body === "" ? block : `${body}\n${block}`;
|
|
12
|
+
}
|
|
13
|
+
const scopedName = `prx-${name}-${hashCSS(body)}`;
|
|
14
|
+
return { name: scopedName, css: `@keyframes ${scopedName} {\n${body}\n}` };
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
15
17
|
* Defines a scoped `@keyframes` animation and injects it into `document.head`.
|
|
@@ -30,11 +32,7 @@ function stopToCSS(props) {
|
|
|
30
32
|
* }
|
|
31
33
|
*/
|
|
32
34
|
export function keyframes(name, stops) {
|
|
33
|
-
const
|
|
34
|
-
.map(([stop, props]) => ` ${stop} {\n${stopToCSS(props)}\n }`)
|
|
35
|
-
.join("\n");
|
|
36
|
-
const scopedName = `prx-${name}-${hashCSS(stopsCSS)}`;
|
|
37
|
-
const kfCSS = `@keyframes ${scopedName} {\n${stopsCSS}\n}`;
|
|
35
|
+
const { name: scopedName, css: kfCSS } = keyframesRule(name, stops);
|
|
38
36
|
if (STATIC_MODE)
|
|
39
37
|
return scopedName;
|
|
40
38
|
const col = getCollector();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyframes.js","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"keyframes.js","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAMzD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAC;AAEnC,oGAAoG;AACpG,MAAM,UAAU,aAAa,CAAC,IAAY,EAAE,KAAoB;IAC9D,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,KAAK,IAAI,OAAO,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;QACvE,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC;IACnD,CAAC;IACD,MAAM,UAAU,GAAG,OAAO,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;IAClD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,cAAc,UAAU,OAAO,IAAI,KAAK,EAAE,CAAC;AAC7E,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,SAAS,CAAC,IAAY,EAAE,KAAoB;IAC1D,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAEpE,IAAI,WAAW;QAAE,OAAO,UAAU,CAAC;IAEnC,MAAM,GAAG,GAAG,YAAY,EAAE,CAAC;IAC3B,IAAI,GAAG,EAAE,CAAC;QAAC,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAAC,OAAO,UAAU,CAAC;IAAC,CAAC;IAEpE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACjE,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC;QACrD,EAAE,CAAC,WAAW,GAAG,KAAK,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC"}
|
package/dist/cx.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAIhD"}
|
package/dist/cx.js
CHANGED
|
@@ -1,23 +1,28 @@
|
|
|
1
1
|
export function cx(...args) {
|
|
2
|
-
|
|
3
|
-
for (const arg of args)
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
2
|
+
let out = "";
|
|
3
|
+
for (const arg of args)
|
|
4
|
+
out = append(out, arg);
|
|
5
|
+
return out;
|
|
6
|
+
}
|
|
7
|
+
// Builds the string directly instead of collecting parts in an array: cx() runs on every render of
|
|
8
|
+
// every styled component.
|
|
9
|
+
function append(out, arg) {
|
|
10
|
+
if (!arg && arg !== 0)
|
|
11
|
+
return out;
|
|
12
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
13
|
+
return out === "" ? String(arg) : `${out} ${String(arg)}`;
|
|
14
|
+
}
|
|
15
|
+
if (Array.isArray(arg)) {
|
|
16
|
+
for (const item of arg)
|
|
17
|
+
out = append(out, item);
|
|
18
|
+
return out;
|
|
19
|
+
}
|
|
20
|
+
if (typeof arg === "object") {
|
|
21
|
+
for (const key in arg) {
|
|
22
|
+
if (Object.hasOwn(arg, key) && arg[key])
|
|
23
|
+
out = out === "" ? key : `${out} ${key}`;
|
|
19
24
|
}
|
|
20
25
|
}
|
|
21
|
-
return
|
|
26
|
+
return out;
|
|
22
27
|
}
|
|
23
28
|
//# sourceMappingURL=cx.js.map
|
package/dist/cx.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cx.js","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,EAAE,CAAC,GAAG,IAAkB;IACtC,
|
|
1
|
+
{"version":3,"file":"cx.js","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,EAAE,CAAC,GAAG,IAAkB;IACtC,IAAI,GAAG,GAAG,EAAE,CAAC;IACb,KAAK,MAAM,GAAG,IAAI,IAAI;QAAE,GAAG,GAAG,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAC;AACb,CAAC;AAED,mGAAmG;AACnG,0BAA0B;AAC1B,SAAS,MAAM,CAAC,GAAW,EAAE,GAAe;IAC1C,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;QAAE,OAAO,GAAG,CAAC;IAClC,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QACvD,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;IAC5D,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,KAAK,MAAM,IAAI,IAAI,GAAG;YAAE,GAAG,GAAG,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAChD,OAAO,GAAG,CAAC;IACb,CAAC;IACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;YACtB,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC;gBAAE,GAAG,GAAG,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QACpF,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { ReactiveStylesheet } from "../base/stylesheet.js";
|
|
2
|
-
export declare function getParamNames(ctor: object): Set<string>;
|
|
3
2
|
/**
|
|
4
3
|
* Marks a field in a {@link ReactiveStylesheet} subclass as a reactive CSS custom property.
|
|
5
4
|
* The field name becomes `--fieldName` on the component's container element.
|
|
@@ -19,5 +18,5 @@ export declare function getParamNames(ctor: object): Set<string>;
|
|
|
19
18
|
* // In the component:
|
|
20
19
|
* this.$card.color = '#ef4444' // updates --color reactively
|
|
21
20
|
*/
|
|
22
|
-
export declare function Param(): <This extends ReactiveStylesheet, Value
|
|
21
|
+
export declare function Param(): <This extends ReactiveStylesheet, Value>(_value: undefined, context: ClassFieldDecoratorContext<This, Value>) => void;
|
|
23
22
|
//# sourceMappingURL=param.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"param.d.ts","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"param.d.ts","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,KAGF,IAAI,SAAS,kBAAkB,EAAE,KAAK,EACrD,QAAQ,SAAS,EACjB,SAAS,0BAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,KAC/C,IAAI,CAMR"}
|
package/dist/decorators/param.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const PARAM_META = new WeakMap();
|
|
3
|
-
export function getParamNames(ctor) {
|
|
4
|
-
return PARAM_META.get(ctor) ?? new Set();
|
|
5
|
-
}
|
|
1
|
+
import { addParamName } from "../internal/sheet.js";
|
|
6
2
|
/**
|
|
7
3
|
* Marks a field in a {@link ReactiveStylesheet} subclass as a reactive CSS custom property.
|
|
8
4
|
* The field name becomes `--fieldName` on the component's container element.
|
|
@@ -23,17 +19,13 @@ export function getParamNames(ctor) {
|
|
|
23
19
|
* this.$card.color = '#ef4444' // updates --color reactively
|
|
24
20
|
*/
|
|
25
21
|
export function Param() {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
meta.add(name);
|
|
35
|
-
return {};
|
|
36
|
-
},
|
|
37
|
-
});
|
|
22
|
+
// Only records the field name: a stylesheet is instantiated once per class, as the template
|
|
23
|
+
// `@Styled` compiles, and every component instance then gets its own signals from there.
|
|
24
|
+
return function (_value, context) {
|
|
25
|
+
const name = context.name;
|
|
26
|
+
context.addInitializer(function () {
|
|
27
|
+
addParamName(this.constructor, name);
|
|
28
|
+
});
|
|
29
|
+
};
|
|
38
30
|
}
|
|
39
31
|
//# sourceMappingURL=param.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"param.js","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"param.js","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,KAAK;IACnB,4FAA4F;IAC5F,yFAAyF;IACzF,OAAO,UACL,MAAiB,EACjB,OAAgD;QAEhD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAc,CAAC;QACpC,OAAO,CAAC,cAAc,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,KAAK,MAAM,EAAE,IAC1B,IAAI,SAAS,MAAM,EAAE,KAAK,GAAG,OAAO,EACnD,QAAQ,SAAS,EACjB,SAAS,0BAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,KAC/C,IAAI,CAqDR"}
|
package/dist/decorators/style.js
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { createEffect, disposeEffect, getComponentAnchor, readSignal, SignalNode, writeSignal, } from "@praxisjs/core/internal";
|
|
2
|
+
import { addClaimableInitializer, assertFieldContext } from "@praxisjs/decorators";
|
|
3
|
+
import { HookedField } from "../internal/lifecycle.js";
|
|
4
|
+
class StyleField extends HookedField {
|
|
5
|
+
node;
|
|
6
|
+
effect = undefined;
|
|
7
|
+
el = undefined;
|
|
8
|
+
constructor(instance, value) {
|
|
9
|
+
super(instance);
|
|
10
|
+
this.node = new SignalNode(value);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
3
13
|
/**
|
|
4
14
|
* Reactive field decorator that binds a signal value to a CSS custom property
|
|
5
15
|
* on the component's container element — with zero re-renders.
|
|
@@ -14,36 +24,54 @@ import { createFieldDecorator } from "@praxisjs/decorators";
|
|
|
14
24
|
* }
|
|
15
25
|
*/
|
|
16
26
|
export function Style(property) {
|
|
17
|
-
return
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
27
|
+
return function (_value, context) {
|
|
28
|
+
assertFieldContext(context);
|
|
29
|
+
const name = context.name;
|
|
30
|
+
// Accessors and hooks are shared by every instance of the decorated field; the instance's
|
|
31
|
+
// own state lives in this slot.
|
|
32
|
+
const slot = Symbol(`praxis.style.${String(name)}`);
|
|
33
|
+
const descriptor = {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
configurable: true,
|
|
36
|
+
get() {
|
|
37
|
+
return readSignal(this[slot].node);
|
|
38
|
+
},
|
|
39
|
+
set(value) {
|
|
40
|
+
writeSignal(this[slot].node, value);
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
function onMount() {
|
|
44
|
+
const field = this[slot];
|
|
45
|
+
field.prevMount?.call(this);
|
|
46
|
+
const el = getComponentAnchor(this)?.parentElement;
|
|
47
|
+
if (!el)
|
|
48
|
+
return;
|
|
49
|
+
const node = field.node;
|
|
50
|
+
field.el = el;
|
|
51
|
+
field.effect = createEffect(() => {
|
|
52
|
+
el.style.setProperty(property, String(readSignal(node)));
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function onUnmount() {
|
|
56
|
+
const field = this[slot];
|
|
57
|
+
field.prevUnmount?.call(this);
|
|
58
|
+
if (field.effect) {
|
|
59
|
+
disposeEffect(field.effect);
|
|
60
|
+
field.effect = undefined;
|
|
61
|
+
}
|
|
62
|
+
// The element it was set on, even if the anchor has been detached by now.
|
|
63
|
+
if (field.el) {
|
|
64
|
+
field.el.style.removeProperty(property);
|
|
65
|
+
field.el = undefined;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
addClaimableInitializer(context, function (value) {
|
|
69
|
+
const host = this;
|
|
70
|
+
host[slot] = new StyleField(host, value);
|
|
71
|
+
Object.defineProperty(host, name, descriptor);
|
|
72
|
+
host.onMount = onMount;
|
|
73
|
+
host.onUnmount = onUnmount;
|
|
74
|
+
});
|
|
75
|
+
};
|
|
48
76
|
}
|
|
49
77
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/decorators/styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/decorators/styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgBxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAsD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,UAAU,EACzC,UAAU,EAAE,UAAU,CAAC,GACtB,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAC/B,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,IAAI,GACrF,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,IAAI,CA2E7E"}
|