@tenphi/tasty 0.14.2 → 0.15.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/README.md +50 -206
- package/dist/core/index.d.ts +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/tasty.d.ts +24 -891
- package/dist/tasty.js +20 -7
- package/dist/tasty.js.map +1 -1
- package/docs/design-system.md +8 -2
- package/docs/dsl.md +2 -0
- package/docs/methodology.md +68 -4
- package/docs/runtime.md +80 -0
- package/docs/styles.md +19 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ On top of that foundation, Tasty gives teams a governed styling model: a CSS-lik
|
|
|
41
41
|
|
|
42
42
|
### Supporting capabilities
|
|
43
43
|
|
|
44
|
-
- **Typed style props** — `styleProps`
|
|
44
|
+
- **Typed style props and mod props** — `styleProps` exposes selected CSS properties as typed React props (`<Space flow="row" gap="2x">`); `modProps` does the same for modifier keys (`<Button isLoading size="large">`). Both support state maps and full TypeScript autocomplete. See [Style Props](#style-props) and [Mod Props](#mod-props).
|
|
45
45
|
- **Runtime, SSR, and zero-runtime options** — Use `tasty()` for runtime React components, add SSR integrations when your framework renders that runtime on the server, or use `tastyStatic()` when you specifically want build-time extraction instead of runtime styling.
|
|
46
46
|
- **Broad modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, and more. Features that do not fit the component model (such as `@layer` and `!important`) are intentionally left out.
|
|
47
47
|
- **Performance and caching** — Runtime mode injects CSS on demand, reuses chunks aggressively, and relies on multi-level caching so large component systems stay practical.
|
|
@@ -178,58 +178,17 @@ configure({
|
|
|
178
178
|
|
|
179
179
|
Use `configure()` once when your app or design system needs shared aliases, tokens, recipes, or parser extensions. Predefined states turn complex selector logic into single tokens, so teams can write `@mobile` instead of repeating media query expressions in every component.
|
|
180
180
|
|
|
181
|
-
###
|
|
181
|
+
### Props as the public API
|
|
182
182
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
With `styleProps`, a component can expose the styles you choose as normal typed props. You can adjust layout, spacing, alignment, or positioning where the component is used while staying inside a typed, design-system-aware API.
|
|
186
|
-
|
|
187
|
-
```tsx
|
|
188
|
-
import { tasty, FLOW_STYLES, POSITION_STYLES } from '@tenphi/tasty';
|
|
189
|
-
|
|
190
|
-
const Space = tasty({
|
|
191
|
-
styles: {
|
|
192
|
-
display: 'flex',
|
|
193
|
-
flow: 'column',
|
|
194
|
-
gap: '1x',
|
|
195
|
-
},
|
|
196
|
-
styleProps: FLOW_STYLES,
|
|
197
|
-
});
|
|
198
|
-
|
|
199
|
-
const Button = tasty({
|
|
200
|
-
as: 'button',
|
|
201
|
-
styles: {
|
|
202
|
-
padding: '1.5x 3x',
|
|
203
|
-
fill: '#primary',
|
|
204
|
-
color: '#primary-text',
|
|
205
|
-
radius: true,
|
|
206
|
-
},
|
|
207
|
-
styleProps: POSITION_STYLES,
|
|
208
|
-
});
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
Now you can compose layout and tweak component positioning directly in JSX:
|
|
183
|
+
`styleProps` exposes selected CSS properties as typed React props, and `modProps` does the same for modifier keys. Together they let design systems define a governed, typed component API without wrapper elements or `styles` overrides:
|
|
212
184
|
|
|
213
185
|
```tsx
|
|
214
186
|
<Space flow="row" gap="2x" placeItems="center">
|
|
215
|
-
<
|
|
216
|
-
<Button placeSelf="end">Add Item</Button>
|
|
217
|
-
</Space>
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
The same props also support state maps, so responsive values use the exact same API:
|
|
221
|
-
|
|
222
|
-
```tsx
|
|
223
|
-
<Space
|
|
224
|
-
flow={{ '': 'column', '@tablet': 'row' }}
|
|
225
|
-
gap={{ '': '2x', '@tablet': '4x' }}
|
|
226
|
-
>
|
|
227
|
-
<Sidebar />
|
|
228
|
-
<Content />
|
|
187
|
+
<Button isLoading size="large" placeSelf="end">Submit</Button>
|
|
229
188
|
</Space>
|
|
230
189
|
```
|
|
231
190
|
|
|
232
|
-
|
|
191
|
+
See [Style Props](#style-props) and [Mod Props](#mod-props) below, or the full reference in [Runtime API](docs/runtime.md#style-props).
|
|
233
192
|
|
|
234
193
|
## Choose a Styling Approach
|
|
235
194
|
|
|
@@ -400,214 +359,99 @@ fill: {
|
|
|
400
359
|
|
|
401
360
|
### Sub-Element Styling
|
|
402
361
|
|
|
403
|
-
|
|
362
|
+
Compound components can style inner parts from the parent definition with capitalized keys in `styles` and optional `elements` declarations, producing typed sub-components like `<Card.Title />` instead of separate wrapper components or ad hoc class naming.
|
|
404
363
|
|
|
405
|
-
|
|
406
|
-
const Card = tasty({
|
|
407
|
-
styles: {
|
|
408
|
-
padding: '4x',
|
|
409
|
-
Title: { preset: 'h3', color: '#primary' },
|
|
410
|
-
Content: { color: '#text', preset: 't2' },
|
|
411
|
-
},
|
|
412
|
-
elements: { Title: 'h2', Content: 'div' },
|
|
413
|
-
});
|
|
364
|
+
Sub-elements share the root state context by default, so keys like `:hover`, modifiers, root states, and media queries resolve as one coordinated styling block. Use `@own(...)` when a sub-element should react to its own state, and use the `$` selector affix when you need precise descendant targeting.
|
|
414
365
|
|
|
415
|
-
|
|
416
|
-
<Card.Title>Heading</Card.Title>
|
|
417
|
-
<Card.Content>Body text</Card.Content>
|
|
418
|
-
</Card>
|
|
419
|
-
```
|
|
366
|
+
See [Runtime API - Sub-element Styling](docs/runtime.md#sub-element-styling), [Style DSL - Advanced States](docs/dsl.md#advanced-states--prefix), and [Methodology](docs/methodology.md#component-architecture-root--sub-elements).
|
|
420
367
|
|
|
421
|
-
|
|
368
|
+
### Style Props
|
|
422
369
|
|
|
423
|
-
|
|
370
|
+
`styleProps` exposes selected CSS properties as typed React props. Components control which properties to open up; consumers get layout and composition knobs without `styles` overrides. Supports state maps for responsive values.
|
|
424
371
|
|
|
425
|
-
|
|
372
|
+
```tsx
|
|
373
|
+
const Space = tasty({
|
|
374
|
+
styles: { display: 'flex', flow: 'column', gap: '1x' },
|
|
375
|
+
styleProps: FLOW_STYLES,
|
|
376
|
+
});
|
|
426
377
|
|
|
427
|
-
|
|
378
|
+
<Space flow="row" gap={{ '': '2x', '@tablet': '4x' }}>
|
|
379
|
+
```
|
|
428
380
|
|
|
429
|
-
|
|
381
|
+
See [Runtime API - Style Props](docs/runtime.md#style-props) and [Methodology - styleProps](docs/methodology.md#styleprops-as-the-public-api).
|
|
430
382
|
|
|
431
|
-
###
|
|
383
|
+
### Mod Props
|
|
432
384
|
|
|
433
|
-
|
|
385
|
+
`modProps` exposes modifier keys as typed React props — the modifier equivalent of `styleProps`. Accepts an array of key names or an object with type descriptors (`Boolean`, `String`, `Number`, or enum arrays) for full TypeScript autocomplete.
|
|
434
386
|
|
|
435
387
|
```tsx
|
|
436
388
|
const Button = tasty({
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
389
|
+
as: 'button',
|
|
390
|
+
modProps: { isLoading: Boolean, size: ['sm', 'md', 'lg'] as const },
|
|
391
|
+
styles: {
|
|
392
|
+
fill: { '': '#primary', isLoading: '#primary.5' },
|
|
393
|
+
padding: { '': '2x 4x', 'size=sm': '1x 2x' },
|
|
442
394
|
},
|
|
443
395
|
});
|
|
444
396
|
|
|
445
|
-
<Button
|
|
397
|
+
<Button isLoading size="lg">Submit</Button>
|
|
446
398
|
```
|
|
447
399
|
|
|
448
|
-
|
|
400
|
+
See [Runtime API - Mod Props](docs/runtime.md#mod-props) and [Methodology - modProps](docs/methodology.md#modprops-and-mods).
|
|
449
401
|
|
|
450
|
-
|
|
402
|
+
### Variants
|
|
451
403
|
|
|
452
|
-
|
|
453
|
-
configure({
|
|
454
|
-
recipes: {
|
|
455
|
-
card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
|
|
456
|
-
elevated: { shadow: '0 2x 4x #shadow' },
|
|
457
|
-
},
|
|
458
|
-
});
|
|
404
|
+
Variants let one component expose named visual versions without pre-generating a separate class for every possible combination. In runtime mode, Tasty emits only the variant CSS that is actually used.
|
|
459
405
|
|
|
460
|
-
|
|
461
|
-
styles: {
|
|
462
|
-
recipe: 'card elevated',
|
|
463
|
-
color: '#text',
|
|
464
|
-
},
|
|
465
|
-
});
|
|
466
|
-
```
|
|
406
|
+
See [Runtime API - Variants](docs/runtime.md#variants).
|
|
467
407
|
|
|
468
|
-
|
|
408
|
+
### Recipes
|
|
469
409
|
|
|
470
|
-
|
|
410
|
+
Recipes are reusable style bundles defined in `configure({ recipes })` and applied with the `recipe` style property. They are useful when your design system wants shared state logic or visual presets without forcing every component to repeat the same style map.
|
|
471
411
|
|
|
472
|
-
|
|
412
|
+
Use `/` to post-apply recipes after local styles when recipe states should win the final merge order, and use `none` to skip base recipes entirely.
|
|
473
413
|
|
|
474
|
-
|
|
414
|
+
See [Style DSL - Recipes](docs/dsl.md#recipes) and [Configuration - recipes](docs/configuration.md#recipes).
|
|
475
415
|
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
animation: 'pulse 2s infinite',
|
|
480
|
-
transform: 'scale($pulse-scale)',
|
|
481
|
-
'@keyframes': {
|
|
482
|
-
pulse: {
|
|
483
|
-
'0%, 100%': { '$pulse-scale': 1 },
|
|
484
|
-
'50%': { '$pulse-scale': 1.05 },
|
|
485
|
-
},
|
|
486
|
-
},
|
|
487
|
-
},
|
|
488
|
-
});
|
|
489
|
-
```
|
|
416
|
+
### Auto-Inferred `@property`
|
|
417
|
+
|
|
418
|
+
Tasty usually removes the need to hand-author CSS [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rules. When a custom property receives a concrete value, Tasty infers its syntax and registers the matching `@property` automatically, which makes transitions and animations on custom properties work without extra boilerplate.
|
|
490
419
|
|
|
491
|
-
|
|
420
|
+
If you prefer explicit control, disable inference with `configure({ autoPropertyTypes: false })` or declare the properties yourself.
|
|
492
421
|
|
|
493
|
-
|
|
422
|
+
See [Style DSL - Properties (`@property`)](docs/dsl.md#properties-property).
|
|
494
423
|
|
|
495
424
|
### Explicit `@properties`
|
|
496
425
|
|
|
497
|
-
|
|
426
|
+
Use explicit `@properties` only when you need to override defaults such as `inherits: false` or a custom `initialValue`.
|
|
498
427
|
|
|
499
|
-
|
|
500
|
-
'@properties': {
|
|
501
|
-
'$pulse-scale': { syntax: '<number>', inherits: false, initialValue: 1 },
|
|
502
|
-
},
|
|
503
|
-
```
|
|
428
|
+
See [Style DSL - Properties (`@property`)](docs/dsl.md#properties-property).
|
|
504
429
|
|
|
505
430
|
### React Hooks
|
|
506
431
|
|
|
507
|
-
|
|
432
|
+
When you do not need a full component wrapper, use the hooks directly: `useStyles` for local class names, `useGlobalStyles` for selector-scoped global CSS, `useRawCSS` for raw rules, plus `useKeyframes` and `useProperty` for animation and custom-property primitives.
|
|
508
433
|
|
|
509
|
-
|
|
510
|
-
import { useStyles, useGlobalStyles, useRawCSS } from '@tenphi/tasty';
|
|
511
|
-
|
|
512
|
-
function App() {
|
|
513
|
-
const { className } = useStyles({ padding: '2x', fill: '#surface' });
|
|
514
|
-
useGlobalStyles('body', { margin: '0' });
|
|
515
|
-
useRawCSS('@font-face { font-family: "Custom"; src: url(...); }');
|
|
516
|
-
|
|
517
|
-
return <main className={className}>...</main>;
|
|
518
|
-
}
|
|
519
|
-
```
|
|
434
|
+
See [Runtime API - Hooks](docs/runtime.md#hooks).
|
|
520
435
|
|
|
521
436
|
### Zero-Runtime Mode
|
|
522
437
|
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
```tsx
|
|
526
|
-
import { tastyStatic } from '@tenphi/tasty/static';
|
|
527
|
-
|
|
528
|
-
const card = tastyStatic({
|
|
529
|
-
padding: '4x',
|
|
530
|
-
fill: '#surface',
|
|
531
|
-
radius: '1r',
|
|
532
|
-
color: { '': '#text', '@dark': '#text-on-dark' },
|
|
533
|
-
});
|
|
438
|
+
Use `tastyStatic` when you want the same DSL and state model, but with CSS extracted at build time and no styling runtime in the client bundle. It is a strong fit for static sites, landing pages, and other build-time-first setups.
|
|
534
439
|
|
|
535
|
-
|
|
536
|
-
<div className={card}>Static styles, zero runtime</div>
|
|
537
|
-
```
|
|
538
|
-
|
|
539
|
-
Configure the Babel plugin:
|
|
540
|
-
|
|
541
|
-
```js
|
|
542
|
-
module.exports = {
|
|
543
|
-
plugins: [
|
|
544
|
-
['@tenphi/tasty/babel-plugin', {
|
|
545
|
-
output: 'public/tasty.css',
|
|
546
|
-
config: {
|
|
547
|
-
states: { '@dark': '@root(schema=dark)' },
|
|
548
|
-
},
|
|
549
|
-
}],
|
|
550
|
-
],
|
|
551
|
-
};
|
|
552
|
-
```
|
|
440
|
+
See [Zero Runtime (tastyStatic)](docs/tasty-static.md) and [Getting Started - Choosing a rendering mode](docs/getting-started.md#choosing-a-rendering-mode).
|
|
553
441
|
|
|
554
442
|
### `tasty` vs `tastyStatic`
|
|
555
443
|
|
|
556
|
-
|
|
557
|
-
|---|---|---|
|
|
558
|
-
| **Output** | React component | CSS class name |
|
|
559
|
-
| **CSS injection** | Runtime `<style>` tags | Build-time extraction |
|
|
560
|
-
| **Runtime cost** | Style generation on mount | None |
|
|
561
|
-
| **Generated CSS scope** | Only styles/variants used at runtime | All extracted static styles at build time |
|
|
562
|
-
| **Dynamic values** | Fully supported | Via CSS custom properties |
|
|
563
|
-
| **Sub-elements** | Built-in (`<C.Title>`) | Manual (`data-element`) |
|
|
564
|
-
| **Variants** | Built-in (`variants` option) | Separate static styles |
|
|
565
|
-
| **Framework** | React | Any (requires Babel) |
|
|
566
|
-
| **Best for** | Interactive apps with reusable stateful components, design systems | Static sites, SSG, landing pages |
|
|
444
|
+
`tasty()` returns React components and injects CSS on demand at runtime. `tastyStatic()` returns class names and extracts CSS during the build. Both share the same DSL, tokens, units, state mappings, and recipes, so the main choice is runtime flexibility versus build-time extraction.
|
|
567
445
|
|
|
568
|
-
|
|
446
|
+
See [Zero Runtime (tastyStatic)](docs/tasty-static.md), [Runtime API](docs/runtime.md), and [Comparison - Build-time vs runtime](docs/comparison.md#build-time-vs-runtime).
|
|
569
447
|
|
|
570
448
|
### Server-Side Rendering
|
|
571
449
|
|
|
572
|
-
SSR
|
|
450
|
+
SSR layers on top of runtime `tasty()` rather than introducing a separate styling model. Existing components stay unchanged while Tasty collects CSS during server rendering and hydrates the cache on the client.
|
|
573
451
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
```tsx
|
|
577
|
-
// app/tasty-registry.tsx
|
|
578
|
-
'use client';
|
|
579
|
-
|
|
580
|
-
import { TastyRegistry } from '@tenphi/tasty/ssr/next';
|
|
581
|
-
|
|
582
|
-
export default function TastyStyleRegistry({
|
|
583
|
-
children,
|
|
584
|
-
}: {
|
|
585
|
-
children: React.ReactNode;
|
|
586
|
-
}) {
|
|
587
|
-
return <TastyRegistry>{children}</TastyRegistry>;
|
|
588
|
-
}
|
|
589
|
-
```
|
|
590
|
-
|
|
591
|
-
```tsx
|
|
592
|
-
// app/layout.tsx
|
|
593
|
-
import TastyStyleRegistry from './tasty-registry';
|
|
594
|
-
|
|
595
|
-
export default function RootLayout({
|
|
596
|
-
children,
|
|
597
|
-
}: {
|
|
598
|
-
children: React.ReactNode;
|
|
599
|
-
}) {
|
|
600
|
-
return (
|
|
601
|
-
<html>
|
|
602
|
-
<body>
|
|
603
|
-
<TastyStyleRegistry>{children}</TastyStyleRegistry>
|
|
604
|
-
</body>
|
|
605
|
-
</html>
|
|
606
|
-
);
|
|
607
|
-
}
|
|
608
|
-
```
|
|
452
|
+
Use `@tenphi/tasty/ssr/next` for Next.js App Router, `@tenphi/tasty/ssr/astro` for Astro, or the core SSR API for other React SSR setups.
|
|
609
453
|
|
|
610
|
-
See the [full SSR guide](docs/ssr.md)
|
|
454
|
+
See the [full SSR guide](docs/ssr.md).
|
|
611
455
|
|
|
612
456
|
## Entry Points
|
|
613
457
|
|
package/dist/core/index.d.ts
CHANGED
|
@@ -16,11 +16,11 @@ import { TastyPlugin, TastyPluginFactory } from "../plugins/types.js";
|
|
|
16
16
|
import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "../config.js";
|
|
17
17
|
import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
|
|
18
18
|
import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "../chunks/definitions.js";
|
|
19
|
-
import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "../injector/index.js";
|
|
20
19
|
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
20
|
import { 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
21
|
import { styleHandlers } from "../styles/predefined.js";
|
|
23
22
|
import "../styles/index.js";
|
|
23
|
+
import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "../injector/index.js";
|
|
24
24
|
import { filterBaseProps } from "../utils/filter-base-props.js";
|
|
25
25
|
import { color } from "../utils/colors.js";
|
|
26
26
|
import { _modAttrs } from "../utils/mod-attrs.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -16,10 +16,9 @@ import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
|
|
|
16
16
|
import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
|
|
17
17
|
import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
|
|
18
18
|
import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
|
|
19
|
-
import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "./injector/index.js";
|
|
20
19
|
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
20
|
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, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty } from "./tasty.js";
|
|
21
|
+
import { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty } from "./tasty.js";
|
|
23
22
|
import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
|
|
24
23
|
import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
|
|
25
24
|
import { useRawCSS } from "./hooks/useRawCSS.js";
|
|
@@ -27,6 +26,7 @@ import { useKeyframes } from "./hooks/useKeyframes.js";
|
|
|
27
26
|
import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
|
|
28
27
|
import { getDisplayName } from "./utils/get-display-name.js";
|
|
29
28
|
import { styleHandlers } from "./styles/predefined.js";
|
|
29
|
+
import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "./injector/index.js";
|
|
30
30
|
import { filterBaseProps } from "./utils/filter-base-props.js";
|
|
31
31
|
import { color } from "./utils/colors.js";
|
|
32
32
|
import { _modAttrs } from "./utils/mod-attrs.js";
|
|
@@ -45,5 +45,5 @@ declare module './utils/css-types' {
|
|
|
45
45
|
interface CSSProperties extends CSSProperties$1 {}
|
|
46
46
|
}
|
|
47
47
|
//#endregion
|
|
48
|
-
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, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, 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, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, categorizeStyleKeys, cleanup, color, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, 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, stringifyTokens, styleHandlers, tasty, tastyDebug, trackRef, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
|
|
48
|
+
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, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, 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, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, 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, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, categorizeStyleKeys, cleanup, color, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, 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, stringifyTokens, styleHandlers, tasty, tastyDebug, trackRef, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
|
|
49
49
|
//# sourceMappingURL=index.d.ts.map
|