@tenphi/tasty 0.0.0-snapshot.056b911
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/LICENSE +21 -0
- package/README.md +635 -0
- package/dist/_virtual/_rolldown/runtime.js +7 -0
- package/dist/chunks/cacheKey.d.ts +1 -0
- package/dist/chunks/cacheKey.js +77 -0
- package/dist/chunks/cacheKey.js.map +1 -0
- package/dist/chunks/definitions.d.ts +37 -0
- package/dist/chunks/definitions.js +258 -0
- package/dist/chunks/definitions.js.map +1 -0
- package/dist/chunks/index.d.ts +1 -0
- package/dist/chunks/renderChunk.d.ts +1 -0
- package/dist/chunks/renderChunk.js +59 -0
- package/dist/chunks/renderChunk.js.map +1 -0
- package/dist/compute-styles.d.ts +31 -0
- package/dist/compute-styles.js +335 -0
- package/dist/compute-styles.js.map +1 -0
- package/dist/config.d.ts +409 -0
- package/dist/config.js +584 -0
- package/dist/config.js.map +1 -0
- package/dist/core/index.d.ts +34 -0
- package/dist/core/index.js +27 -0
- package/dist/counter-style/index.js +51 -0
- package/dist/counter-style/index.js.map +1 -0
- package/dist/debug.d.ts +89 -0
- package/dist/debug.js +453 -0
- package/dist/debug.js.map +1 -0
- package/dist/font-face/index.js +63 -0
- package/dist/font-face/index.js.map +1 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/useCounterStyle.d.ts +36 -0
- package/dist/hooks/useCounterStyle.js +64 -0
- package/dist/hooks/useCounterStyle.js.map +1 -0
- package/dist/hooks/useFontFace.d.ts +45 -0
- package/dist/hooks/useFontFace.js +66 -0
- package/dist/hooks/useFontFace.js.map +1 -0
- package/dist/hooks/useGlobalStyles.d.ts +46 -0
- package/dist/hooks/useGlobalStyles.js +88 -0
- package/dist/hooks/useGlobalStyles.js.map +1 -0
- package/dist/hooks/useKeyframes.d.ts +58 -0
- package/dist/hooks/useKeyframes.js +54 -0
- package/dist/hooks/useKeyframes.js.map +1 -0
- package/dist/hooks/useProperty.d.ts +81 -0
- package/dist/hooks/useProperty.js +96 -0
- package/dist/hooks/useProperty.js.map +1 -0
- package/dist/hooks/useRawCSS.d.ts +22 -0
- package/dist/hooks/useRawCSS.js +103 -0
- package/dist/hooks/useRawCSS.js.map +1 -0
- package/dist/hooks/useStyles.d.ts +40 -0
- package/dist/hooks/useStyles.js +31 -0
- package/dist/hooks/useStyles.js.map +1 -0
- package/dist/index.d.ts +51 -0
- package/dist/index.js +36 -0
- package/dist/injector/index.d.ts +182 -0
- package/dist/injector/index.js +185 -0
- package/dist/injector/index.js.map +1 -0
- package/dist/injector/injector.d.ts +193 -0
- package/dist/injector/injector.js +564 -0
- package/dist/injector/injector.js.map +1 -0
- package/dist/injector/sheet-manager.d.ts +132 -0
- package/dist/injector/sheet-manager.js +698 -0
- package/dist/injector/sheet-manager.js.map +1 -0
- package/dist/injector/types.d.ts +228 -0
- package/dist/keyframes/index.js +206 -0
- package/dist/keyframes/index.js.map +1 -0
- package/dist/parser/classify.js +319 -0
- package/dist/parser/classify.js.map +1 -0
- package/dist/parser/const.js +60 -0
- package/dist/parser/const.js.map +1 -0
- package/dist/parser/lru.js +109 -0
- package/dist/parser/lru.js.map +1 -0
- package/dist/parser/parser.d.ts +25 -0
- package/dist/parser/parser.js +115 -0
- package/dist/parser/parser.js.map +1 -0
- package/dist/parser/tokenizer.js +69 -0
- package/dist/parser/tokenizer.js.map +1 -0
- package/dist/parser/types.d.ts +51 -0
- package/dist/parser/types.js +46 -0
- package/dist/parser/types.js.map +1 -0
- package/dist/pipeline/conditions.d.ts +134 -0
- package/dist/pipeline/conditions.js +406 -0
- package/dist/pipeline/conditions.js.map +1 -0
- package/dist/pipeline/exclusive.js +230 -0
- package/dist/pipeline/exclusive.js.map +1 -0
- package/dist/pipeline/index.d.ts +55 -0
- package/dist/pipeline/index.js +708 -0
- package/dist/pipeline/index.js.map +1 -0
- package/dist/pipeline/materialize.js +1103 -0
- package/dist/pipeline/materialize.js.map +1 -0
- package/dist/pipeline/parseStateKey.d.ts +15 -0
- package/dist/pipeline/parseStateKey.js +446 -0
- package/dist/pipeline/parseStateKey.js.map +1 -0
- package/dist/pipeline/simplify.js +515 -0
- package/dist/pipeline/simplify.js.map +1 -0
- package/dist/pipeline/warnings.js +18 -0
- package/dist/pipeline/warnings.js.map +1 -0
- package/dist/plugins/index.d.ts +2 -0
- package/dist/plugins/okhsl-plugin.d.ts +35 -0
- package/dist/plugins/okhsl-plugin.js +97 -0
- package/dist/plugins/okhsl-plugin.js.map +1 -0
- package/dist/plugins/types.d.ts +87 -0
- package/dist/properties/index.js +222 -0
- package/dist/properties/index.js.map +1 -0
- package/dist/properties/property-type-resolver.d.ts +24 -0
- package/dist/properties/property-type-resolver.js +90 -0
- package/dist/properties/property-type-resolver.js.map +1 -0
- package/dist/rsc-cache.js +81 -0
- package/dist/rsc-cache.js.map +1 -0
- package/dist/ssr/astro-client.d.ts +1 -0
- package/dist/ssr/astro-client.js +24 -0
- package/dist/ssr/astro-client.js.map +1 -0
- package/dist/ssr/astro-middleware.d.ts +15 -0
- package/dist/ssr/astro-middleware.js +19 -0
- package/dist/ssr/astro-middleware.js.map +1 -0
- package/dist/ssr/astro.d.ts +106 -0
- package/dist/ssr/astro.js +149 -0
- package/dist/ssr/astro.js.map +1 -0
- package/dist/ssr/async-storage.d.ts +17 -0
- package/dist/ssr/async-storage.js +44 -0
- package/dist/ssr/async-storage.js.map +1 -0
- package/dist/ssr/collect-auto-properties.js +58 -0
- package/dist/ssr/collect-auto-properties.js.map +1 -0
- package/dist/ssr/collector.d.ts +102 -0
- package/dist/ssr/collector.js +227 -0
- package/dist/ssr/collector.js.map +1 -0
- package/dist/ssr/context.js +16 -0
- package/dist/ssr/context.js.map +1 -0
- package/dist/ssr/format-global-rules.js +22 -0
- package/dist/ssr/format-global-rules.js.map +1 -0
- package/dist/ssr/format-keyframes.js +69 -0
- package/dist/ssr/format-keyframes.js.map +1 -0
- package/dist/ssr/format-property.js +49 -0
- package/dist/ssr/format-property.js.map +1 -0
- package/dist/ssr/format-rules.js +73 -0
- package/dist/ssr/format-rules.js.map +1 -0
- package/dist/ssr/hydrate.d.ts +22 -0
- package/dist/ssr/hydrate.js +49 -0
- package/dist/ssr/hydrate.js.map +1 -0
- package/dist/ssr/index.d.ts +4 -0
- package/dist/ssr/index.js +10 -0
- package/dist/ssr/index.js.map +1 -0
- package/dist/ssr/next.d.ts +45 -0
- package/dist/ssr/next.js +75 -0
- package/dist/ssr/next.js.map +1 -0
- package/dist/ssr/ssr-collector-ref.js +29 -0
- package/dist/ssr/ssr-collector-ref.js.map +1 -0
- package/dist/states/index.d.ts +49 -0
- package/dist/states/index.js +170 -0
- package/dist/states/index.js.map +1 -0
- package/dist/static/index.d.ts +5 -0
- package/dist/static/index.js +4 -0
- package/dist/static/inject.d.ts +5 -0
- package/dist/static/inject.js +17 -0
- package/dist/static/inject.js.map +1 -0
- package/dist/static/tastyStatic.d.ts +46 -0
- package/dist/static/tastyStatic.js +30 -0
- package/dist/static/tastyStatic.js.map +1 -0
- package/dist/static/types.d.ts +49 -0
- package/dist/static/types.js +24 -0
- package/dist/static/types.js.map +1 -0
- package/dist/styles/border.d.ts +25 -0
- package/dist/styles/border.js +120 -0
- package/dist/styles/border.js.map +1 -0
- package/dist/styles/color.d.ts +14 -0
- package/dist/styles/color.js +26 -0
- package/dist/styles/color.js.map +1 -0
- package/dist/styles/const.js +17 -0
- package/dist/styles/const.js.map +1 -0
- package/dist/styles/createStyle.js +79 -0
- package/dist/styles/createStyle.js.map +1 -0
- package/dist/styles/dimension.js +109 -0
- package/dist/styles/dimension.js.map +1 -0
- package/dist/styles/directional.js +133 -0
- package/dist/styles/directional.js.map +1 -0
- package/dist/styles/display.d.ts +30 -0
- package/dist/styles/display.js +73 -0
- package/dist/styles/display.js.map +1 -0
- package/dist/styles/fade.d.ts +15 -0
- package/dist/styles/fade.js +62 -0
- package/dist/styles/fade.js.map +1 -0
- package/dist/styles/fill.d.ts +42 -0
- package/dist/styles/fill.js +51 -0
- package/dist/styles/fill.js.map +1 -0
- package/dist/styles/flow.d.ts +16 -0
- package/dist/styles/flow.js +12 -0
- package/dist/styles/flow.js.map +1 -0
- package/dist/styles/gap.d.ts +31 -0
- package/dist/styles/gap.js +38 -0
- package/dist/styles/gap.js.map +1 -0
- package/dist/styles/height.d.ts +17 -0
- package/dist/styles/height.js +19 -0
- package/dist/styles/height.js.map +1 -0
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.js +8 -0
- package/dist/styles/index.js.map +1 -0
- package/dist/styles/inset.d.ts +24 -0
- package/dist/styles/inset.js +34 -0
- package/dist/styles/inset.js.map +1 -0
- package/dist/styles/list.d.ts +16 -0
- package/dist/styles/list.js +100 -0
- package/dist/styles/list.js.map +1 -0
- package/dist/styles/margin.d.ts +24 -0
- package/dist/styles/margin.js +32 -0
- package/dist/styles/margin.js.map +1 -0
- package/dist/styles/outline.d.ts +29 -0
- package/dist/styles/outline.js +55 -0
- package/dist/styles/outline.js.map +1 -0
- package/dist/styles/padding.d.ts +24 -0
- package/dist/styles/padding.js +32 -0
- package/dist/styles/padding.js.map +1 -0
- package/dist/styles/placement.d.ts +37 -0
- package/dist/styles/placement.js +74 -0
- package/dist/styles/placement.js.map +1 -0
- package/dist/styles/predefined.d.ts +71 -0
- package/dist/styles/predefined.js +237 -0
- package/dist/styles/predefined.js.map +1 -0
- package/dist/styles/preset.d.ts +52 -0
- package/dist/styles/preset.js +127 -0
- package/dist/styles/preset.js.map +1 -0
- package/dist/styles/radius.d.ts +12 -0
- package/dist/styles/radius.js +83 -0
- package/dist/styles/radius.js.map +1 -0
- package/dist/styles/scrollMargin.d.ts +24 -0
- package/dist/styles/scrollMargin.js +32 -0
- package/dist/styles/scrollMargin.js.map +1 -0
- package/dist/styles/scrollbar.d.ts +25 -0
- package/dist/styles/scrollbar.js +51 -0
- package/dist/styles/scrollbar.js.map +1 -0
- package/dist/styles/shadow.d.ts +14 -0
- package/dist/styles/shadow.js +25 -0
- package/dist/styles/shadow.js.map +1 -0
- package/dist/styles/shared.js +17 -0
- package/dist/styles/shared.js.map +1 -0
- package/dist/styles/transition.d.ts +14 -0
- package/dist/styles/transition.js +159 -0
- package/dist/styles/transition.js.map +1 -0
- package/dist/styles/types.d.ts +564 -0
- package/dist/styles/width.d.ts +17 -0
- package/dist/styles/width.js +19 -0
- package/dist/styles/width.js.map +1 -0
- package/dist/tasty.d.ts +134 -0
- package/dist/tasty.js +243 -0
- package/dist/tasty.js.map +1 -0
- package/dist/types.d.ts +184 -0
- package/dist/utils/cache-wrapper.js +21 -0
- package/dist/utils/cache-wrapper.js.map +1 -0
- package/dist/utils/case-converter.js +8 -0
- package/dist/utils/case-converter.js.map +1 -0
- package/dist/utils/color-math.d.ts +46 -0
- package/dist/utils/color-math.js +749 -0
- package/dist/utils/color-math.js.map +1 -0
- package/dist/utils/color-space.d.ts +5 -0
- package/dist/utils/color-space.js +228 -0
- package/dist/utils/color-space.js.map +1 -0
- package/dist/utils/colors.d.ts +5 -0
- package/dist/utils/colors.js +10 -0
- package/dist/utils/colors.js.map +1 -0
- package/dist/utils/css-types.d.ts +7 -0
- package/dist/utils/deps-equal.js +15 -0
- package/dist/utils/deps-equal.js.map +1 -0
- package/dist/utils/dotize.d.ts +26 -0
- package/dist/utils/dotize.js +122 -0
- package/dist/utils/dotize.js.map +1 -0
- package/dist/utils/filter-base-props.d.ts +15 -0
- package/dist/utils/filter-base-props.js +45 -0
- package/dist/utils/filter-base-props.js.map +1 -0
- package/dist/utils/get-display-name.d.ts +7 -0
- package/dist/utils/get-display-name.js +10 -0
- package/dist/utils/get-display-name.js.map +1 -0
- package/dist/utils/has-keys.js +13 -0
- package/dist/utils/has-keys.js.map +1 -0
- package/dist/utils/hash.js +14 -0
- package/dist/utils/hash.js.map +1 -0
- package/dist/utils/is-dev-env.js +19 -0
- package/dist/utils/is-dev-env.js.map +1 -0
- package/dist/utils/is-valid-element-type.js +15 -0
- package/dist/utils/is-valid-element-type.js.map +1 -0
- package/dist/utils/merge-styles.d.ts +7 -0
- package/dist/utils/merge-styles.js +145 -0
- package/dist/utils/merge-styles.js.map +1 -0
- package/dist/utils/mod-attrs.d.ts +6 -0
- package/dist/utils/mod-attrs.js +20 -0
- package/dist/utils/mod-attrs.js.map +1 -0
- package/dist/utils/process-tokens.d.ts +17 -0
- package/dist/utils/process-tokens.js +83 -0
- package/dist/utils/process-tokens.js.map +1 -0
- package/dist/utils/resolve-recipes.d.ts +17 -0
- package/dist/utils/resolve-recipes.js +146 -0
- package/dist/utils/resolve-recipes.js.map +1 -0
- package/dist/utils/selector-transform.js +32 -0
- package/dist/utils/selector-transform.js.map +1 -0
- package/dist/utils/string.js +8 -0
- package/dist/utils/string.js.map +1 -0
- package/dist/utils/styles.d.ts +99 -0
- package/dist/utils/styles.js +220 -0
- package/dist/utils/styles.js.map +1 -0
- package/dist/utils/typography.d.ts +58 -0
- package/dist/utils/typography.js +51 -0
- package/dist/utils/typography.js.map +1 -0
- package/dist/utils/warnings.d.ts +16 -0
- package/dist/utils/warnings.js +16 -0
- package/dist/utils/warnings.js.map +1 -0
- package/dist/zero/babel.d.ts +195 -0
- package/dist/zero/babel.js +456 -0
- package/dist/zero/babel.js.map +1 -0
- package/dist/zero/css-writer.d.ts +45 -0
- package/dist/zero/css-writer.js +73 -0
- package/dist/zero/css-writer.js.map +1 -0
- package/dist/zero/extractor.d.ts +24 -0
- package/dist/zero/extractor.js +266 -0
- package/dist/zero/extractor.js.map +1 -0
- package/dist/zero/index.d.ts +3 -0
- package/dist/zero/index.js +3 -0
- package/dist/zero/next.d.ts +86 -0
- package/dist/zero/next.js +143 -0
- package/dist/zero/next.js.map +1 -0
- package/docs/PIPELINE.md +519 -0
- package/docs/README.md +31 -0
- package/docs/adoption.md +298 -0
- package/docs/comparison.md +419 -0
- package/docs/configuration.md +389 -0
- package/docs/debug.md +318 -0
- package/docs/design-system.md +436 -0
- package/docs/dsl.md +688 -0
- package/docs/getting-started.md +217 -0
- package/docs/injector.md +544 -0
- package/docs/methodology.md +616 -0
- package/docs/react-api.md +557 -0
- package/docs/ssr.md +440 -0
- package/docs/styles.md +596 -0
- package/docs/tasty-static.md +532 -0
- package/package.json +221 -0
- package/tasty.config.ts +14 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
//#region src/hooks/useRawCSS.d.ts
|
|
2
|
+
interface UseRawCSSOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Shadow root or document to inject into.
|
|
5
|
+
* Note: `root` is not part of the update-tracking comparison — changing
|
|
6
|
+
* only the root for the same id/content will not re-inject.
|
|
7
|
+
*/
|
|
8
|
+
root?: Document | ShadowRoot;
|
|
9
|
+
/**
|
|
10
|
+
* Stable identifier for update tracking (client-only). When provided,
|
|
11
|
+
* changing the CSS content will dispose the previous injection and inject
|
|
12
|
+
* the new one. Without an id, deduplication is purely content-based (same
|
|
13
|
+
* CSS is injected only once). In RSC mode, renders are single-pass so
|
|
14
|
+
* update tracking does not apply.
|
|
15
|
+
*/
|
|
16
|
+
id?: string;
|
|
17
|
+
}
|
|
18
|
+
declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
|
|
19
|
+
declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { useRawCSS };
|
|
22
|
+
//# sourceMappingURL=useRawCSS.d.ts.map
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { injectRawCSS } from "../injector/index.js";
|
|
2
|
+
import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
|
|
3
|
+
import { hashString } from "../utils/hash.js";
|
|
4
|
+
import { depsEqual } from "../utils/deps-equal.js";
|
|
5
|
+
//#region src/hooks/useRawCSS.ts
|
|
6
|
+
const clientEntries = /* @__PURE__ */ new Map();
|
|
7
|
+
const clientContentDedup = /* @__PURE__ */ new Set();
|
|
8
|
+
const factoryDepsCache = /* @__PURE__ */ new Map();
|
|
9
|
+
/**
|
|
10
|
+
* Inject raw CSS text directly without parsing.
|
|
11
|
+
* This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
|
|
12
|
+
*
|
|
13
|
+
* The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
|
|
14
|
+
* with tasty's chunked style sheets.
|
|
15
|
+
*
|
|
16
|
+
* Works in all environments: client, SSR with collector, and React Server Components.
|
|
17
|
+
*
|
|
18
|
+
* Injected styles are permanent — they are not cleaned up on component unmount.
|
|
19
|
+
* Use the `id` option for update tracking when styles change over the
|
|
20
|
+
* component lifecycle.
|
|
21
|
+
*
|
|
22
|
+
* @example Static CSS string
|
|
23
|
+
* ```tsx
|
|
24
|
+
* function GlobalStyles() {
|
|
25
|
+
* useRawCSS(`
|
|
26
|
+
* body {
|
|
27
|
+
* margin: 0;
|
|
28
|
+
* padding: 0;
|
|
29
|
+
* font-family: sans-serif;
|
|
30
|
+
* }
|
|
31
|
+
* `);
|
|
32
|
+
*
|
|
33
|
+
* return null;
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @example Factory function with dependencies
|
|
38
|
+
* ```tsx
|
|
39
|
+
* function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
|
|
40
|
+
* useRawCSS(() => `
|
|
41
|
+
* :root {
|
|
42
|
+
* --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
|
|
43
|
+
* --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
|
|
44
|
+
* }
|
|
45
|
+
* `, [theme], { id: 'theme-vars' });
|
|
46
|
+
*
|
|
47
|
+
* return null;
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*
|
|
51
|
+
* @example With options
|
|
52
|
+
* ```tsx
|
|
53
|
+
* function ShadowStyles({ shadowRoot }) {
|
|
54
|
+
* useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
|
|
55
|
+
* return null;
|
|
56
|
+
* }
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
function useRawCSS(cssOrFactory, depsOrOptions, options) {
|
|
60
|
+
const isFactory = typeof cssOrFactory === "function";
|
|
61
|
+
const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
|
|
62
|
+
const opts = isFactory ? options : depsOrOptions;
|
|
63
|
+
const target = getStyleTarget();
|
|
64
|
+
if (isFactory && deps && opts?.id && target.mode === "client") {
|
|
65
|
+
const cachedDeps = factoryDepsCache.get(opts.id);
|
|
66
|
+
if (cachedDeps && depsEqual(cachedDeps, deps)) return;
|
|
67
|
+
}
|
|
68
|
+
const css = isFactory ? cssOrFactory() : cssOrFactory;
|
|
69
|
+
if (!css.trim()) return;
|
|
70
|
+
if (target.mode === "ssr") {
|
|
71
|
+
const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;
|
|
72
|
+
target.collector.collectRawCSS(key, css);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (target.mode === "rsc") {
|
|
76
|
+
const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;
|
|
77
|
+
pushRSCCSS(target.cache, key, css);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
const id = opts?.id;
|
|
81
|
+
if (id) {
|
|
82
|
+
const existing = clientEntries.get(id);
|
|
83
|
+
if (existing) {
|
|
84
|
+
if (existing.contentKey === css) return;
|
|
85
|
+
existing.dispose();
|
|
86
|
+
}
|
|
87
|
+
const { dispose } = injectRawCSS(css, opts);
|
|
88
|
+
clientEntries.set(id, {
|
|
89
|
+
contentKey: css,
|
|
90
|
+
dispose
|
|
91
|
+
});
|
|
92
|
+
if (deps) factoryDepsCache.set(id, deps);
|
|
93
|
+
} else {
|
|
94
|
+
const contentKey = hashString(css);
|
|
95
|
+
if (clientContentDedup.has(contentKey)) return;
|
|
96
|
+
clientContentDedup.add(contentKey);
|
|
97
|
+
injectRawCSS(css, opts);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
//#endregion
|
|
101
|
+
export { useRawCSS };
|
|
102
|
+
|
|
103
|
+
//# sourceMappingURL=useRawCSS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { injectRawCSS } from '../injector';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { depsEqual } from '../utils/deps-equal';\nimport { hashString } from '../utils/hash';\n\ninterface UseRawCSSOptions {\n /**\n * Shadow root or document to inject into.\n * Note: `root` is not part of the update-tracking comparison — changing\n * only the root for the same id/content will not re-inject.\n */\n root?: Document | ShadowRoot;\n /**\n * Stable identifier for update tracking (client-only). When provided,\n * changing the CSS content will dispose the previous injection and inject\n * the new one. Without an id, deduplication is purely content-based (same\n * CSS is injected only once). In RSC mode, renders are single-pass so\n * update tracking does not apply.\n */\n id?: string;\n}\n\ninterface ClientEntry {\n contentKey: string;\n dispose: () => void;\n}\n\nconst clientEntries = new Map<string, ClientEntry>();\nconst clientContentDedup = new Set<string>();\nconst factoryDepsCache = new Map<string, readonly unknown[]>();\n\n/* @internal — used only for tests */\nexport function _resetRawCSSCache(): void {\n clientEntries.clear();\n clientContentDedup.clear();\n factoryDepsCache.clear();\n}\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n factory: () => string,\n deps: readonly unknown[],\n options?: UseRawCSSOptions,\n): void;\n\n/**\n * Inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * Injected styles are permanent — they are not cleaned up on component unmount.\n * Use the `id` option for update tracking when styles change over the\n * component lifecycle.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n * useRawCSS(`\n * body {\n * margin: 0;\n * padding: 0;\n * font-family: sans-serif;\n * }\n * `);\n *\n * return null;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n * useRawCSS(() => `\n * :root {\n * --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n * --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n * }\n * `, [theme], { id: 'theme-vars' });\n *\n * return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n * useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n * return null;\n * }\n * ```\n */\nexport function useRawCSS(\n cssOrFactory: string | (() => string),\n depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n options?: UseRawCSSOptions,\n): void {\n const isFactory = typeof cssOrFactory === 'function';\n\n const deps =\n isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n const opts = isFactory\n ? options\n : (depsOrOptions as UseRawCSSOptions | undefined);\n\n const target = getStyleTarget();\n\n // Client deps cache: skip factory re-evaluation when deps haven't changed\n if (isFactory && deps && opts?.id && target.mode === 'client') {\n const cachedDeps = factoryDepsCache.get(opts.id);\n if (cachedDeps && depsEqual(cachedDeps, deps)) {\n return;\n }\n }\n\n const css = isFactory\n ? (cssOrFactory as () => string)()\n : (cssOrFactory as string);\n\n if (!css.trim()) return;\n\n if (target.mode === 'ssr') {\n const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;\n target.collector.collectRawCSS(key, css);\n return;\n }\n\n if (target.mode === 'rsc') {\n const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;\n pushRSCCSS(target.cache, key, css);\n return;\n }\n\n // Client path\n const id = opts?.id;\n\n if (id) {\n const existing = clientEntries.get(id);\n if (existing) {\n if (existing.contentKey === css) return;\n existing.dispose();\n }\n\n const { dispose } = injectRawCSS(css, opts);\n clientEntries.set(id, { contentKey: css, dispose });\n if (deps) factoryDepsCache.set(id, deps);\n } else {\n const contentKey = hashString(css);\n if (clientContentDedup.has(contentKey)) return;\n clientContentDedup.add(contentKey);\n injectRawCSS(css, opts);\n }\n}\n"],"mappings":";;;;;AA2BA,MAAM,gCAAgB,IAAI,KAA0B;AACpD,MAAM,qCAAqB,IAAI,KAAa;AAC5C,MAAM,mCAAmB,IAAI,KAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqE9D,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,YAAY,OAAO,iBAAiB;CAE1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAEL,MAAM,SAAS,gBAAgB;AAG/B,KAAI,aAAa,QAAQ,MAAM,MAAM,OAAO,SAAS,UAAU;EAC7D,MAAM,aAAa,iBAAiB,IAAI,KAAK,GAAG;AAChD,MAAI,cAAc,UAAU,YAAY,KAAK,CAC3C;;CAIJ,MAAM,MAAM,YACP,cAA+B,GAC/B;AAEL,KAAI,CAAC,IAAI,MAAM,CAAE;AAEjB,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,OAAO,KAAK,OAAO,OAAO,WAAW,IAAI;AAChE,SAAO,UAAU,cAAc,KAAK,IAAI;AACxC;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,SAAS,KAAK,OAAO,SAAS,WAAW,IAAI;AACpE,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC;;CAIF,MAAM,KAAK,MAAM;AAEjB,KAAI,IAAI;EACN,MAAM,WAAW,cAAc,IAAI,GAAG;AACtC,MAAI,UAAU;AACZ,OAAI,SAAS,eAAe,IAAK;AACjC,YAAS,SAAS;;EAGpB,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,gBAAc,IAAI,IAAI;GAAE,YAAY;GAAK;GAAS,CAAC;AACnD,MAAI,KAAM,kBAAiB,IAAI,IAAI,KAAK;QACnC;EACL,MAAM,aAAa,WAAW,IAAI;AAClC,MAAI,mBAAmB,IAAI,WAAW,CAAE;AACxC,qBAAmB,IAAI,WAAW;AAClC,eAAa,KAAK,KAAK"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Styles } from "../styles/types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/useStyles.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Tasty styles object to generate CSS classes for.
|
|
6
|
+
* Can be undefined or empty object for no styles.
|
|
7
|
+
*/
|
|
8
|
+
type UseStylesOptions = Styles | undefined;
|
|
9
|
+
interface UseStylesResult {
|
|
10
|
+
/**
|
|
11
|
+
* Generated className(s) to apply to the element.
|
|
12
|
+
* Can be empty string if no styles are provided.
|
|
13
|
+
* With chunking enabled, may contain multiple space-separated class names.
|
|
14
|
+
*/
|
|
15
|
+
className: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Hook to generate CSS classes from Tasty styles.
|
|
19
|
+
* Thin wrapper around `computeStyles()` that adds React context-based
|
|
20
|
+
* SSR collector discovery for backward compatibility with TastyRegistry.
|
|
21
|
+
*
|
|
22
|
+
* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* function MyComponent() {
|
|
27
|
+
* const { className } = useStyles({
|
|
28
|
+
* padding: '2x',
|
|
29
|
+
* fill: '#purple',
|
|
30
|
+
* radius: '1r',
|
|
31
|
+
* });
|
|
32
|
+
*
|
|
33
|
+
* return <div className={className}>Styled content</div>;
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare function useStyles(styles: UseStylesOptions): UseStylesResult;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { UseStylesOptions, UseStylesResult, useStyles };
|
|
40
|
+
//# sourceMappingURL=useStyles.d.ts.map
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { computeStyles } from "../compute-styles.js";
|
|
2
|
+
import { TastySSRContext } from "../ssr/context.js";
|
|
3
|
+
import { useContext } from "react";
|
|
4
|
+
//#region src/hooks/useStyles.ts
|
|
5
|
+
/**
|
|
6
|
+
* Hook to generate CSS classes from Tasty styles.
|
|
7
|
+
* Thin wrapper around `computeStyles()` that adds React context-based
|
|
8
|
+
* SSR collector discovery for backward compatibility with TastyRegistry.
|
|
9
|
+
*
|
|
10
|
+
* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* function MyComponent() {
|
|
15
|
+
* const { className } = useStyles({
|
|
16
|
+
* padding: '2x',
|
|
17
|
+
* fill: '#purple',
|
|
18
|
+
* radius: '1r',
|
|
19
|
+
* });
|
|
20
|
+
*
|
|
21
|
+
* return <div className={className}>Styled content</div>;
|
|
22
|
+
* }
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
function useStyles(styles) {
|
|
26
|
+
return computeStyles(styles, { ssrCollector: useContext(TastySSRContext) });
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { useStyles };
|
|
30
|
+
|
|
31
|
+
//# sourceMappingURL=useStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { computeStyles } from '../compute-styles';\nimport { TastySSRContext } from '../ssr/context';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n /**\n * Generated className(s) to apply to the element.\n * Can be empty string if no styles are provided.\n * With chunking enabled, may contain multiple space-separated class names.\n */\n className: string;\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Thin wrapper around `computeStyles()` that adds React context-based\n * SSR collector discovery for backward compatibility with TastyRegistry.\n *\n * For hook-free usage (e.g. in server components), use `computeStyles()` directly.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { className } = useStyles({\n * padding: '2x',\n * fill: '#purple',\n * radius: '1r',\n * });\n *\n * return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n return computeStyles(styles, { ssrCollector: useContext(TastySSRContext) });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,QAAQ,EAAE,cAAc,WAAW,gBAAgB,EAAE,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./injector/types.js";
|
|
2
|
+
import { CSSProperties } from "./utils/css-types.js";
|
|
3
|
+
import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./parser/types.js";
|
|
4
|
+
import { StyleParser } from "./parser/parser.js";
|
|
5
|
+
import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, hslToRgbValues, strToRgb } from "./utils/color-math.js";
|
|
6
|
+
import { CSSMap, CUSTOM_UNITS, DIRECTIONS, ParsedColor, RawStyleHandler, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleValue, StyleValueStateMap, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles } from "./utils/styles.js";
|
|
7
|
+
import { ConfigTokenValue, ConfigTokens, NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
|
|
8
|
+
import { ConditionNode } from "./pipeline/conditions.js";
|
|
9
|
+
import { AtRuleContext, ParsedAdvancedState, StateParserContext, createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
|
|
10
|
+
import { ParseStateKeyOptions, parseStateKey } from "./pipeline/parseStateKey.js";
|
|
11
|
+
import { RenderResult, StyleResult, isSelector, renderStyles } from "./pipeline/index.js";
|
|
12
|
+
import { SheetManager } from "./injector/sheet-manager.js";
|
|
13
|
+
import { StyleInjector } from "./injector/injector.js";
|
|
14
|
+
import { ColorSpace } from "./utils/color-space.js";
|
|
15
|
+
import { TypographyPreset, TypographyTokenValue, generateTypographyTokens } from "./utils/typography.js";
|
|
16
|
+
import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
|
|
17
|
+
import { TastyConfig, configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
|
|
18
|
+
import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
|
|
19
|
+
import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
|
|
20
|
+
import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
|
|
21
|
+
import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
|
|
22
|
+
import { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, ResolveTokenProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, TokenPropsInput, VariantMap, WithVariant, tasty } from "./tasty.js";
|
|
23
|
+
import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
|
|
24
|
+
import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
|
|
25
|
+
import { useRawCSS } from "./hooks/useRawCSS.js";
|
|
26
|
+
import { useKeyframes } from "./hooks/useKeyframes.js";
|
|
27
|
+
import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
|
|
28
|
+
import { useFontFace } from "./hooks/useFontFace.js";
|
|
29
|
+
import { useCounterStyle } from "./hooks/useCounterStyle.js";
|
|
30
|
+
import { getDisplayName } from "./utils/get-display-name.js";
|
|
31
|
+
import { styleHandlers } from "./styles/predefined.js";
|
|
32
|
+
import { ComputeStylesOptions, ComputeStylesResult, computeStyles } from "./compute-styles.js";
|
|
33
|
+
import { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch } from "./injector/index.js";
|
|
34
|
+
import { filterBaseProps } from "./utils/filter-base-props.js";
|
|
35
|
+
import { color } from "./utils/colors.js";
|
|
36
|
+
import { _modAttrs } from "./utils/mod-attrs.js";
|
|
37
|
+
import { dotize } from "./utils/dotize.js";
|
|
38
|
+
import { mergeStyles } from "./utils/merge-styles.js";
|
|
39
|
+
import { resolveRecipes } from "./utils/resolve-recipes.js";
|
|
40
|
+
import { deprecationWarning, warn } from "./utils/warnings.js";
|
|
41
|
+
import { processTokens } from "./utils/process-tokens.js";
|
|
42
|
+
import { tastyDebug } from "./debug.js";
|
|
43
|
+
import { CSSProperties as CSSProperties$1 } from "react";
|
|
44
|
+
|
|
45
|
+
//#region src/index.d.ts
|
|
46
|
+
declare module './utils/css-types' {
|
|
47
|
+
interface CSSProperties extends CSSProperties$1 {}
|
|
48
|
+
}
|
|
49
|
+
//#endregion
|
|
50
|
+
export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorSpace, ColorStyleProps, ComputeStylesOptions, ComputeStylesResult, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, CounterStyleDescriptors, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModPropDef, type ModPropsInput, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleUsage, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, type TokenPropsInput, TokenValue, Tokens, TypographyPreset, TypographyTokenValue, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
|
|
51
|
+
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, hslToRgbValues, strToRgb } from "./utils/color-math.js";
|
|
2
|
+
import { Bucket } from "./parser/types.js";
|
|
3
|
+
import { StyleParser } from "./parser/parser.js";
|
|
4
|
+
import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
|
|
5
|
+
import { CUSTOM_UNITS, DIRECTIONS, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles } from "./utils/styles.js";
|
|
6
|
+
import { deprecationWarning, warn } from "./utils/warnings.js";
|
|
7
|
+
import { styleHandlers } from "./styles/predefined.js";
|
|
8
|
+
import { SheetManager } from "./injector/sheet-manager.js";
|
|
9
|
+
import { StyleInjector } from "./injector/injector.js";
|
|
10
|
+
import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
|
|
11
|
+
import { parseStateKey } from "./pipeline/parseStateKey.js";
|
|
12
|
+
import { isSelector, renderStyles } from "./pipeline/index.js";
|
|
13
|
+
import { generateTypographyTokens } from "./utils/typography.js";
|
|
14
|
+
import { configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
|
|
15
|
+
import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
|
|
16
|
+
import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
|
|
17
|
+
import { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch } from "./injector/index.js";
|
|
18
|
+
import { mergeStyles } from "./utils/merge-styles.js";
|
|
19
|
+
import { resolveRecipes } from "./utils/resolve-recipes.js";
|
|
20
|
+
import { computeStyles } from "./compute-styles.js";
|
|
21
|
+
import { filterBaseProps } from "./utils/filter-base-props.js";
|
|
22
|
+
import { color } from "./utils/colors.js";
|
|
23
|
+
import { _modAttrs } from "./utils/mod-attrs.js";
|
|
24
|
+
import { dotize } from "./utils/dotize.js";
|
|
25
|
+
import { processTokens } from "./utils/process-tokens.js";
|
|
26
|
+
import { tastyDebug } from "./debug.js";
|
|
27
|
+
import { getDisplayName } from "./utils/get-display-name.js";
|
|
28
|
+
import { Element, tasty } from "./tasty.js";
|
|
29
|
+
import { useStyles } from "./hooks/useStyles.js";
|
|
30
|
+
import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
|
|
31
|
+
import { useRawCSS } from "./hooks/useRawCSS.js";
|
|
32
|
+
import { useKeyframes } from "./hooks/useKeyframes.js";
|
|
33
|
+
import { useProperty } from "./hooks/useProperty.js";
|
|
34
|
+
import { useFontFace } from "./hooks/useFontFace.js";
|
|
35
|
+
import { useCounterStyle } from "./hooks/useCounterStyle.js";
|
|
36
|
+
export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./types.js";
|
|
2
|
+
import { StyleResult } from "../pipeline/index.js";
|
|
3
|
+
import { SheetManager } from "./sheet-manager.js";
|
|
4
|
+
import { StyleInjector } from "./injector.js";
|
|
5
|
+
|
|
6
|
+
//#region src/injector/index.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Inject styles and return className with dispose function
|
|
9
|
+
*/
|
|
10
|
+
declare function inject(rules: StyleResult[], options?: {
|
|
11
|
+
root?: Document | ShadowRoot;
|
|
12
|
+
cacheKey?: string;
|
|
13
|
+
}): InjectResult;
|
|
14
|
+
/**
|
|
15
|
+
* Inject global rules that should not reserve tasty class names
|
|
16
|
+
*/
|
|
17
|
+
declare function injectGlobal(rules: StyleResult[], options?: {
|
|
18
|
+
root?: Document | ShadowRoot;
|
|
19
|
+
}): GlobalInjectResult;
|
|
20
|
+
/**
|
|
21
|
+
* Inject raw CSS text directly without parsing
|
|
22
|
+
* This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
|
|
23
|
+
* The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* // Inject raw CSS
|
|
28
|
+
* const { dispose } = injectRawCSS(`
|
|
29
|
+
* body { margin: 0; padding: 0; }
|
|
30
|
+
* .my-class { color: red; }
|
|
31
|
+
* `);
|
|
32
|
+
*
|
|
33
|
+
* // Later, remove the injected CSS
|
|
34
|
+
* dispose();
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare function injectRawCSS(css: string, options?: {
|
|
38
|
+
root?: Document | ShadowRoot;
|
|
39
|
+
}): {
|
|
40
|
+
dispose: () => void;
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Get raw CSS text for SSR
|
|
44
|
+
*/
|
|
45
|
+
declare function getRawCSSText(options?: {
|
|
46
|
+
root?: Document | ShadowRoot;
|
|
47
|
+
}): string;
|
|
48
|
+
/**
|
|
49
|
+
* Inject keyframes and return object with toString() and dispose()
|
|
50
|
+
*/
|
|
51
|
+
declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
|
|
52
|
+
root?: Document | ShadowRoot;
|
|
53
|
+
name?: string;
|
|
54
|
+
}): KeyframesResult;
|
|
55
|
+
interface PropertyOptions {
|
|
56
|
+
/**
|
|
57
|
+
* CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
|
|
58
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
|
|
59
|
+
*/
|
|
60
|
+
syntax?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Whether the property inherits from parent elements
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
65
|
+
inherits?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Initial value for the property
|
|
68
|
+
*/
|
|
69
|
+
initialValue?: string | number;
|
|
70
|
+
/**
|
|
71
|
+
* Shadow root or document to inject into
|
|
72
|
+
*/
|
|
73
|
+
root?: Document | ShadowRoot;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Define a CSS @property custom property.
|
|
77
|
+
* This enables advanced features like animating custom properties.
|
|
78
|
+
*
|
|
79
|
+
* Note: @property rules are global and persistent once defined.
|
|
80
|
+
* Re-registering the same property name is a no-op.
|
|
81
|
+
*
|
|
82
|
+
* @param name - The custom property name (must start with --)
|
|
83
|
+
* @param options - Property configuration
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```ts
|
|
87
|
+
* // Define a color property that can be animated
|
|
88
|
+
* property('--my-color', {
|
|
89
|
+
* syntax: '<color>',
|
|
90
|
+
* initialValue: 'red',
|
|
91
|
+
* });
|
|
92
|
+
*
|
|
93
|
+
* // Define an angle property
|
|
94
|
+
* property('--rotation', {
|
|
95
|
+
* syntax: '<angle>',
|
|
96
|
+
* inherits: false,
|
|
97
|
+
* initialValue: '0deg',
|
|
98
|
+
* });
|
|
99
|
+
* ```
|
|
100
|
+
*/
|
|
101
|
+
declare function property(name: string, options?: PropertyOptions): void;
|
|
102
|
+
/**
|
|
103
|
+
* Check if a CSS @property has already been defined
|
|
104
|
+
*
|
|
105
|
+
* @param name - The custom property name to check
|
|
106
|
+
* @param options - Options including root
|
|
107
|
+
*/
|
|
108
|
+
declare function isPropertyDefined(name: string, options?: {
|
|
109
|
+
root?: Document | ShadowRoot;
|
|
110
|
+
}): boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Inject a CSS @font-face rule.
|
|
113
|
+
*
|
|
114
|
+
* Permanent and global — no dispose or ref-counting.
|
|
115
|
+
* Deduplicates by content hash (family + descriptors).
|
|
116
|
+
*/
|
|
117
|
+
declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
|
|
118
|
+
root?: Document | ShadowRoot;
|
|
119
|
+
}): void;
|
|
120
|
+
/**
|
|
121
|
+
* Inject a CSS @counter-style rule.
|
|
122
|
+
*
|
|
123
|
+
* Permanent and global — no dispose or ref-counting.
|
|
124
|
+
* Deduplicates by name (first definition wins).
|
|
125
|
+
*/
|
|
126
|
+
declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
|
|
127
|
+
root?: Document | ShadowRoot;
|
|
128
|
+
}): void;
|
|
129
|
+
/**
|
|
130
|
+
* Get CSS text from all sheets (for SSR)
|
|
131
|
+
*/
|
|
132
|
+
declare function getCssText(options?: {
|
|
133
|
+
root?: Document | ShadowRoot;
|
|
134
|
+
}): string;
|
|
135
|
+
/**
|
|
136
|
+
* Collect only CSS used by a rendered subtree (like jest-styled-components).
|
|
137
|
+
* Pass the container returned by render(...).
|
|
138
|
+
*/
|
|
139
|
+
declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
|
|
140
|
+
root?: Document | ShadowRoot;
|
|
141
|
+
}): string;
|
|
142
|
+
/**
|
|
143
|
+
* Force cleanup of unused rules
|
|
144
|
+
*/
|
|
145
|
+
declare function cleanup(root?: Document | ShadowRoot): void;
|
|
146
|
+
/**
|
|
147
|
+
* Record a render-time usage hit for one or more classNames.
|
|
148
|
+
* Used internally by computeStyles and tasty() to track usage for GC.
|
|
149
|
+
* When the global touch counter reaches `touchInterval`, schedules GC.
|
|
150
|
+
*/
|
|
151
|
+
declare function touch(className: string, options?: {
|
|
152
|
+
root?: Document | ShadowRoot;
|
|
153
|
+
}): void;
|
|
154
|
+
/**
|
|
155
|
+
* Synchronous garbage collection of unused styles.
|
|
156
|
+
* Evicts the oldest unused styles when usageMap exceeds capacity.
|
|
157
|
+
* With `{ force: true }`, removes ALL unused styles regardless of capacity.
|
|
158
|
+
*
|
|
159
|
+
* @returns Number of styles evicted.
|
|
160
|
+
*/
|
|
161
|
+
declare function gc(options?: GCOptions): number;
|
|
162
|
+
/**
|
|
163
|
+
* Check if we're currently running in a test environment
|
|
164
|
+
*/
|
|
165
|
+
declare function getIsTestEnvironment(): boolean;
|
|
166
|
+
/**
|
|
167
|
+
* Get the global injector instance for debugging
|
|
168
|
+
*/
|
|
169
|
+
declare const injector: {
|
|
170
|
+
readonly instance: StyleInjector;
|
|
171
|
+
};
|
|
172
|
+
/**
|
|
173
|
+
* Destroy all resources and clean up
|
|
174
|
+
*/
|
|
175
|
+
declare function destroy(root?: Document | ShadowRoot): void;
|
|
176
|
+
/**
|
|
177
|
+
* Create a new isolated injector instance
|
|
178
|
+
*/
|
|
179
|
+
declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
|
|
180
|
+
//#endregion
|
|
181
|
+
export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch };
|
|
182
|
+
//# sourceMappingURL=index.d.ts.map
|