@tenphi/tasty 0.1.0
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 +236 -0
- package/dist/_virtual/_rolldown/runtime.mjs +7 -0
- package/dist/chunks/cacheKey.d.ts +1 -0
- package/dist/chunks/cacheKey.js +70 -0
- package/dist/chunks/cacheKey.js.map +1 -0
- package/dist/chunks/cacheKey.mjs +70 -0
- package/dist/chunks/cacheKey.mjs.map +1 -0
- package/dist/chunks/definitions.d.ts +37 -0
- package/dist/chunks/definitions.js +260 -0
- package/dist/chunks/definitions.js.map +1 -0
- package/dist/chunks/definitions.mjs +260 -0
- package/dist/chunks/definitions.mjs.map +1 -0
- package/dist/chunks/index.d.ts +3 -0
- package/dist/chunks/renderChunk.d.ts +2 -0
- package/dist/chunks/renderChunk.js +61 -0
- package/dist/chunks/renderChunk.js.map +1 -0
- package/dist/chunks/renderChunk.mjs +61 -0
- package/dist/chunks/renderChunk.mjs.map +1 -0
- package/dist/config.d.ts +279 -0
- package/dist/config.js +400 -0
- package/dist/config.js.map +1 -0
- package/dist/config.mjs +231 -0
- package/dist/config.mjs.map +1 -0
- package/dist/css-writer.d.mts +45 -0
- package/dist/css-writer.mjs +74 -0
- package/dist/css-writer.mjs.map +1 -0
- package/dist/debug.d.ts +204 -0
- package/dist/debug.js +733 -0
- package/dist/debug.js.map +1 -0
- package/dist/extractor.d.mts +24 -0
- package/dist/extractor.mjs +150 -0
- package/dist/extractor.mjs.map +1 -0
- package/dist/hooks/index.d.ts +5 -0
- package/dist/hooks/useGlobalStyles.d.ts +27 -0
- package/dist/hooks/useGlobalStyles.js +56 -0
- package/dist/hooks/useGlobalStyles.js.map +1 -0
- package/dist/hooks/useKeyframes.d.ts +56 -0
- package/dist/hooks/useKeyframes.js +54 -0
- package/dist/hooks/useKeyframes.js.map +1 -0
- package/dist/hooks/useProperty.d.ts +79 -0
- package/dist/hooks/useProperty.js +91 -0
- package/dist/hooks/useProperty.js.map +1 -0
- package/dist/hooks/useRawCSS.d.ts +53 -0
- package/dist/hooks/useRawCSS.js +28 -0
- package/dist/hooks/useRawCSS.js.map +1 -0
- package/dist/hooks/useStyles.d.ts +40 -0
- package/dist/hooks/useStyles.js +169 -0
- package/dist/hooks/useStyles.js.map +1 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.js +30 -0
- package/dist/injector/index.d.ts +157 -0
- package/dist/injector/index.js +154 -0
- package/dist/injector/index.js.map +1 -0
- package/dist/injector/injector.d.ts +139 -0
- package/dist/injector/injector.js +404 -0
- package/dist/injector/injector.js.map +1 -0
- package/dist/injector/injector.mjs +404 -0
- package/dist/injector/injector.mjs.map +1 -0
- package/dist/injector/sheet-manager.d.ts +127 -0
- package/dist/injector/sheet-manager.js +714 -0
- package/dist/injector/sheet-manager.js.map +1 -0
- package/dist/injector/sheet-manager.mjs +714 -0
- package/dist/injector/sheet-manager.mjs.map +1 -0
- package/dist/injector/types.d.mts +18 -0
- package/dist/injector/types.d.ts +135 -0
- package/dist/keyframes/index.js +206 -0
- package/dist/keyframes/index.js.map +1 -0
- package/dist/keyframes/index.mjs +156 -0
- package/dist/keyframes/index.mjs.map +1 -0
- package/dist/parser/classify.js +319 -0
- package/dist/parser/classify.js.map +1 -0
- package/dist/parser/classify.mjs +319 -0
- package/dist/parser/classify.mjs.map +1 -0
- package/dist/parser/const.js +33 -0
- package/dist/parser/const.js.map +1 -0
- package/dist/parser/const.mjs +33 -0
- package/dist/parser/const.mjs.map +1 -0
- package/dist/parser/lru.js +109 -0
- package/dist/parser/lru.js.map +1 -0
- package/dist/parser/lru.mjs +109 -0
- package/dist/parser/lru.mjs.map +1 -0
- package/dist/parser/parser.d.ts +25 -0
- package/dist/parser/parser.js +116 -0
- package/dist/parser/parser.js.map +1 -0
- package/dist/parser/parser.mjs +116 -0
- package/dist/parser/parser.mjs.map +1 -0
- package/dist/parser/tokenizer.js +69 -0
- package/dist/parser/tokenizer.js.map +1 -0
- package/dist/parser/tokenizer.mjs +69 -0
- package/dist/parser/tokenizer.mjs.map +1 -0
- package/dist/parser/types.d.mts +37 -0
- package/dist/parser/types.d.ts +46 -0
- package/dist/parser/types.js +46 -0
- package/dist/parser/types.js.map +1 -0
- package/dist/parser/types.mjs +46 -0
- package/dist/parser/types.mjs.map +1 -0
- package/dist/pipeline/conditions.js +377 -0
- package/dist/pipeline/conditions.js.map +1 -0
- package/dist/pipeline/conditions.mjs +377 -0
- package/dist/pipeline/conditions.mjs.map +1 -0
- package/dist/pipeline/exclusive.d.ts +1 -0
- package/dist/pipeline/exclusive.js +231 -0
- package/dist/pipeline/exclusive.js.map +1 -0
- package/dist/pipeline/exclusive.mjs +231 -0
- package/dist/pipeline/exclusive.mjs.map +1 -0
- package/dist/pipeline/index.d.ts +53 -0
- package/dist/pipeline/index.js +641 -0
- package/dist/pipeline/index.js.map +1 -0
- package/dist/pipeline/index.mjs +635 -0
- package/dist/pipeline/index.mjs.map +1 -0
- package/dist/pipeline/materialize.js +821 -0
- package/dist/pipeline/materialize.js.map +1 -0
- package/dist/pipeline/materialize.mjs +821 -0
- package/dist/pipeline/materialize.mjs.map +1 -0
- package/dist/pipeline/parseStateKey.d.ts +1 -0
- package/dist/pipeline/parseStateKey.js +418 -0
- package/dist/pipeline/parseStateKey.js.map +1 -0
- package/dist/pipeline/parseStateKey.mjs +418 -0
- package/dist/pipeline/parseStateKey.mjs.map +1 -0
- package/dist/pipeline/simplify.js +557 -0
- package/dist/pipeline/simplify.js.map +1 -0
- package/dist/pipeline/simplify.mjs +557 -0
- package/dist/pipeline/simplify.mjs.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 +371 -0
- package/dist/plugins/okhsl-plugin.js.map +1 -0
- package/dist/plugins/okhsl-plugin.mjs +345 -0
- package/dist/plugins/okhsl-plugin.mjs.map +1 -0
- package/dist/plugins/types.d.mts +49 -0
- package/dist/plugins/types.d.ts +69 -0
- package/dist/properties/index.js +158 -0
- package/dist/properties/index.js.map +1 -0
- package/dist/properties/index.mjs +141 -0
- package/dist/properties/index.mjs.map +1 -0
- package/dist/states/index.d.ts +45 -0
- package/dist/states/index.js +389 -0
- package/dist/states/index.js.map +1 -0
- package/dist/states/index.mjs +161 -0
- package/dist/states/index.mjs.map +1 -0
- package/dist/static/index.d.ts +5 -0
- package/dist/static/index.js +5 -0
- package/dist/static/tastyStatic.d.ts +46 -0
- package/dist/static/tastyStatic.js +31 -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/align.d.ts +15 -0
- package/dist/styles/align.js +14 -0
- package/dist/styles/align.js.map +1 -0
- package/dist/styles/align.mjs +14 -0
- package/dist/styles/align.mjs.map +1 -0
- package/dist/styles/border.d.ts +25 -0
- package/dist/styles/border.js +114 -0
- package/dist/styles/border.js.map +1 -0
- package/dist/styles/border.mjs +114 -0
- package/dist/styles/border.mjs.map +1 -0
- package/dist/styles/color.d.ts +14 -0
- package/dist/styles/color.js +23 -0
- package/dist/styles/color.js.map +1 -0
- package/dist/styles/color.mjs +23 -0
- package/dist/styles/color.mjs.map +1 -0
- package/dist/styles/createStyle.js +77 -0
- package/dist/styles/createStyle.js.map +1 -0
- package/dist/styles/createStyle.mjs +77 -0
- package/dist/styles/createStyle.mjs.map +1 -0
- package/dist/styles/dimension.js +97 -0
- package/dist/styles/dimension.js.map +1 -0
- package/dist/styles/dimension.mjs +97 -0
- package/dist/styles/dimension.mjs.map +1 -0
- package/dist/styles/display.d.ts +37 -0
- package/dist/styles/display.js +67 -0
- package/dist/styles/display.js.map +1 -0
- package/dist/styles/display.mjs +67 -0
- package/dist/styles/display.mjs.map +1 -0
- package/dist/styles/fade.d.ts +15 -0
- package/dist/styles/fade.js +58 -0
- package/dist/styles/fade.js.map +1 -0
- package/dist/styles/fade.mjs +58 -0
- package/dist/styles/fade.mjs.map +1 -0
- package/dist/styles/fill.d.ts +44 -0
- package/dist/styles/fill.js +51 -0
- package/dist/styles/fill.js.map +1 -0
- package/dist/styles/fill.mjs +51 -0
- package/dist/styles/fill.mjs.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/flow.mjs +12 -0
- package/dist/styles/flow.mjs.map +1 -0
- package/dist/styles/gap.d.ts +31 -0
- package/dist/styles/gap.js +37 -0
- package/dist/styles/gap.js.map +1 -0
- package/dist/styles/gap.mjs +37 -0
- package/dist/styles/gap.mjs.map +1 -0
- package/dist/styles/height.d.ts +17 -0
- package/dist/styles/height.js +20 -0
- package/dist/styles/height.js.map +1 -0
- package/dist/styles/height.mjs +20 -0
- package/dist/styles/height.mjs.map +1 -0
- package/dist/styles/index.d.ts +2 -0
- package/dist/styles/index.js +9 -0
- package/dist/styles/index.js.map +1 -0
- package/dist/styles/index.mjs +9 -0
- package/dist/styles/index.mjs.map +1 -0
- package/dist/styles/inset.d.ts +50 -0
- package/dist/styles/inset.js +142 -0
- package/dist/styles/inset.js.map +1 -0
- package/dist/styles/inset.mjs +142 -0
- package/dist/styles/inset.mjs.map +1 -0
- package/dist/styles/justify.d.ts +15 -0
- package/dist/styles/justify.js +14 -0
- package/dist/styles/justify.js.map +1 -0
- package/dist/styles/justify.mjs +14 -0
- package/dist/styles/justify.mjs.map +1 -0
- package/dist/styles/list.d.ts +16 -0
- package/dist/styles/list.js +98 -0
- package/dist/styles/list.js.map +1 -0
- package/dist/styles/margin.d.ts +28 -0
- package/dist/styles/margin.js +96 -0
- package/dist/styles/margin.js.map +1 -0
- package/dist/styles/margin.mjs +96 -0
- package/dist/styles/margin.mjs.map +1 -0
- package/dist/styles/outline.d.ts +29 -0
- package/dist/styles/outline.js +65 -0
- package/dist/styles/outline.js.map +1 -0
- package/dist/styles/outline.mjs +65 -0
- package/dist/styles/outline.mjs.map +1 -0
- package/dist/styles/padding.d.ts +28 -0
- package/dist/styles/padding.js +96 -0
- package/dist/styles/padding.js.map +1 -0
- package/dist/styles/padding.mjs +96 -0
- package/dist/styles/padding.mjs.map +1 -0
- package/dist/styles/predefined.d.ts +74 -0
- package/dist/styles/predefined.js +241 -0
- package/dist/styles/predefined.js.map +1 -0
- package/dist/styles/predefined.mjs +232 -0
- package/dist/styles/predefined.mjs.map +1 -0
- package/dist/styles/preset.d.ts +47 -0
- package/dist/styles/preset.js +126 -0
- package/dist/styles/preset.js.map +1 -0
- package/dist/styles/preset.mjs +126 -0
- package/dist/styles/preset.mjs.map +1 -0
- package/dist/styles/radius.d.ts +14 -0
- package/dist/styles/radius.js +51 -0
- package/dist/styles/radius.js.map +1 -0
- package/dist/styles/radius.mjs +51 -0
- package/dist/styles/radius.mjs.map +1 -0
- package/dist/styles/scrollbar.d.ts +21 -0
- package/dist/styles/scrollbar.js +105 -0
- package/dist/styles/scrollbar.js.map +1 -0
- package/dist/styles/scrollbar.mjs +105 -0
- package/dist/styles/scrollbar.mjs.map +1 -0
- package/dist/styles/shadow.d.ts +14 -0
- package/dist/styles/shadow.js +24 -0
- package/dist/styles/shadow.js.map +1 -0
- package/dist/styles/shadow.mjs +24 -0
- package/dist/styles/shadow.mjs.map +1 -0
- package/dist/styles/styledScrollbar.d.ts +47 -0
- package/dist/styles/styledScrollbar.js +38 -0
- package/dist/styles/styledScrollbar.js.map +1 -0
- package/dist/styles/styledScrollbar.mjs +38 -0
- package/dist/styles/styledScrollbar.mjs.map +1 -0
- package/dist/styles/transition.d.ts +14 -0
- package/dist/styles/transition.js +138 -0
- package/dist/styles/transition.js.map +1 -0
- package/dist/styles/transition.mjs +138 -0
- package/dist/styles/transition.mjs.map +1 -0
- package/dist/styles/types.d.mts +492 -0
- package/dist/styles/types.d.ts +496 -0
- package/dist/styles/width.d.ts +17 -0
- package/dist/styles/width.js +20 -0
- package/dist/styles/width.js.map +1 -0
- package/dist/styles/width.mjs +20 -0
- package/dist/styles/width.mjs.map +1 -0
- package/dist/tasty.d.ts +983 -0
- package/dist/tasty.js +191 -0
- package/dist/tasty.js.map +1 -0
- package/dist/tokens/typography.d.ts +19 -0
- package/dist/tokens/typography.js +237 -0
- package/dist/tokens/typography.js.map +1 -0
- package/dist/types.d.ts +182 -0
- package/dist/utils/cache-wrapper.js +26 -0
- package/dist/utils/cache-wrapper.js.map +1 -0
- package/dist/utils/cache-wrapper.mjs +26 -0
- package/dist/utils/cache-wrapper.mjs.map +1 -0
- package/dist/utils/case-converter.js +8 -0
- package/dist/utils/case-converter.js.map +1 -0
- package/dist/utils/case-converter.mjs +8 -0
- package/dist/utils/case-converter.mjs.map +1 -0
- package/dist/utils/colors.d.ts +5 -0
- package/dist/utils/colors.js +9 -0
- package/dist/utils/colors.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/hsl-to-rgb.js +38 -0
- package/dist/utils/hsl-to-rgb.js.map +1 -0
- package/dist/utils/hsl-to-rgb.mjs +38 -0
- package/dist/utils/hsl-to-rgb.mjs.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-dev-env.mjs +19 -0
- package/dist/utils/is-dev-env.mjs.map +1 -0
- package/dist/utils/merge-styles.d.ts +7 -0
- package/dist/utils/merge-styles.js +146 -0
- package/dist/utils/merge-styles.js.map +1 -0
- package/dist/utils/merge-styles.mjs +146 -0
- package/dist/utils/merge-styles.mjs.map +1 -0
- package/dist/utils/mod-attrs.d.ts +8 -0
- package/dist/utils/mod-attrs.js +21 -0
- package/dist/utils/mod-attrs.js.map +1 -0
- package/dist/utils/okhsl-to-rgb.js +296 -0
- package/dist/utils/okhsl-to-rgb.js.map +1 -0
- package/dist/utils/okhsl-to-rgb.mjs +296 -0
- package/dist/utils/okhsl-to-rgb.mjs.map +1 -0
- package/dist/utils/process-tokens.d.ts +31 -0
- package/dist/utils/process-tokens.js +171 -0
- package/dist/utils/process-tokens.js.map +1 -0
- package/dist/utils/process-tokens.mjs +28 -0
- package/dist/utils/process-tokens.mjs.map +1 -0
- package/dist/utils/resolve-recipes.d.ts +17 -0
- package/dist/utils/resolve-recipes.js +143 -0
- package/dist/utils/resolve-recipes.js.map +1 -0
- package/dist/utils/resolve-recipes.mjs +143 -0
- package/dist/utils/resolve-recipes.mjs.map +1 -0
- package/dist/utils/string.js +8 -0
- package/dist/utils/string.js.map +1 -0
- package/dist/utils/string.mjs +8 -0
- package/dist/utils/string.mjs.map +1 -0
- package/dist/utils/styles.d.mts +18 -0
- package/dist/utils/styles.d.ts +183 -0
- package/dist/utils/styles.js +585 -0
- package/dist/utils/styles.js.map +1 -0
- package/dist/utils/styles.mjs +346 -0
- package/dist/utils/styles.mjs.map +1 -0
- package/dist/utils/typography.d.ts +36 -0
- package/dist/utils/typography.js +53 -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.mts +108 -0
- package/dist/zero/babel.mjs +282 -0
- package/dist/zero/babel.mjs.map +1 -0
- package/dist/zero/index.d.mts +3 -0
- package/dist/zero/index.mjs +4 -0
- package/dist/zero/next.d.mts +60 -0
- package/dist/zero/next.mjs +78 -0
- package/dist/zero/next.mjs.map +1 -0
- package/package.json +127 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Andrey Yamanov
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="assets/tasty.svg" width="128" height="128" alt="Tasty logo">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">Tasty</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
A design-system-integrated styling system and DSL for concise, state-aware UI styling
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<a href="https://www.npmjs.com/package/@tenphi/tasty"><img src="https://img.shields.io/npm/v/@tenphi/tasty.svg" alt="npm version"></a>
|
|
13
|
+
<a href="https://github.com/tenphi/tasty/actions/workflows/ci.yml"><img src="https://github.com/tenphi/tasty/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
|
|
14
|
+
<a href="https://github.com/tenphi/tasty/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@tenphi/tasty.svg" alt="license"></a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
Tasty is a powerful CSS-in-JS styling system for React that combines declarative state-aware styling with design system integration. It provides a concise DSL for creating maintainable, themeable components with built-in support for responsive design, dark mode, container queries, and more.
|
|
20
|
+
|
|
21
|
+
## Features
|
|
22
|
+
|
|
23
|
+
- **Declarative state-aware styling** — style objects with state keys (`hovered`, `disabled`, `@media`, `@root`, etc.)
|
|
24
|
+
- **Design token integration** — color tokens (`#purple`), custom units (`2x`, `1r`), typography presets
|
|
25
|
+
- **Sub-element styling** — style inner elements via capitalized keys with `data-element` attributes
|
|
26
|
+
- **Advanced state mapping** — media queries, container queries, root states, supports queries with boolean logic
|
|
27
|
+
- **Zero-runtime mode** — Babel plugin extracts CSS at build time for static sites
|
|
28
|
+
- **Plugin system** — extensible with custom color functions (OKHSL, etc.)
|
|
29
|
+
- **React hooks** — `useStyles`, `useGlobalStyles`, `useRawCSS` for programmatic style injection
|
|
30
|
+
- **Style extension** — compose and extend styled components with proper merge semantics
|
|
31
|
+
- **Recipes** — named style bundles for reusable patterns
|
|
32
|
+
- **TypeScript-first** — full type definitions with module augmentation support
|
|
33
|
+
- **Tree-shakeable ESM** — unbundled output with `sideEffects: false`
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
pnpm add @tenphi/tasty
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm install @tenphi/tasty
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
yarn add @tenphi/tasty
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Quick Start
|
|
50
|
+
|
|
51
|
+
### Creating Styled Components
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { tasty } from '@tenphi/tasty';
|
|
55
|
+
|
|
56
|
+
const Card = tasty({
|
|
57
|
+
as: 'div',
|
|
58
|
+
styles: {
|
|
59
|
+
padding: '4x',
|
|
60
|
+
fill: '#white',
|
|
61
|
+
border: true,
|
|
62
|
+
radius: true,
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
<Card>Hello World</Card>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### State-Based Styling
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
const InteractiveCard = tasty({
|
|
73
|
+
styles: {
|
|
74
|
+
fill: {
|
|
75
|
+
'': '#white',
|
|
76
|
+
'hovered': '#gray.05',
|
|
77
|
+
'pressed': '#gray.10',
|
|
78
|
+
'@media(w < 768px)': '#surface',
|
|
79
|
+
},
|
|
80
|
+
padding: {
|
|
81
|
+
'': '4x',
|
|
82
|
+
'@media(w < 768px)': '2x',
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Extending Components
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { Button } from 'my-ui-lib';
|
|
92
|
+
|
|
93
|
+
const PrimaryButton = tasty(Button, {
|
|
94
|
+
styles: {
|
|
95
|
+
fill: '#purple',
|
|
96
|
+
color: '#white',
|
|
97
|
+
padding: '2x 4x',
|
|
98
|
+
},
|
|
99
|
+
});
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Configuration
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import { configure } from '@tenphi/tasty';
|
|
106
|
+
|
|
107
|
+
configure({
|
|
108
|
+
states: {
|
|
109
|
+
'@mobile': '@media(w < 768px)',
|
|
110
|
+
'@dark': '@root(theme=dark)',
|
|
111
|
+
},
|
|
112
|
+
recipes: {
|
|
113
|
+
card: {
|
|
114
|
+
padding: '4x',
|
|
115
|
+
fill: '#surface',
|
|
116
|
+
radius: '1r',
|
|
117
|
+
border: true,
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Entry Points
|
|
124
|
+
|
|
125
|
+
| Import | Description | Platform |
|
|
126
|
+
|--------|-------------|----------|
|
|
127
|
+
| `@tenphi/tasty` | Runtime style engine | Browser |
|
|
128
|
+
| `@tenphi/tasty/static` | Build-time static style generation | Browser |
|
|
129
|
+
| `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime | Node |
|
|
130
|
+
| `@tenphi/tasty/zero` | Programmatic extraction API | Node |
|
|
131
|
+
| `@tenphi/tasty/next` | Next.js integration wrapper | Node |
|
|
132
|
+
|
|
133
|
+
## Core Concepts
|
|
134
|
+
|
|
135
|
+
### Design Tokens
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
const TokenCard = tasty({
|
|
139
|
+
styles: {
|
|
140
|
+
fill: '#surface', // Color token → var(--surface-color)
|
|
141
|
+
color: '#text', // Color token
|
|
142
|
+
padding: '2x', // Gap multiplier → calc(var(--gap) * 2)
|
|
143
|
+
radius: '1r', // Border radius → var(--radius)
|
|
144
|
+
border: '1bw solid #border',
|
|
145
|
+
},
|
|
146
|
+
});
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Sub-Element Styling
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
const Card = tasty({
|
|
153
|
+
styles: {
|
|
154
|
+
padding: '4x',
|
|
155
|
+
Title: { preset: 'h3', color: '#primary' },
|
|
156
|
+
Content: { color: '#text' },
|
|
157
|
+
},
|
|
158
|
+
elements: {
|
|
159
|
+
Title: 'h2',
|
|
160
|
+
Content: 'div',
|
|
161
|
+
},
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
<Card>
|
|
165
|
+
<Card.Title>Title</Card.Title>
|
|
166
|
+
<Card.Content>Content</Card.Content>
|
|
167
|
+
</Card>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Hooks
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
import { useStyles, useGlobalStyles } from '@tenphi/tasty';
|
|
174
|
+
|
|
175
|
+
function MyComponent() {
|
|
176
|
+
const { className } = useStyles({
|
|
177
|
+
padding: '2x',
|
|
178
|
+
fill: '#surface',
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
useGlobalStyles('.card', {
|
|
182
|
+
border: '1bw solid #border',
|
|
183
|
+
radius: '1r',
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
return <div className={className}>Styled</div>;
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Zero-Runtime Mode
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
import { tastyStatic } from '@tenphi/tasty/static';
|
|
194
|
+
|
|
195
|
+
const button = tastyStatic({
|
|
196
|
+
display: 'inline-flex',
|
|
197
|
+
padding: '2x 4x',
|
|
198
|
+
fill: '#purple',
|
|
199
|
+
color: '#white',
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
<button className={button}>Click me</button>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
Configure the Babel plugin:
|
|
206
|
+
|
|
207
|
+
```js
|
|
208
|
+
// babel.config.js
|
|
209
|
+
module.exports = {
|
|
210
|
+
plugins: [
|
|
211
|
+
['@tenphi/tasty/babel-plugin', { output: 'public/tasty.css' }],
|
|
212
|
+
],
|
|
213
|
+
};
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Built-in Units
|
|
217
|
+
|
|
218
|
+
| Unit | Description | Example | CSS Output |
|
|
219
|
+
|------|-------------|---------|------------|
|
|
220
|
+
| `x` | Gap multiplier | `2x` | `calc(var(--gap) * 2)` |
|
|
221
|
+
| `r` | Border radius | `1r` | `var(--radius)` |
|
|
222
|
+
| `cr` | Card border radius | `1cr` | `var(--card-radius)` |
|
|
223
|
+
| `bw` | Border width | `2bw` | `calc(var(--border-width) * 2)` |
|
|
224
|
+
| `ow` | Outline width | `1ow` | `var(--outline-width)` |
|
|
225
|
+
| `fs` | Font size | `1fs` | `var(--font-size)` |
|
|
226
|
+
| `lh` | Line height | `1lh` | `var(--line-height)` |
|
|
227
|
+
| `sf` | Stable fraction | `1sf` | `minmax(0, 1fr)` |
|
|
228
|
+
|
|
229
|
+
## Documentation
|
|
230
|
+
|
|
231
|
+
- [Runtime API (tasty)](docs/tasty.md) — Full runtime styling documentation
|
|
232
|
+
- [Zero Runtime (tastyStatic)](docs/tasty-static.md) — Build-time static styling documentation
|
|
233
|
+
|
|
234
|
+
## License
|
|
235
|
+
|
|
236
|
+
[MIT](LICENSE)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "../styles/types.js";
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../states/index.js";
|
|
2
|
+
|
|
3
|
+
//#region src/chunks/cacheKey.ts
|
|
4
|
+
/**
|
|
5
|
+
* Chunk-specific cache key generation.
|
|
6
|
+
*
|
|
7
|
+
* Generates cache keys that only include styles relevant to a specific chunk,
|
|
8
|
+
* enabling more granular caching and reuse.
|
|
9
|
+
*
|
|
10
|
+
* Enhanced to support predefined states:
|
|
11
|
+
* - Global predefined states don't affect cache keys (constant across app)
|
|
12
|
+
* - Local predefined states only affect cache keys if referenced in the chunk
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Recursively serialize a value with sorted keys for stable output.
|
|
16
|
+
* This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
|
|
17
|
+
*/
|
|
18
|
+
function stableStringify(value) {
|
|
19
|
+
if (value === null) return "null";
|
|
20
|
+
if (value === void 0) return "undefined";
|
|
21
|
+
if (typeof value !== "object") return JSON.stringify(value);
|
|
22
|
+
if (Array.isArray(value)) return "[" + value.map(stableStringify).join(",") + "]";
|
|
23
|
+
const obj = value;
|
|
24
|
+
const sortedKeys = Object.keys(obj).sort();
|
|
25
|
+
const parts = [];
|
|
26
|
+
for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
|
|
27
|
+
return "{" + parts.join(",") + "}";
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Generate a cache key for a specific chunk.
|
|
31
|
+
*
|
|
32
|
+
* Only includes the styles that belong to this chunk, allowing
|
|
33
|
+
* chunks to be cached independently.
|
|
34
|
+
*
|
|
35
|
+
* Also includes relevant local predefined states that are referenced
|
|
36
|
+
* by this chunk's styles.
|
|
37
|
+
*
|
|
38
|
+
* @param styles - The full styles object
|
|
39
|
+
* @param chunkName - Name of the chunk
|
|
40
|
+
* @param styleKeys - Keys of styles belonging to this chunk
|
|
41
|
+
* @returns A stable cache key string
|
|
42
|
+
*/
|
|
43
|
+
function generateChunkCacheKey(styles, chunkName, styleKeys) {
|
|
44
|
+
const parts = [chunkName];
|
|
45
|
+
const sortedKeys = styleKeys.slice().sort();
|
|
46
|
+
let chunkStylesStr = "";
|
|
47
|
+
for (const key of sortedKeys) {
|
|
48
|
+
const value = styles[key];
|
|
49
|
+
if (value !== void 0) {
|
|
50
|
+
const serialized = stableStringify(value);
|
|
51
|
+
parts.push(`${key}:${serialized}`);
|
|
52
|
+
chunkStylesStr += serialized;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
const localStates = extractLocalPredefinedStates(styles);
|
|
56
|
+
if (Object.keys(localStates).length > 0) {
|
|
57
|
+
const referencedStates = extractPredefinedStateRefs(chunkStylesStr);
|
|
58
|
+
const relevantLocalStates = [];
|
|
59
|
+
for (const stateName of referencedStates) if (localStates[stateName]) relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);
|
|
60
|
+
if (relevantLocalStates.length > 0) {
|
|
61
|
+
relevantLocalStates.sort();
|
|
62
|
+
parts.unshift(`[states:${relevantLocalStates.join("|")}]`);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return parts.join("\0");
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { generateChunkCacheKey };
|
|
70
|
+
//# sourceMappingURL=cacheKey.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n extractLocalPredefinedStates,\n extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n */\nfunction stableStringify(value: unknown): string {\n if (value === null) {\n return 'null';\n }\n if (value === undefined) {\n return 'undefined';\n }\n if (typeof value !== 'object') {\n return JSON.stringify(value);\n }\n if (Array.isArray(value)) {\n return '[' + value.map(stableStringify).join(',') + ']';\n }\n // Object: sort keys for stable order\n const obj = value as Record<string, unknown>;\n const sortedKeys = Object.keys(obj).sort();\n const parts: string[] = [];\n for (const key of sortedKeys) {\n if (obj[key] !== undefined) {\n parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n }\n }\n return '{' + parts.join(',') + '}';\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n styles: Styles,\n chunkName: string,\n styleKeys: string[],\n): string {\n // Start with chunk name for namespace separation\n const parts: string[] = [chunkName];\n\n // Sort keys for stable ordering\n const sortedKeys = styleKeys.slice().sort();\n\n // Build the chunk-specific styles string for predefined state detection\n let chunkStylesStr = '';\n\n for (const key of sortedKeys) {\n const value = styles[key];\n if (value !== undefined) {\n // Use stable stringify for consistent serialization regardless of key order\n const serialized = stableStringify(value);\n parts.push(`${key}:${serialized}`);\n chunkStylesStr += serialized;\n }\n }\n\n // Extract local predefined states from the full styles object\n const localStates = extractLocalPredefinedStates(styles);\n\n // Only include local predefined states that are actually referenced in this chunk\n if (Object.keys(localStates).length > 0) {\n const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n const relevantLocalStates: string[] = [];\n\n for (const stateName of referencedStates) {\n if (localStates[stateName]) {\n relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n }\n }\n\n // Add relevant local states to the cache key (sorted for stability)\n if (relevantLocalStates.length > 0) {\n relevantLocalStates.sort();\n parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n }\n }\n\n // Use null character as separator (safe, not in JSON output)\n return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAE9B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;CAGtD,MAAM,MAAM;CACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;CAC1C,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,QAAO,MAAM,MAAM,KAAK,IAAI,GAAG;;;;;;;;;;;;;;;;AAiBjC,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,MAAM,aAAa,UAAU,OAAO,CAAC,MAAM;CAG3C,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../states/index.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/chunks/cacheKey.ts
|
|
4
|
+
/**
|
|
5
|
+
* Chunk-specific cache key generation.
|
|
6
|
+
*
|
|
7
|
+
* Generates cache keys that only include styles relevant to a specific chunk,
|
|
8
|
+
* enabling more granular caching and reuse.
|
|
9
|
+
*
|
|
10
|
+
* Enhanced to support predefined states:
|
|
11
|
+
* - Global predefined states don't affect cache keys (constant across app)
|
|
12
|
+
* - Local predefined states only affect cache keys if referenced in the chunk
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Recursively serialize a value with sorted keys for stable output.
|
|
16
|
+
* This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
|
|
17
|
+
*/
|
|
18
|
+
function stableStringify(value) {
|
|
19
|
+
if (value === null) return "null";
|
|
20
|
+
if (value === void 0) return "undefined";
|
|
21
|
+
if (typeof value !== "object") return JSON.stringify(value);
|
|
22
|
+
if (Array.isArray(value)) return "[" + value.map(stableStringify).join(",") + "]";
|
|
23
|
+
const obj = value;
|
|
24
|
+
const sortedKeys = Object.keys(obj).sort();
|
|
25
|
+
const parts = [];
|
|
26
|
+
for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
|
|
27
|
+
return "{" + parts.join(",") + "}";
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Generate a cache key for a specific chunk.
|
|
31
|
+
*
|
|
32
|
+
* Only includes the styles that belong to this chunk, allowing
|
|
33
|
+
* chunks to be cached independently.
|
|
34
|
+
*
|
|
35
|
+
* Also includes relevant local predefined states that are referenced
|
|
36
|
+
* by this chunk's styles.
|
|
37
|
+
*
|
|
38
|
+
* @param styles - The full styles object
|
|
39
|
+
* @param chunkName - Name of the chunk
|
|
40
|
+
* @param styleKeys - Keys of styles belonging to this chunk
|
|
41
|
+
* @returns A stable cache key string
|
|
42
|
+
*/
|
|
43
|
+
function generateChunkCacheKey(styles, chunkName, styleKeys) {
|
|
44
|
+
const parts = [chunkName];
|
|
45
|
+
const sortedKeys = styleKeys.slice().sort();
|
|
46
|
+
let chunkStylesStr = "";
|
|
47
|
+
for (const key of sortedKeys) {
|
|
48
|
+
const value = styles[key];
|
|
49
|
+
if (value !== void 0) {
|
|
50
|
+
const serialized = stableStringify(value);
|
|
51
|
+
parts.push(`${key}:${serialized}`);
|
|
52
|
+
chunkStylesStr += serialized;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
const localStates = extractLocalPredefinedStates(styles);
|
|
56
|
+
if (Object.keys(localStates).length > 0) {
|
|
57
|
+
const referencedStates = extractPredefinedStateRefs(chunkStylesStr);
|
|
58
|
+
const relevantLocalStates = [];
|
|
59
|
+
for (const stateName of referencedStates) if (localStates[stateName]) relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);
|
|
60
|
+
if (relevantLocalStates.length > 0) {
|
|
61
|
+
relevantLocalStates.sort();
|
|
62
|
+
parts.unshift(`[states:${relevantLocalStates.join("|")}]`);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return parts.join("\0");
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { generateChunkCacheKey };
|
|
70
|
+
//# sourceMappingURL=cacheKey.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cacheKey.mjs","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n extractLocalPredefinedStates,\n extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n */\nfunction stableStringify(value: unknown): string {\n if (value === null) {\n return 'null';\n }\n if (value === undefined) {\n return 'undefined';\n }\n if (typeof value !== 'object') {\n return JSON.stringify(value);\n }\n if (Array.isArray(value)) {\n return '[' + value.map(stableStringify).join(',') + ']';\n }\n // Object: sort keys for stable order\n const obj = value as Record<string, unknown>;\n const sortedKeys = Object.keys(obj).sort();\n const parts: string[] = [];\n for (const key of sortedKeys) {\n if (obj[key] !== undefined) {\n parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n }\n }\n return '{' + parts.join(',') + '}';\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n styles: Styles,\n chunkName: string,\n styleKeys: string[],\n): string {\n // Start with chunk name for namespace separation\n const parts: string[] = [chunkName];\n\n // Sort keys for stable ordering\n const sortedKeys = styleKeys.slice().sort();\n\n // Build the chunk-specific styles string for predefined state detection\n let chunkStylesStr = '';\n\n for (const key of sortedKeys) {\n const value = styles[key];\n if (value !== undefined) {\n // Use stable stringify for consistent serialization regardless of key order\n const serialized = stableStringify(value);\n parts.push(`${key}:${serialized}`);\n chunkStylesStr += serialized;\n }\n }\n\n // Extract local predefined states from the full styles object\n const localStates = extractLocalPredefinedStates(styles);\n\n // Only include local predefined states that are actually referenced in this chunk\n if (Object.keys(localStates).length > 0) {\n const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n const relevantLocalStates: string[] = [];\n\n for (const stateName of referencedStates) {\n if (localStates[stateName]) {\n relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n }\n }\n\n // Add relevant local states to the cache key (sorted for stability)\n if (relevantLocalStates.length > 0) {\n relevantLocalStates.sort();\n parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n }\n }\n\n // Use null character as separator (safe, not in JSON output)\n return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAE9B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;CAGtD,MAAM,MAAM;CACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;CAC1C,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,QAAO,MAAM,MAAM,KAAK,IAAI,GAAG;;;;;;;;;;;;;;;;AAiBjC,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,MAAM,aAAa,UAAU,OAAO,CAAC,MAAM;CAG3C,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
//#region src/chunks/definitions.d.ts
|
|
2
|
+
declare const CHUNK_NAMES: {
|
|
3
|
+
/** Special chunk for styles that cannot be split (e.g., @starting-style) */readonly COMBINED: "combined";
|
|
4
|
+
readonly SUBCOMPONENTS: "subcomponents";
|
|
5
|
+
readonly APPEARANCE: "appearance";
|
|
6
|
+
readonly FONT: "font";
|
|
7
|
+
readonly DIMENSION: "dimension";
|
|
8
|
+
readonly DISPLAY: "display";
|
|
9
|
+
readonly LAYOUT: "layout";
|
|
10
|
+
readonly POSITION: "position";
|
|
11
|
+
readonly MISC: "misc";
|
|
12
|
+
};
|
|
13
|
+
type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
|
|
14
|
+
/**
|
|
15
|
+
* Pre-computed map for O(1) style-to-chunk lookup.
|
|
16
|
+
* Built once at module load time.
|
|
17
|
+
*/
|
|
18
|
+
declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
|
|
19
|
+
interface ChunkInfo {
|
|
20
|
+
/** Name of the chunk */
|
|
21
|
+
name: ChunkName | string;
|
|
22
|
+
/** Style keys belonging to this chunk */
|
|
23
|
+
styleKeys: string[];
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Categorize style keys into chunks.
|
|
27
|
+
*
|
|
28
|
+
* Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
|
|
29
|
+
* of the order of keys in the input styles object.
|
|
30
|
+
*
|
|
31
|
+
* @param styles - The styles object to categorize
|
|
32
|
+
* @returns Map of chunk name to array of style keys in that chunk (in priority order)
|
|
33
|
+
*/
|
|
34
|
+
declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;
|
|
35
|
+
//#endregion
|
|
36
|
+
export { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys };
|
|
37
|
+
//# sourceMappingURL=definitions.d.ts.map
|