cssints 0.1.0 → 0.3.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.
Files changed (161) hide show
  1. package/README.md +107 -53
  2. package/dist/check.mjs +2 -2
  3. package/dist/{contrast-BUKVao74.mjs → contrast-B49XCnVX.mjs} +2 -2
  4. package/dist/devtools-link-D2YxsJKZ.mjs +94 -0
  5. package/dist/devtools-link.d.mts +55 -0
  6. package/dist/devtools-link.mjs +2 -0
  7. package/dist/group-common-9zpBxfUF.d.mts +1 -0
  8. package/dist/group-types-9ttphdku.d.mts +55 -0
  9. package/dist/groups/baseline-2015/with-downstream.d.mts +81 -0
  10. package/dist/groups/baseline-2015.d.mts +291 -0
  11. package/dist/groups/baseline-2016/with-downstream.d.mts +86 -0
  12. package/dist/groups/baseline-2016.d.mts +310 -0
  13. package/dist/groups/baseline-2017/with-downstream.d.mts +94 -0
  14. package/dist/groups/baseline-2017.d.mts +365 -0
  15. package/dist/groups/baseline-2018/with-downstream.d.mts +94 -0
  16. package/dist/groups/baseline-2018.d.mts +368 -0
  17. package/dist/groups/baseline-2019/with-downstream.d.mts +97 -0
  18. package/dist/groups/baseline-2019.d.mts +375 -0
  19. package/dist/groups/baseline-2020/with-downstream.d.mts +112 -0
  20. package/dist/groups/baseline-2020.d.mts +480 -0
  21. package/dist/groups/baseline-2021/with-downstream.d.mts +125 -0
  22. package/dist/groups/baseline-2021.d.mts +536 -0
  23. package/dist/groups/baseline-2022/with-downstream.d.mts +126 -0
  24. package/dist/groups/baseline-2022.d.mts +562 -0
  25. package/dist/groups/baseline-2023/with-downstream.d.mts +120 -0
  26. package/dist/groups/baseline-2023.d.mts +606 -0
  27. package/dist/groups/baseline-2024/with-downstream.d.mts +627 -0
  28. package/dist/groups/baseline-2024.d.mts +632 -0
  29. package/dist/groups/baseline-2025/with-downstream.d.mts +628 -0
  30. package/dist/groups/baseline-2025.d.mts +640 -0
  31. package/dist/groups/baseline-2026/with-downstream.d.mts +3 -0
  32. package/dist/groups/baseline-2026.d.mts +3 -0
  33. package/dist/groups/compositing-2.d.mts +20 -0
  34. package/dist/groups/css-align-3.d.mts +29 -0
  35. package/dist/groups/css-anchor-position-1.d.mts +49 -0
  36. package/dist/groups/css-anchor-position-2.d.mts +50 -0
  37. package/dist/groups/css-animations-1.d.mts +28 -0
  38. package/dist/groups/css-animations-2.d.mts +29 -0
  39. package/dist/groups/css-backgrounds-3.d.mts +27 -0
  40. package/dist/groups/css-backgrounds-4.d.mts +29 -0
  41. package/dist/groups/css-borders-4.d.mts +95 -0
  42. package/dist/groups/css-box-4.d.mts +38 -0
  43. package/dist/groups/css-break-4.d.mts +23 -0
  44. package/dist/groups/css-cascade-5.d.mts +18 -0
  45. package/dist/groups/css-cascade-6.d.mts +18 -0
  46. package/dist/groups/css-color-4.d.mts +29 -0
  47. package/dist/groups/css-color-5.d.mts +32 -0
  48. package/dist/groups/css-color-6.d.mts +32 -0
  49. package/dist/groups/css-color-adjust-1.d.mts +20 -0
  50. package/dist/groups/css-color-hdr-1.d.mts +19 -0
  51. package/dist/groups/css-conditional-3.d.mts +17 -0
  52. package/dist/groups/css-conditional-4.d.mts +17 -0
  53. package/dist/groups/css-conditional-5.d.mts +22 -0
  54. package/dist/groups/css-contain-2.d.mts +19 -0
  55. package/dist/groups/css-content-3.d.mts +23 -0
  56. package/dist/groups/css-counter-styles-3.d.mts +16 -0
  57. package/dist/groups/css-display-4.d.mts +22 -0
  58. package/dist/groups/css-easing-2.d.mts +18 -0
  59. package/dist/groups/css-env-1.d.mts +16 -0
  60. package/dist/groups/css-flexbox-1.d.mts +24 -0
  61. package/dist/groups/css-fonts-4.d.mts +46 -0
  62. package/dist/groups/css-fonts-5.d.mts +44 -0
  63. package/dist/groups/css-forms-1.d.mts +19 -0
  64. package/dist/groups/css-gaps-1.d.mts +21 -0
  65. package/dist/groups/css-gcpm-3.d.mts +20 -0
  66. package/dist/groups/css-gcpm-4.d.mts +20 -0
  67. package/dist/groups/css-grid-2.d.mts +34 -0
  68. package/dist/groups/css-grid-3.d.mts +34 -0
  69. package/dist/groups/css-images-3.d.mts +25 -0
  70. package/dist/groups/css-images-4.d.mts +32 -0
  71. package/dist/groups/css-images-5.d.mts +33 -0
  72. package/dist/groups/css-inline-3.d.mts +28 -0
  73. package/dist/groups/css-lists-3.d.mts +26 -0
  74. package/dist/groups/css-logical-1.d.mts +35 -0
  75. package/dist/groups/css-masking-1.d.mts +37 -0
  76. package/dist/groups/css-multicol-2.d.mts +24 -0
  77. package/dist/groups/css-overflow-3.d.mts +28 -0
  78. package/dist/groups/css-overflow-4.d.mts +29 -0
  79. package/dist/groups/css-overflow-5.d.mts +31 -0
  80. package/dist/groups/css-overscroll-1.d.mts +22 -0
  81. package/dist/groups/css-page-3.d.mts +18 -0
  82. package/dist/groups/css-page-floats-3.d.mts +19 -0
  83. package/dist/groups/css-position-3.d.mts +29 -0
  84. package/dist/groups/css-position-4.d.mts +30 -0
  85. package/dist/groups/css-rhythm-1.d.mts +18 -0
  86. package/dist/groups/css-round-display-1.d.mts +16 -0
  87. package/dist/groups/css-ruby-1.d.mts +21 -0
  88. package/dist/groups/css-scroll-anchoring-1.d.mts +18 -0
  89. package/dist/groups/css-scroll-snap-1.d.mts +42 -0
  90. package/dist/groups/css-scroll-snap-2.d.mts +43 -0
  91. package/dist/groups/css-scrollbars-1.d.mts +19 -0
  92. package/dist/groups/css-shapes-1.d.mts +27 -0
  93. package/dist/groups/css-shapes-2.d.mts +27 -0
  94. package/dist/groups/css-size-adjust-1.d.mts +18 -0
  95. package/dist/groups/css-sizing-3.d.mts +34 -0
  96. package/dist/groups/css-sizing-4.d.mts +33 -0
  97. package/dist/groups/css-speech-1.d.mts +18 -0
  98. package/dist/groups/css-tables-3.d.mts +22 -0
  99. package/dist/groups/css-text-3.d.mts +36 -0
  100. package/dist/groups/css-text-4.d.mts +40 -0
  101. package/dist/groups/css-text-decor-3.d.mts +30 -0
  102. package/dist/groups/css-text-decor-4.d.mts +31 -0
  103. package/dist/groups/css-transforms-1.d.mts +31 -0
  104. package/dist/groups/css-transforms-2.d.mts +48 -0
  105. package/dist/groups/css-transitions-1.d.mts +22 -0
  106. package/dist/groups/css-transitions-2.d.mts +23 -0
  107. package/dist/groups/css-ui-4.d.mts +35 -0
  108. package/dist/groups/css-values-4.d.mts +38 -0
  109. package/dist/groups/css-values-5.d.mts +43 -0
  110. package/dist/groups/css-variables-2.d.mts +6 -0
  111. package/dist/groups/css-view-transitions-2.d.mts +20 -0
  112. package/dist/groups/css-viewport.d.mts +18 -0
  113. package/dist/groups/css-will-change-1.d.mts +18 -0
  114. package/dist/groups/css-writing-modes-4.d.mts +22 -0
  115. package/dist/groups/css2.d.mts +19 -0
  116. package/dist/groups/fill-stroke-3.d.mts +27 -0
  117. package/dist/groups/filter-effects-1.d.mts +32 -0
  118. package/dist/groups/filter-effects-2.d.mts +33 -0
  119. package/dist/groups/limited-availability.d.mts +2 -0
  120. package/dist/groups/mediaqueries-4.d.mts +16 -0
  121. package/dist/groups/mediaqueries-5.d.mts +16 -0
  122. package/dist/groups/motion-1.d.mts +24 -0
  123. package/dist/groups/newly-available/with-downstream.d.mts +632 -0
  124. package/dist/groups/newly-available.d.mts +631 -0
  125. package/dist/groups/not-discouraged.d.mts +727 -0
  126. package/dist/groups/scroll-animations-1.d.mts +30 -0
  127. package/dist/groups/selectors-4.d.mts +54 -0
  128. package/dist/groups/selectors-5.d.mts +54 -0
  129. package/dist/groups/widely-available/with-downstream.d.mts +121 -0
  130. package/dist/groups/widely-available.d.mts +616 -0
  131. package/dist/index.d.mts +19 -5
  132. package/dist/index.mjs +166 -14
  133. package/dist/instrument-BqIZpbIU.mjs +3956 -0
  134. package/dist/{lowered-CeoXbm0P.mjs → lowered-aJVapQT6.mjs} +1 -1
  135. package/dist/{node-CdhAGmF3.d.mts → node-OJ_w_Usj.d.mts} +4 -0
  136. package/dist/plugin-types.d.mts +8 -1
  137. package/dist/plugin.d.mts +2 -2
  138. package/dist/plugin.mjs +8 -1
  139. package/dist/{registry-n9JCX4pl.mjs → registry-BUSEO32-.mjs} +8 -1
  140. package/dist/runtime-Dt4Tm0Q7.d.mts +19 -0
  141. package/dist/runtime.d.mts +1 -1
  142. package/dist/runtime.mjs +6 -2
  143. package/dist/{scope-oWEaWE9n.d.mts → scope-INuJD4RT.d.mts} +18 -5
  144. package/dist/{sheet-CO7a-mdA.mjs → sheet-BeHdq4xt.mjs} +2 -1
  145. package/dist/surface.d.mts +1 -1
  146. package/dist/{theme-BGEbFAYh.mjs → theme-SlQ73rFL.mjs} +31 -8
  147. package/dist/{theme-types-DHdtTZhz.d.mts → theme-types-Bqv0Ggz_.d.mts} +11 -6
  148. package/dist/tui-types.d.mts +1 -1
  149. package/dist/tui.d.mts +1 -8
  150. package/dist/tui.mjs +35 -7
  151. package/dist/types.d.mts +1 -1
  152. package/dist/vite.d.mts +20 -2
  153. package/dist/vite.mjs +90 -41
  154. package/docs/API.md +519 -251
  155. package/package.json +10 -2
  156. package/skills/cssints/SKILL.md +12 -9
  157. package/skills/cssints/references/errors.md +8 -7
  158. package/skills/cssints-plugin/SKILL.md +3 -1
  159. package/dist/instrument-Bdtk2INz.mjs +0 -172
  160. package/dist/lib-2OEIfPAE.d.mts +0 -9
  161. package/dist/runtime-CTvuM-Hm.d.mts +0 -5
package/README.md CHANGED
@@ -2,39 +2,56 @@
2
2
 
3
3
  <img src="https://cssints.dev/logo.svg" alt="" width="96" height="96">
4
4
 
5
- cssints is compile-time CSS-in-TypeScript. You write calls such as `css.flex().alignItems("center")`. A Vite plugin runs them at build time and replaces each one with atomic, content-hashed class names in `@layer`s. Nothing of the styling code ships to the browser except `cx` and the few lines behind `cv`, which join class names.
5
+ cssints is compile-time CSS-in-TypeScript. You write calls such as `css.flex().alignItems("center")`. A Vite plugin runs them at build time and replaces each one with atomic, content-hashed class names in `@layer`s. Nothing of the styling code ships to the browser except a few lines that join class names: for a `cn()` with runtime arguments and for `cv`.
6
6
 
7
7
  - Values are checked against the spec grammars (mdn-data) in the types and again at build time. A typo is an error in the editor and in the build.
8
8
  - Conditions (`media`, `container`, `supports`, `hover`), variants (`cv`), design tokens and themes (`createTokens`, `createGlobalTheme`, `check.contrast`) are all build-time, and all typed.
9
9
  - LightningCSS optimizes the output. Browser support (`@mdn/browser-compat-data` against your browserslist) is reported as warnings, except for what LightningCSS lowers for those targets.
10
10
 
11
- Status: 0.1 is not published yet. Decisions and findings are in [docs/wayfinder.md](docs/wayfinder.md); the API reference is [docs/API.md](docs/API.md). Both are also a site with search and type hovers: [apps/docs](apps/docs) (`cd apps/docs && bun run dev`); deployed to Cloudflare with Alchemy: <https://cssints.dev>.
11
+ > **Alpha.** cssints is on npm at 0.x. The API can still change between minor versions, the plugin packages
12
+ > may move, and some browsers and frameworks are checked less than others (docs/API.md, "Browser support and what 0.1
13
+ > does not have"). Pin the version, and report what breaks.
14
+
15
+ Decisions and findings are in [docs/wayfinder.md](docs/wayfinder.md); the API reference is [docs/API.md](docs/API.md). Both are also a site with search and type hovers: [apps/docs](apps/docs) (`cd apps/docs && bun run dev`); deployed to Cloudflare with Alchemy: <https://cssints.dev>.
12
16
 
13
17
  ## Install
14
18
 
15
- Not on npm yet. In this repo `cssints` is a workspace package (`apps/demo` depends on `"cssints": "workspace:*"`). It needs Vite 8 (Vite+ works too) and, for the plugin, Node with type stripping (22.18 or later).
19
+ ```bash
20
+ npm install --save-dev cssints vite@8 # or: bun add -d cssints vite@8, pnpm add -D cssints vite@8
21
+ ```
22
+
23
+ cssints needs Vite 8 (Vite+ works too) and Node 22.18 or later (the plugin runs your modules with type stripping). It is a
24
+ dev dependency: nothing of it ships except the few lines behind `cn` with runtime arguments and `cv`. The plugin packages are installed the same
25
+ way, each beside `cssints` (`npm install --save-dev @cssints/fluid`); the list is on the
26
+ [plugin packages](docs/API.md#plugin-packages-cssints-dk1q) page. In this repository `cssints` is a workspace package
27
+ (`"cssints": "workspace:*"`).
16
28
 
17
29
  ```ts
18
30
  // vite.config.ts
19
31
  import cssints, { cssTarget, targets } from "cssints/vite";
20
32
 
21
33
  export default {
22
- plugins: [cssints()],
23
- css: { transformer: "lightningcss", lightningcss: { targets } },
24
- build: { cssMinify: "lightningcss", cssTarget },
34
+ plugins: [cssints()],
35
+ css: { transformer: "lightningcss", lightningcss: { targets } },
36
+ build: { cssMinify: "lightningcss", cssTarget },
25
37
  };
26
38
  ```
27
39
 
28
40
  ```ts
29
41
  // the entry, once
30
42
  import "virtual:cssints.css";
43
+ import { reset } from "@cssints/reset" with { type: "cssints" };
44
+
45
+ reset();
31
46
  ```
32
47
 
48
+ `reset()` is the recommended start: [`@cssints/reset`](packages/reset/README.md) is a small modern reset in a layer below every style, so any style of yours beats it. A project without the call has none, as in any app.
49
+
33
50
  `targets` and `cssTarget` come from the browserslist query of the support warnings: the `BROWSERSLIST` variable, else the standard config (`"browserslist"` in `package.json` or `.browserslistrc`, with the `BROWSERSLIST_ENV`, `NODE_ENV` or `production` section), else `defaults`. The exports are computed when `vite.config.ts` is imported, before Vite's root is known, so they look the config up from `process.cwd()` and upward; the support warnings look it up from Vite's `root` (2026-10-09, cssints-p3d2). They are the same when Vite runs from the app's directory; with `vite <dir>` from elsewhere, give `targets` and `cssTarget` the app's config yourself. Vite's CSS minify reads `cssTarget`, not `targets`: without it the minifier merges the declarations of a `firstThatWorks` into the last one. Add `"types": ["vite/client"]` to `tsconfig.json` for the `virtual:` import.
34
51
 
35
52
  ### Frameworks
36
53
 
37
- Any framework that builds JSX through a Vite plugin works; the engine evaluates your modules itself, so it does not care what the plugin makes of JSX, nor in which order the plugins are listed. `apps/sky` is the Solid 2 app (`solid-js` and `@solidjs/web` 2.0.0-rc.13, `@solidjs/vite-plugin` 3.0.0-next.47):
54
+ Any framework that builds JSX through a Vite plugin works; the engine evaluates your modules itself, so it does not care what the plugin makes of JSX, nor in which order the plugins are listed. `apps/csssky` is the Solid 2 app (`solid-js` and `@solidjs/web` 2.0.0-rc.13, `@solidjs/vite-plugin` 3.0.0-next.47):
38
55
 
39
56
  ```ts skip
40
57
  // vite.config.ts
@@ -42,51 +59,89 @@ import solid from "@solidjs/vite-plugin";
42
59
  import cssints, { cssTarget, targets } from "cssints/vite";
43
60
 
44
61
  export default {
45
- plugins: [cssints(), solid()],
46
- css: { transformer: "lightningcss", lightningcss: { targets } },
47
- build: { cssMinify: "lightningcss", cssTarget },
62
+ plugins: [cssints(), solid()],
63
+ css: { transformer: "lightningcss", lightningcss: { targets } },
64
+ build: { cssMinify: "lightningcss", cssTarget },
48
65
  };
49
66
  ```
50
67
 
51
- `tsconfig.json` is Solid's: `"jsx": "preserve"`, `"jsxImportSource": "@solidjs/web"`, `"types": ["vite/client"]`. Solid's `class` takes a string, an object or an array, so `cx` is not needed: `class={[card, on() && p(4)]}` and `class={badge({ tone: tone() })}` work as in React. A site's arguments are still build-time values, so a signal goes in the condition or in a `cv` variant, not in `p(n())`. Under `vite dev` an edit of a component replaces it and resets its state below it (Solid's refresh); an edit of a style changes the class strings and the sheet with no reload.
68
+ `tsconfig.json` is Solid's: `"jsx": "preserve"`, `"jsxImportSource": "@solidjs/web"`, `"types": ["vite/client"]`. Solid's `class` takes a string, an object or an array, so `cn` is not needed for the join: `class={[card, on() && p(4)]}` and `class={badge({ tone: tone() })}` work as in React. A site's arguments are still build-time values, so a signal goes in the condition or in a `cv` variant, not in `p(n())`. Under `vite dev` an edit of a component replaces it and resets its state below it (Solid's refresh); an edit of a style changes the class strings and the sheet with no reload.
52
69
 
53
70
  ```tsx
54
- import { cx } from "cssints";
55
- import { bg, color, cn, cv, flex, hover, media, p, style, token } from "cssints" with { type: "cssints" };
71
+ import { reset } from "@cssints/reset" with { type: "cssints" };
72
+ import {
73
+ bg,
74
+ color,
75
+ cn,
76
+ cv,
77
+ flex,
78
+ hover,
79
+ media,
80
+ p,
81
+ style,
82
+ token,
83
+ } from "cssints" with { type: "cssints" };
84
+
85
+ reset();
56
86
 
57
87
  const md = media("(width >= 40rem)");
58
88
  const accent = token.color("#2563eb", "accent");
59
89
 
60
90
  const button = cv({
61
- base: cn(p(2), color("white"), bg(accent), hover(bg("#1d4ed8"))),
62
- variants: { wide: { true: md(p(4)) } },
91
+ base: cn(p(2), color("white"), bg(accent), hover(bg("#1d4ed8"))),
92
+ variants: { wide: { true: md(p(4)) } },
63
93
  });
64
94
 
65
95
  export const Row = ({ wide, on }: { wide?: boolean; on?: boolean }) => (
66
- <div className={cx(flex().alignItems("center").gap(2), on && p(1))} style={style(token.set(accent, "#dc2626"))}>
67
- <button className={button({ wide })}>Save</button>
68
- </div>
96
+ <div
97
+ className={cn(flex().alignItems("center").gap(2), on && p(1))}
98
+ style={style(token.set(accent, "#dc2626"))}
99
+ >
100
+ <button className={button({ wide })}>Save</button>
101
+ </div>
69
102
  );
70
103
  ```
71
104
 
72
- `with { type: "cssints" }` marks what runs at build time. The plugin replaces each call with a class string, so the browser gets `cx("_1s47490 _1ob5z5m _g2iyum", on && "_lqk467")` and `button` is a call of the runtime with `{ base: "_1t8gqy5 ...", ... }`, so it never sees `flex()`. `virtual:cssints.css` is one sheet with every rule once, sorted by layer, then condition, then shorthand before longhand, then class name:
105
+ `with { type: "cssints" }` marks what runs at build time. The plugin replaces each call with a class string, so the browser gets `__cx([], "_1s47490 _1ob5z5m _g2iyum", on && "_lqk467")` and `button` is a call of the runtime with `{ base: "_1t8gqy5 ...", ... }`, so it never sees `flex()`. `virtual:cssints.css` is one sheet with every rule once, sorted by layer, then condition, then shorthand before longhand, then class name (the `@layer reset { ... }` block of `reset()` comes first and is left out here):
73
106
 
74
107
  ```css
75
108
  @layer _.k, _.a, _.b, _.c, _.d, _.e;
76
- @property --accent{syntax:"<color>";inherits:true;initial-value:#2563eb}
109
+ @property --accent {
110
+ syntax: "<color>";
111
+ inherits: true;
112
+ initial-value: #2563eb;
113
+ }
77
114
  @layer _.a {
78
- ._1t8gqy5{padding:0.5rem}
79
- ._lqk467{padding:0.25rem}
80
- ._g2iyum{gap:0.5rem}
81
- ._17xzvrh{background-color:var(--accent)}
82
- ._1binn6n{color:white}
83
- ._1ob5z5m{align-items:center}
84
- ._1s47490{display:flex}
115
+ ._1t8gqy5 {
116
+ padding: 0.5rem;
117
+ }
118
+ ._lqk467 {
119
+ padding: 0.25rem;
120
+ }
121
+ ._g2iyum {
122
+ gap: 0.5rem;
123
+ }
124
+ ._17xzvrh {
125
+ background-color: var(--accent);
126
+ }
127
+ ._1binn6n {
128
+ color: white;
129
+ }
130
+ ._1ob5z5m {
131
+ align-items: center;
132
+ }
133
+ ._1s47490 {
134
+ display: flex;
135
+ }
85
136
  }
86
137
  @layer _.b {
87
- ._1tsjws2:hover{background-color:#1d4ed8}
138
+ ._1tsjws2:hover {
139
+ background-color: #1d4ed8;
140
+ }
88
141
  @media (width >= 40rem) {
89
- ._tdcza3{padding:1rem}
142
+ ._tdcza3 {
143
+ padding: 1rem;
144
+ }
90
145
  }
91
146
  }
92
147
  ```
@@ -95,7 +150,7 @@ export const Row = ({ wide, on }: { wide?: boolean; on?: boolean }) => (
95
150
 
96
151
  `import * as css from "cssints/tui" with { type: "cssints" }` gives the members a terminal has (cells, colours, borders, flex, states, `cursor`), and the plugin compiles them to prop objects for [OpenTUI](https://opentui.com) renderables instead of classes; `@cssints/tui` applies their states and themes: [packages/tui](packages/tui/README.md), docs/API.md "TUI".
97
152
 
98
- More in [docs/API.md](docs/API.md): property names and short names, `flex()` and `grid()` chains, conditions and layers, tokens and themes, `cx`, `cn` and `cv`, and the errors you can get.
153
+ More in [docs/API.md](docs/API.md): property names and short names, `flex()` and `grid()` chains, conditions and layers, tokens and themes, `cn` and `cv`, and the errors you can get.
99
154
 
100
155
  ## Debugging
101
156
 
@@ -104,7 +159,7 @@ More in [docs/API.md](docs/API.md): property names and short names, `flex()` and
104
159
  ## For agents
105
160
 
106
161
  `cssints` ships two [agent skills](https://agentskills.io) in its package, `skills/cssints` (writing styles: setup,
107
- `cn`/`cx`/`cv`, conditions, tokens and themes, the plugin packages, build errors) and `skills/cssints-plugin` (writing
162
+ `cn`/`cv`, conditions, tokens and themes, the plugin packages, build errors) and `skills/cssints-plugin` (writing
108
163
  a plugin on `scope()`, with its tests). Install them into your agent's skills folder:
109
164
 
110
165
  ```bash
@@ -112,8 +167,7 @@ npx skills-npm # links the skills of every instal
112
167
  npx skills add ./node_modules/cssints/skills # or the skills CLI, for opencode, Claude Code, Codex, Cursor, ...
113
168
  ```
114
169
 
115
- Until 0.1 is on npm, point `npx skills add` at `packages/cssints/skills` of this repository. Agents working on this
116
- repository get `.agents/skills/cssints-contributor` (also `.claude/skills`) with no install.
170
+ Agents working on this repository get `.agents/skills/cssints-contributor` (also `.claude/skills`) with no install.
117
171
 
118
172
  `@cssints/mcp` is an MCP server with the build's own checks (`check_declaration`, `check_support`, `check_contrast`,
119
173
  `compile`, `search_docs`, `list_plugins`), in [packages/mcp](packages/mcp) with the config for opencode, Claude Code
@@ -121,15 +175,15 @@ and Cursor. The skills use it when it is configured and work without it.
121
175
 
122
176
  ## Layout
123
177
 
124
- | Path | What |
125
- |---|---|
126
- | `packages/cssints` | Vite plugin (`cssints/vite`) on the Vite Module Runner, and the `cssints` library |
127
- | `packages/css-grammar` | Type-level recognizer and its runtime twin over mdn-data grammars, Typed OM values, browser support and prose rules |
128
- | `packages/icons` | `@cssints/icons`: icons from iconify JSON collections or SVG folders, a mask style with no runtime |
129
- | `packages/mise-en-mode` | `@cssints/mise-en-mode`: looks as themes in the layers app < author < viewer, on `data-mode` scopes, checked against the tokens and by `check.contrast` |
130
- | `apps/demo` | React demo of every 0.1 feature |
131
- | `apps/docs` | The documentation site: this file and `docs/API.md` as pages, with search and type hovers (`cd apps/docs && bun run dev`) |
132
- | `docs/research`, `docs/archive` | Comparisons with other libraries; outdated plans |
178
+ | Path | What |
179
+ | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
180
+ | `packages/cssints` | Vite plugin (`cssints/vite`) on the Vite Module Runner, and the `cssints` library |
181
+ | `packages/css-grammar` | Type-level recognizer and its runtime twin over mdn-data grammars, Typed OM values, browser support and prose rules |
182
+ | `packages/icons` | `@cssints/icons`: icons from iconify JSON collections or SVG folders, a mask style with no runtime |
183
+ | `packages/mise-en-mode` | `@cssints/mise-en-mode`: looks as themes in the layers app < author < viewer, on `data-mode` scopes, checked against the tokens and by `check.contrast` |
184
+ | `apps/demo` | React demo of every 0.1 feature |
185
+ | `apps/docs` | The documentation site: this file and `docs/API.md` as pages, with search and type hovers (`cd apps/docs && bun run dev`) |
186
+ | `docs/research`, `docs/archive` | Comparisons with other libraries; outdated plans |
133
187
 
134
188
  ## Development
135
189
 
@@ -151,16 +205,16 @@ cssints is MIT. It stands on other people's work; this is what we took, from who
151
205
 
152
206
  ### Data and code that ships
153
207
 
154
- | Where | What | From | License |
155
- |---|---|---|---|
156
- | [@cssints/tokens](packages/tokens/README.md) | the Open Props, Radix Colors, Flexoki and Reasonable Colors sets | [Open Props](https://github.com/argyleink/open-props) (Adam Argyle), [Radix Colors](https://github.com/radix-ui/colors), [Flexoki](https://github.com/kepano/flexoki) (Steph Ango), [Reasonable Colors](https://github.com/matthewhowell/reasonable-colors) (Matthew Howell) | MIT, notices in its README |
157
- | [@cssints/css-grammar](packages/css-grammar/THIRD_PARTY_NOTICES.md) | the CSS syntax strings (`src/mdn.ts`, `keywords.ts`, `functions.ts`), also in the types of `cssints` | [mdn-data](https://github.com/mdn/data); the numeric ranges it omits from [@webref/css](https://github.com/w3c/webref) | CC0-1.0; MIT (W3C) |
158
- | @cssints/css-grammar | browser support warnings, read from the package (not copied) | [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) | CC0-1.0 |
159
- | [@cssints/fonts](packages/fonts/README.md) | the latin character weights and the metrics of Arial, Times New Roman and Courier New | [Capsize](https://github.com/seek-oss/capsize) (SEEK) | MIT, notice in its README |
160
- | [@cssints/icons](packages/icons/README.md) | nothing: the collections are your dependency | [Iconify](https://iconify.design) `@iconify-json/*` | each collection's own |
161
- | `tools/ai-automation/vendor` | lint rules, not published | [dmmulroy/anti-slop](https://github.com/dmmulroy/anti-slop) (Dillon Mulroy) | MIT, `LICENSE` and `UPSTREAM.md` |
162
- | [apps/sky](apps/sky/NOTICE.md) | layout and token values; Inter; Phosphor icons | Mu and `@bsky.app/alf` (Bluesky Social PBC), [Inter](https://github.com/rsms/inter), [Phosphor](https://phosphoricons.com) | MIT; OFL-1.1; MIT |
163
- | apps/demo | Material Design Icons (`@iconify-json/mdi`) | Pictogrammers | Apache-2.0 |
208
+ | Where | What | From | License |
209
+ | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
210
+ | [@cssints/tokens](packages/tokens/README.md) | the Open Props, Radix Colors, Flexoki and Reasonable Colors sets | [Open Props](https://github.com/argyleink/open-props) (Adam Argyle), [Radix Colors](https://github.com/radix-ui/colors), [Flexoki](https://github.com/kepano/flexoki) (Steph Ango), [Reasonable Colors](https://github.com/matthewhowell/reasonable-colors) (Matthew Howell) | MIT, notices in its README |
211
+ | [@cssints/css-grammar](packages/css-grammar/THIRD_PARTY_NOTICES.md) | the CSS syntax strings (`src/mdn.ts`, `keywords.ts`, `functions.ts`), also in the types of `cssints` | [mdn-data](https://github.com/mdn/data); the numeric ranges it omits from [@webref/css](https://github.com/w3c/webref) | CC0-1.0; MIT (W3C) |
212
+ | @cssints/css-grammar | browser support warnings, read from the package (not copied) | [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) | CC0-1.0 |
213
+ | [@cssints/fonts](packages/fonts/README.md) | the latin character weights and the metrics of Arial, Times New Roman and Courier New | [Capsize](https://github.com/seek-oss/capsize) (SEEK) | MIT, notice in its README |
214
+ | [@cssints/icons](packages/icons/README.md) | nothing: the collections are your dependency | [Iconify](https://iconify.design) `@iconify-json/*` | each collection's own |
215
+ | `tools/ai-automation/vendor` | lint rules, not published | [dmmulroy/anti-slop](https://github.com/dmmulroy/anti-slop) (Dillon Mulroy) | MIT, `LICENSE` and `UPSTREAM.md` |
216
+ | [apps/csssky](apps/csssky/NOTICE.md) | layout and token values; Inter; Phosphor icons | Mu and `@bsky.app/alf` (Bluesky Social PBC), [Inter](https://github.com/rsms/inter), [Phosphor](https://phosphoricons.com) | MIT; OFL-1.1; MIT |
217
+ | apps/demo | Material Design Icons (`@iconify-json/mdi`) | Pictogrammers | Apache-2.0 |
164
218
 
165
219
  ### Ideas and designs
166
220
 
@@ -168,7 +222,7 @@ No code is copied from these; each package README says which part follows which.
168
222
 
169
223
  - **Plugin packages.** [Every Layout](https://every-layout.dev) and [smolcss](https://smolcss.dev) (layout), [nytimes/text-balancer](https://github.com/nytimes/text-balancer) and [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) (balance), [fluid-tailwind](https://github.com/barvian/fluid-tailwind) (fluid), [postcss-easing-gradients](https://github.com/larsenwork/postcss-easing-gradients) (gradient), [tailwindcss-motion](https://github.com/romboHQ/tailwindcss-motion) and [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) (motion), [the supersonic plugin](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) and [lax.js](https://github.com/alexfoxy/lax.js) (reveal), [sync-skeleton](https://github.com/crutchcorn/sync-skeleton) (skeleton), [bramus/sticky-observer](https://github.com/bramus/sticky-observer) (stuck), [unpic-placeholder](https://github.com/ascorbic/unpic-placeholder) and [ThumbHash](https://github.com/evanw/thumbhash) (placeholder), [nutelch](https://github.com/meodai/nutelch) and [Leonardo](https://github.com/adobe/leonardo) (ramp), the resets of Josh Comeau, Jake Lazaroff, Vale and Andy Bell (reset), [Mise en Mode](https://standard.mode.place) and its Mode Contract (mise-en-mode), [brendonovich/vite-plugin-opencode](https://github.com/Brendonovich/vite-plugin-opencode) (the prompt box of devtools).
170
224
  - **The engine.** The comparisons in [docs/research](docs/research) record what we took from [StyleX](https://stylexjs.com), [vanilla-extract](https://vanilla-extract.style), [Tailwind CSS](https://tailwindcss.com), [Tokenami](https://tokenami.com), [SugarCube](https://sugarcube.sh) and the [React Spectrum](https://react-spectrum.adobe.com) style macros; the first spark was [Haz's post](https://bsky.app/profile/haz.dev/post/3mebm2mx6jk27) on a CSS framework in TypeScript. Tokens follow the [Design Tokens Community Group](https://www.designtokens.org) format.
171
- - **apps/sky** follows the look of Mu and the hue slider of Witchsky.
225
+ - **apps/csssky** follows the look of Mu and the hue slider of Witchsky.
172
226
 
173
227
  ### Built on
174
228
 
package/dist/check.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { s as ContrastError } from "./registry-n9JCX4pl.mjs";
2
- import { t as fallbackOf } from "./lowered-CeoXbm0P.mjs";
1
+ import { s as ContrastError } from "./registry-BUSEO32-.mjs";
2
+ import { t as fallbackOf } from "./lowered-aJVapQT6.mjs";
3
3
  import { i as shown, r as ratio, t as luminance } from "./color-BYIxVLlS.mjs";
4
4
  import { Effect } from "effect";
5
5
  //#region src/check.ts
@@ -1,5 +1,5 @@
1
- import { a as registry, d as MacroError, o as warn } from "./registry-n9JCX4pl.mjs";
2
- import { l as layerStatements } from "./sheet-CO7a-mdA.mjs";
1
+ import { a as registry, d as MacroError, o as warn } from "./registry-BUSEO32-.mjs";
2
+ import { l as layerStatements } from "./sheet-BeHdq4xt.mjs";
3
3
  import { Effect } from "effect";
4
4
  //#region src/contrast.ts
5
5
  const VAR = /var\((--[^\s,)]+)\)/g;
@@ -0,0 +1,94 @@
1
+ import { join, relative, sep } from "node:path";
2
+ import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
3
+ //#region src/devtools-link.ts
4
+ /**
5
+ * The repository of an app is the workspace of its sessions: the nearest folder up with a `.git` (a file in a worktree).
6
+ * @param {string} from a folder
7
+ * @returns {string} the repository, or `from` when there is none
8
+ */
9
+ const gitRoot = (from) => from.split(sep).map((_, i, parts) => parts.slice(0, parts.length - i).join(sep) || sep).find((dir) => existsSync(join(dir, ".git"))) ?? from;
10
+ const dir = (git) => join(git, "node_modules/.cache/cssints-devtools");
11
+ /**
12
+ * @param {string} git the repository
13
+ * @param {string} root the Vite root of a dev server
14
+ * @returns {string} its id
15
+ */
16
+ const serverId = (git, root) => relative(git, root).split(sep).join("-") || "root";
17
+ const read = (file) => {
18
+ try {
19
+ return JSON.parse(readFileSync(file, "utf8"));
20
+ } catch {
21
+ return {};
22
+ }
23
+ };
24
+ const alive = (pid) => {
25
+ try {
26
+ process.kill(pid, 0);
27
+ return true;
28
+ } catch (e) {
29
+ return e.code === "EPERM";
30
+ }
31
+ };
32
+ /**
33
+ * A dev server announces itself.
34
+ * @param {string} git the repository
35
+ * @param {string} root the Vite root
36
+ * @param {string} url where it listens
37
+ * @returns {() => void} the call that removes the announcement
38
+ */
39
+ const register = (git, root, url) => {
40
+ const file = join(dir(git), `${serverId(git, root)}.json`);
41
+ mkdirSync(dir(git), { recursive: true });
42
+ writeFileSync(file, JSON.stringify({
43
+ root,
44
+ pid: process.pid,
45
+ url
46
+ }));
47
+ return () => rmSync(file, { force: true });
48
+ };
49
+ /**
50
+ * The dev servers that run now. A file whose process is gone (a crash left it) is removed.
51
+ * ponytail: a reused pid keeps a stale file alive; the dev server rewrites it on its next start.
52
+ * @param {string} git the repository
53
+ * @returns {DevServer[]} the live ones, by id
54
+ */
55
+ const servers = (git) => {
56
+ if (!existsSync(dir(git))) return [];
57
+ return readdirSync(dir(git)).filter((f) => f.endsWith(".json") && !f.endsWith(".session.json")).flatMap((f) => {
58
+ const { root, pid, url } = read(join(dir(git), f));
59
+ if (typeof root !== "string" || typeof pid !== "number" || typeof url !== "string") return [];
60
+ if (alive(pid)) return [{
61
+ id: f.slice(0, -5),
62
+ root,
63
+ pid,
64
+ url
65
+ }];
66
+ rmSync(join(dir(git), f), { force: true });
67
+ return [];
68
+ }).sort((a, b) => a.id.localeCompare(b.id));
69
+ };
70
+ /**
71
+ * @param {string} git the repository
72
+ * @param {string} id a dev server's id
73
+ * @returns {string | undefined} the session its prompts go to, if one is attached
74
+ */
75
+ const sessionOf = (git, id) => {
76
+ const { sessionID } = read(join(dir(git), `${id}.session.json`));
77
+ return typeof sessionID === "string" ? sessionID : void 0;
78
+ };
79
+ /**
80
+ * Attach a session to a dev server, or detach it.
81
+ * @param {string} git the repository
82
+ * @param {string} id a dev server's id
83
+ * @param {string} [sessionID] the session; none detaches
84
+ * @returns {void}
85
+ */
86
+ const attach = (git, id, sessionID) => {
87
+ const file = join(dir(git), `${id}.session.json`);
88
+ if (sessionID) {
89
+ mkdirSync(dir(git), { recursive: true });
90
+ writeFileSync(file, JSON.stringify({ sessionID }));
91
+ } else rmSync(file, { force: true });
92
+ };
93
+ //#endregion
94
+ export { servers as a, serverId as i, gitRoot as n, sessionOf as o, register as r, attach as t };
@@ -0,0 +1,55 @@
1
+ //#region src/devtools-link.d.ts
2
+ /** A running dev server, as it announced itself. */
3
+ export interface DevServer {
4
+ id: string;
5
+ root: string;
6
+ pid: number;
7
+ url: string;
8
+ }
9
+ /**
10
+ * The repository of an app is the workspace of its sessions: the nearest folder up with a `.git` (a file in a worktree).
11
+ * @param {string} from a folder
12
+ * @returns {string} the repository, or `from` when there is none
13
+ */
14
+ export declare const gitRoot: (from: string) => string;
15
+ /**
16
+ * @param {string} git the repository
17
+ * @param {string} root the Vite root of a dev server
18
+ * @returns {string} its id
19
+ */
20
+ export declare const serverId: (git: string, root: string) => string;
21
+ /**
22
+ * A dev server announces itself.
23
+ * @param {string} git the repository
24
+ * @param {string} root the Vite root
25
+ * @param {string} url where it listens
26
+ * @returns {() => void} the call that removes the announcement
27
+ */
28
+ export declare const register: (git: string, root: string, url: string) => () => void;
29
+ /**
30
+ * The dev servers that run now. A file whose process is gone (a crash left it) is removed.
31
+ * ponytail: a reused pid keeps a stale file alive; the dev server rewrites it on its next start.
32
+ * @param {string} git the repository
33
+ * @returns {DevServer[]} the live ones, by id
34
+ */
35
+ export declare const servers: (git: string) => {
36
+ id: string;
37
+ root: string;
38
+ pid: number;
39
+ url: string;
40
+ }[];
41
+ /**
42
+ * @param {string} git the repository
43
+ * @param {string} id a dev server's id
44
+ * @returns {string | undefined} the session its prompts go to, if one is attached
45
+ */
46
+ export declare const sessionOf: (git: string, id: string) => string | undefined;
47
+ /**
48
+ * Attach a session to a dev server, or detach it.
49
+ * @param {string} git the repository
50
+ * @param {string} id a dev server's id
51
+ * @param {string} [sessionID] the session; none detaches
52
+ * @returns {void}
53
+ */
54
+ export declare const attach: (git: string, id: string, sessionID?: string) => void;
55
+ //#endregion
@@ -0,0 +1,2 @@
1
+ import { a as servers, i as serverId, n as gitRoot, o as sessionOf, r as register, t as attach } from "./devtools-link-D2YxsJKZ.mjs";
2
+ export { attach, gitRoot, register, serverId, servers, sessionOf };
@@ -0,0 +1 @@
1
+ import "./theme-types-Bqv0Ggz_.mjs";
@@ -0,0 +1,55 @@
1
+ import { $p as Fn, Qp as CheckMath, Xp as Arg, Zp as CheckFn, am as Fallback, cm as Text, em as Result, om as Part, rm as Check, sm as Style, tm as Text$1 } from "./theme-types-Bqv0Ggz_.mjs";
2
+ import { properties } from "@cssints/css-grammar/mdn";
3
+ import { CSSStyleValue } from "@cssints/css-grammar/values";
4
+ import { QueryKind, ValidQuery } from "@cssints/css-grammar/query";
5
+ //#region src/group-types.d.ts
6
+ /**
7
+ * What a group bans. `kw`: by property, its keywords, and `name(` for a function only that property has; `fn`: functions
8
+ * (anywhere); `unit`; `media`, `container`, `supports`: the words of a query (`scroll-state(`).
9
+ */
10
+ interface Ban {
11
+ id: string;
12
+ kw: Record<string, string>;
13
+ fn: string;
14
+ unit: string;
15
+ media: string;
16
+ container: string;
17
+ supports: string;
18
+ }
19
+ type Sep = " " | "," | ")" | "/" | ":" | ";" | '"' | "'" | "<" | ">" | "=" | "+" | "*" | "[" | "]" | "{" | "}" | "!" | "#" | "%" | "." | "⟨" | "⟩" | "&" | "|" | "\n" | "\t";
20
+ type Words<S extends string, W extends string = "", Acc extends string = never> = S extends `${infer C}${infer R}` ? C extends "(" ? Words<R, "", Acc | (W extends "" ? never : `${W}(`)> : C extends Sep ? Words<R, "", Acc | W> : Words<R, `${W}${C}`, Acc> : Acc | W;
21
+ type Banned<B extends Ban, K extends string> = K | `${B["fn"]}(` | `${number}${B["unit"]}`;
22
+ type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
23
+ type Seen<B extends Ban, K extends string> = K | `${B["fn"]}(` | `${Digit}${B["unit"]}`;
24
+ type Hit<B extends Ban, K extends string, S extends string> = S extends `${string}${Seen<B, K>}${string}` ? Extract<Words<S>, Banned<B, K>> : never;
25
+ type Said<T extends string> = T extends `${infer N}(` ? `${N}()` : T;
26
+ type Msg<B extends Ban, L extends string, T extends string> = `${L}: "${Said<T>}" is not in cssints/${B["id"]}`;
27
+ type KwOf<B extends Ban, P extends string> = P extends keyof B["kw"] ? B["kw"][P] : never;
28
+ type Same<A, C> = [A] extends [C] ? ([C] extends [A] ? true : false) : false;
29
+ type PartText<P> = P extends Fallback<infer V> ? Text<V[number]> : Text<P>;
30
+ type Scan<B extends Ban, K extends string, L extends string, A extends readonly Part[]> = { [I in keyof A]: Hit<B, K, PartText<A[I]>> extends (infer T extends string) ? [T] extends [never] ? A[I] : Msg<B, L, T> : never; };
31
+ type Narrow<B extends Ban, P extends string, A extends readonly Part[], C> = Same<A, C> extends true ? Scan<B, KwOf<B, P>, P, A> : C;
32
+ /** A property of a group: `Prop` of types.ts, with the group's banned words refused. */
33
+ type GProp<B extends Ban, P extends keyof typeof properties, R = Style> = <const A extends readonly Part[]>(...parts: Narrow<B, P, A, Check<P, A>>) => R;
34
+ /** `flex` and `grid` of a group: `M` holds the chain methods whose property the group has. */
35
+ interface GLayout<B extends Ban, P extends "flex" | "grid", M extends Record<string, keyof typeof properties>> {
36
+ (): GChain<B, M>;
37
+ <const A extends readonly Part[]>(...parts: Narrow<B, P, A, Check<P, A>>): Style;
38
+ }
39
+ type GChain<B extends Ban, M extends Record<string, keyof typeof properties>> = Style & { readonly [K in keyof M]: GProp<B, M[K], GChain<B, M>>; };
40
+ type ScanArgs<B extends Ban, L extends string, A extends readonly Arg[]> = { [I in keyof A]: Hit<B, never, Text$1<A[I]>> extends (infer T extends string) ? [T] extends [never] ? A[I] : Msg<B, L, T> : never; };
41
+ type NarrowFn<B extends Ban, L extends string, A extends readonly Arg[], C> = Same<A, C> extends true ? ScanArgs<B, L, A> : C;
42
+ /** A css function of a group (`oklch`, `linearGradient`): `Fn` of function-types.ts, its arguments read for banned words. */
43
+ type GFn<B extends Ban, N extends string, Sep extends string> = <const A extends readonly Arg[]>(...parts: NarrowFn<B, `${N}()`, A, CheckFn<N, Sep, A>>) => ReturnType<Fn<N, Sep>>;
44
+ /** A math function of a group (`calc`, `min`). */
45
+ type GMath<B extends Ban, C extends "same" | "number" | "angle"> = <const A extends readonly Arg[]>(...parts: NarrowFn<B, "calc()", A, CheckMath<A>>) => CSSStyleValue<Result<C, A>>;
46
+ type Query<B extends Ban, K extends QueryKind> = K extends "media" ? B["media"] : K extends "container" ? B["container"] : B["supports"];
47
+ type GQ<B extends Ban, K extends QueryKind, Q extends string> = ValidQuery<K, Q> extends (infer V) ? [V] extends [Q] ? Hit<B, Query<B, K>, Q> extends (infer T extends string) ? [T] extends [never] ? Q : Msg<B, `@${K}`, T> : never : V : never;
48
+ /** `media`, `container` and `supports` of a group: `Condition` of css-grammar's query.ts, the media features it bans refused. */
49
+ interface GCondition<B extends Ban, K extends QueryKind, R> {
50
+ <const O extends Record<string, string>>(queries: { [P in keyof O]: GQ<B, K, O[P]>; }): { [P in keyof O]: R; };
51
+ <const Q extends readonly [string, string, ...string[]]>(...queries: { [I in keyof Q]: GQ<B, K, Q[I]>; }): { [I in keyof Q]: R; };
52
+ <const Q extends string>(query: GQ<B, K, Q>): R;
53
+ }
54
+ //#endregion
55
+ export { GProp as a, GMath as i, GFn as n, GLayout as r, GCondition as t };
@@ -0,0 +1,81 @@
1
+ import { A as Wrap, C as Keyframes, D as QueryWrap, F as cv, H as style, I as firstThatWorks, J as FlexMethods, K as within, L as global, M as cn, O as StateWrap, R as group, S as CvValue, T as PositionTry, W as token, _ as CSSStyleValue, a as DtcgUnit, am as Fallback, b as CvConfig, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as attr, k as Steps, l as check, m as CSS, n as DtcgColor, o as DtcgValue, om as Part, p as AttrOp, q as ClassValue, r as DtcgCubicBezier, s as Overrides, sm as Style, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, x as CvProps, z as keyframes } from "../../theme-types-Bqv0Ggz_.mjs";
2
+ import { a as GProp, r as GLayout, t as GCondition } from "../../group-types-9ttphdku.mjs";
3
+ import "../../group-common-9zpBxfUF.mjs";
4
+ import { active, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, attrFn, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, bg, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, calc, captionSide, checked, clear, color, colorFn, columnGap, content, counter, counterIncrement, counterReset, counters, cubicBezier, direction, disabled, display, empty, emptyCells, enabled, firstChild, firstOfType, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, floodColor, floodOpacity, focus, font, fontFamily, fontSize, fontStyle, fontWeight, height, hover, hsl, hsla, image, inRange, indeterminate, invalid, justifyContent, lastChild, lastOfType, left, letterSpacing, lightingColor, lineHeight, linearGradient, link, listStyle, listStyleImage, listStylePosition, listStyleType, m, margin, marginBottom, marginLeft, marginRight, marginTop, matrix, matrix3d, maxHeight, maxWidth, mb, minHeight, minWidth, ml, mr, mt, onlyChild, onlyOfType, opacity, optional, order, outOfRange, outlineColor, outlineStyle, outlineWidth, overflow, overflowX, overflowY, p, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pb, perspective, perspectiveFn, perspectiveOrigin, pl, pointerEvents, position, pr, pt, quotes, radialGradient, repeatingLinearGradient, repeatingRadialGradient, required, rgb, rgba, right, root, rotate3d, rotateFn, rotateX, rotateY, rotateZ, scale3d, scaleFn, scaleX, scaleY, scaleZ, skew, skewX, skewY, steps, supports, tableLayout, target, textAlign, textIndent, textOverflow, textShadow, textTransform, top, transform, transformOrigin, transformStyle, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, translate3d, translateFn, translateX, translateY, translateZ, unicodeBidi, url, valid, verticalAlign, visibility, visited, width, wordBreak, wordSpacing, zIndex } from "../baseline-2015.mjs";
5
+ import { properties } from "@cssints/css-grammar/mdn";
6
+ //#region src/groups/baseline-2015/with-downstream.d.ts
7
+ type B = {
8
+ id: "baseline-2015/with-downstream";
9
+ kw: {
10
+ "align-items": "anchor-center";
11
+ "align-self": "anchor-center" | "auto" | "normal" | "stretch";
12
+ "animation-duration": "auto";
13
+ "background": "border-area" | "text" | "x-end" | "x-start" | "y-end" | "y-start";
14
+ "background-attachment": "fixed" | "local";
15
+ "background-clip": "border-area" | "text";
16
+ "background-image": "element(" | "image-set(";
17
+ "background-position": "bottom" | "center" | "left" | "right" | "top";
18
+ "background-repeat": "round" | "space";
19
+ "border-collapse": "collapse" | "separate";
20
+ "bottom": "anchor(" | "anchor-size(";
21
+ "caption-side": "bottom" | "top";
22
+ "clear": "inline-end" | "inline-start";
23
+ "content": "image-set(";
24
+ "counter-reset": "reversed(";
25
+ "display": "contents" | "flow-root" | "grid" | "grid-lanes" | "inline-grid" | "inline-grid-lanes" | "math" | "ruby" | "ruby-base" | "ruby-base-container" | "ruby-text" | "ruby-text-container";
26
+ "flex": "anchor-size(" | "content" | "fit-content" | "fit-content(" | "max-content" | "min-content";
27
+ "flex-basis": "anchor-size(" | "content" | "fit-content" | "fit-content(" | "max-content" | "min-content";
28
+ "flex-direction": "column-reverse" | "row-reverse";
29
+ "flex-flow": "balance";
30
+ "flex-wrap": "balance";
31
+ "float": "inline-end" | "inline-start";
32
+ "font": "math" | "system-ui" | "ui-monospace" | "ui-rounded" | "ui-sans-serif" | "ui-serif" | "xxx-large";
33
+ "font-family": "math" | "system-ui" | "ui-monospace" | "ui-rounded" | "ui-sans-serif" | "ui-serif";
34
+ "font-size": "math" | "xxx-large";
35
+ "font-variant": "all-petite-caps" | "all-small-caps" | "diagonal-fractions" | "full-width" | "historical-forms" | "jis04" | "jis78" | "jis83" | "jis90" | "lining-nums" | "none" | "oldstyle-nums" | "ordinal" | "petite-caps" | "proportional-nums" | "proportional-width" | "ruby" | "simplified" | "slashed-zero" | "small-caps" | "stacked-fractions" | "tabular-nums" | "titling-caps" | "traditional" | "unicase";
36
+ "height": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
37
+ "justify-content": "left" | "normal" | "right";
38
+ "left": "anchor(" | "anchor-size(";
39
+ "list-style": "string" | "symbols(";
40
+ "list-style-type": "symbols(";
41
+ "margin": "anchor-size(";
42
+ "margin-bottom": "anchor-size(";
43
+ "margin-left": "anchor-size(";
44
+ "margin-right": "anchor-size(";
45
+ "margin-top": "anchor-size(";
46
+ "max-height": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
47
+ "max-width": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
48
+ "min-height": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
49
+ "min-width": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
50
+ "overflow": "clip";
51
+ "overflow-x": "clip";
52
+ "overflow-y": "clip";
53
+ "position": "sticky";
54
+ "quotes": "auto";
55
+ "right": "anchor(" | "anchor-size(";
56
+ "text-align": "center" | "end" | "left" | "match-parent" | "right" | "start";
57
+ "text-decoration": "auto" | "currentColor" | "dashed" | "dotted" | "double" | "from-font" | "grammar-error" | "percentage" | "solid" | "spelling-error" | "transparent" | "wavy";
58
+ "text-indent": "each-line" | "hanging";
59
+ "text-transform": "full-size-kana" | "full-width" | "math-auto";
60
+ "top": "anchor(" | "anchor-size(";
61
+ "unicode-bidi": "isolate" | "isolate-override" | "plaintext";
62
+ "white-space": "break-spaces" | "collapse" | "preserve" | "preserve-breaks" | "preserve-spaces" | "wrap";
63
+ "width": "anchor-size(" | "fit-content" | "fit-content(" | "max-content" | "min-content";
64
+ "word-break": "auto-phrase" | "break-word";
65
+ };
66
+ fn: "abs" | "acos" | "anchor" | "anchor-size" | "asin" | "atan" | "atan2" | "blur" | "brightness" | "calc-size" | "circle" | "clamp" | "color-mix" | "conic-gradient" | "contrast" | "contrast-color" | "cos" | "cross-fade" | "drop-shadow" | "dynamic-range-limit-mix" | "element" | "ellipse" | "env" | "exp" | "fit-content" | "grayscale" | "hue-rotate" | "hwb" | "hypot" | "image-set" | "inset" | "invert" | "lab" | "layer" | "lch" | "leader" | "light-dark" | "linear" | "log" | "max" | "min" | "minmax" | "mod" | "oklab" | "oklch" | "opacity" | "paint" | "palette-mix" | "path" | "polygon" | "pow" | "ray" | "rect" | "rem" | "repeating-conic-gradient" | "round" | "saturate" | "scroll" | "sepia" | "sign" | "sin" | "sqrt" | "src" | "superellipse" | "symbols" | "tan" | "target-counter" | "target-counters" | "target-text" | "var" | "view" | "xywh";
67
+ unit: "Q" | "cap" | "cqb" | "cqh" | "cqi" | "cqmax" | "cqmin" | "cqw" | "dpcm" | "dpi" | "dppx" | "dvb" | "dvh" | "dvi" | "dvmax" | "dvmin" | "dvw" | "fr" | "ic" | "lh" | "lvb" | "lvh" | "lvi" | "lvmax" | "lvmin" | "lvw" | "q" | "rcap" | "rch" | "rex" | "ric" | "rlh" | "svb" | "svh" | "svi" | "svmax" | "svmin" | "svw" | "vb" | "vi" | "vmax" | "x";
68
+ media: "any-hover" | "any-pointer" | "calc" | "color-gamut" | "color-index" | "device-aspect-ratio" | "device-height" | "device-posture" | "device-width" | "display-mode" | "dynamic-range" | "forced-colors" | "horizontal-viewport-segments" | "hover" | "inverted-colors" | "monochrome" | "overflow-block" | "overflow-inline" | "pointer" | "prefers-color-scheme" | "prefers-contrast" | "prefers-reduced-data" | "prefers-reduced-motion" | "prefers-reduced-transparency" | "resolution" | "scan" | "scripting" | "update" | "vertical-viewport-segments" | "video-dynamic-range";
69
+ container: "anchored(" | "scroll-state(" | "style(";
70
+ supports: "font-format(" | "font-tech(" | "selector(";
71
+ };
72
+ type P<K extends keyof typeof properties> = GProp<B, K>;
73
+ export declare const background: P<"background">;
74
+ export declare const flexFlow: P<"flex-flow">;
75
+ export declare const fontVariant: P<"font-variant">;
76
+ export declare const textDecoration: P<"text-decoration">;
77
+ export declare const whiteSpace: P<"white-space">;
78
+ export declare const media: GCondition<B, "media", QueryWrap>;
79
+ export declare const flex: GLayout<B, "flex", Pick<FlexMethods, "direction" | "wrap" | "flow" | "alignItems" | "alignContent" | "justifyContent" | "columnGap">>;
80
+ //#endregion
81
+ export { type AttrOp, type CSS, type CSSColorValue, type CSSImageValue, type CSSStyleValue, type CSSUnitValue, CheckOverrides, type ClassValue, type CvConfig, type CvProps, type CvValue, DtcgColor, DtcgCubicBezier, DtcgShadow, DtcgUnit, DtcgValue, type Fallback, type Keyframes, Overrides, type Part, type PositionTry, type QueryWrap, type StateWrap, type Steps, type Style, Tokens, type Wrap, active, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, attr, attrFn, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, bg, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, calc, captionSide, check, checked, clear, cn, color, colorFn, columnGap, content, counter, counterIncrement, counterReset, counters, createGlobalTheme, createTokens, cubicBezier, cv, direction, disabled, display, empty, emptyCells, enabled, firstChild, firstOfType, firstThatWorks, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, floodColor, floodOpacity, focus, font, fontFamily, fontSize, fontStyle, fontWeight, global, group, height, hover, hsl, hsla, image, inRange, indeterminate, invalid, justifyContent, keyframes, lastChild, lastOfType, layers, left, letterSpacing, lightingColor, lineHeight, linearGradient, link, listStyle, listStyleImage, listStylePosition, listStyleType, m, margin, marginBottom, marginLeft, marginRight, marginTop, matrix, matrix3d, maxHeight, maxWidth, mb, minHeight, minWidth, ml, mr, mt, onlyChild, onlyOfType, opacity, optional, order, outOfRange, outlineColor, outlineStyle, outlineWidth, overflow, overflowX, overflowY, p, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pb, perspective, perspectiveFn, perspectiveOrigin, pl, pointerEvents, position, pr, pt, quotes, radialGradient, repeatingLinearGradient, repeatingRadialGradient, required, rgb, rgba, right, root, rotate3d, rotateFn, rotateX, rotateY, rotateZ, scale3d, scaleFn, scaleX, scaleY, scaleZ, skew, skewX, skewY, steps, style, supports, tableLayout, target, textAlign, textIndent, textOverflow, textShadow, textTransform, token, top, transform, transformOrigin, transformStyle, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, translate3d, translateFn, translateX, translateY, translateZ, unicodeBidi, url, valid, verticalAlign, visibility, visited, width, within, wordBreak, wordSpacing, zIndex };