cssints 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssints",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
   "license": "MIT",
   "repository": {
@@ -53,10 +53,18 @@
     "./tui": {
       "types": "./dist/tui-types.d.mts",
       "default": "./dist/tui.mjs"
+    },
+    "./devtools-link": {
+      "types": "./dist/devtools-link.d.mts",
+      "default": "./dist/devtools-link.mjs"
+    },
+    "./*": {
+      "types": "./dist/groups/*.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "dependencies": {
-    "@cssints/css-grammar": "^0.1.0",
+    "@cssints/css-grammar": "^0.3.0",
     "culori": "^4.0.2",
     "effect": "4.0.0",
     "happy-dom": "^20.14.5",

package/skills/cssints/SKILL.md

@@ -3,7 +3,7 @@ name: cssints
 description: >-
   Write, review and fix styles in a project that uses cssints, the CSS-in-TypeScript compiler (a Vite plugin that
   runs css.* calls at build time and replaces them with atomic class strings). Load it when code imports from
-  "cssints" with { type: "cssints" }, uses cn(), cx(), cv(), css.* members, media()/hover()/container()/within(),
+  "cssints" with { type: "cssints" }, uses cn(), cv(), css.* members, media()/hover()/container()/within(),
   createTokens, createGlobalTheme, check.contrast, or an @cssints/* package (layout, motion, fluid, fonts, reset,
   tokens, icons, ...), and when a build fails with a "cssints:" message such as "must be known at build time",
   "without the attribute", "unexpected ... expected <...>", "overlap without one containing the other" or
@@ -15,7 +15,7 @@ description: >-
 Every `css.*` call runs at build time in Vite's Module Runner and is replaced by a class string. The values are
 checked against the CSS grammars (mdn-data) twice: in the types, where the call is, and again by the build, with the
 file and the place of the call. One sheet, `virtual:cssints.css`, holds every rule once, in `@layer`s. The browser
-gets class strings, `cx` and the few lines behind `cv`. The reference is `docs/API.md` of the cssints repository; the
+gets class strings and the few lines behind `cn` with runtime arguments and `cv`. The reference is `docs/API.md` of the cssints repository; the
 parts below are what you need most of the time.
 
 If the cssints MCP server is configured, prefer it for checks: `check_declaration` (is this value valid, and the
@@ -51,7 +51,6 @@ export default {
 ## The import attribute
 
 ```ts
-import { cx } from "cssints"; // runtime: the only member without the attribute
 import { cn, cv, hover, media, p } from "cssints" with { type: "cssints" }; // build time
 import * as css from "cssints" with { type: "cssints" }; // the same, as a namespace
 import { stack } from "./stack.ts" with { type: "cssints" }; // your own helper module, run at build time
@@ -68,7 +67,7 @@ import { stack } from "./stack.ts" with { type: "cssints" }; // your own helper
 where the call is evaluated`. The types do not catch it. Choose at runtime between styles made at build time:
 
 ```tsx
-<div className={cx(base, on && p(4))} />          // a condition: cx skips falsy values
+<div className={cn(base, on && p(4))} />          // a condition: cn joins it at runtime, p(4) is a class already
 <button className={button({ size })} />            // a cv() variant
 <div style={style(token.set(accent, "#dc2626"))} /> // a token set inline (static values)
 <div style={{ "--accent": value }} />              // a dynamic value: a plain style prop
@@ -93,12 +92,16 @@ the run does not reach (`false && p(4)`, a branch) still gets its class string.
 - `firstThatWorks("100dvh", "100vh")` is a value with fallbacks in one class.
 - `keyframes({ from: opacity(0), to: opacity(1) })` returns a name for `animation(fade, "200ms")`.
 
-## Merging: cn, cx, cv
+## Merging: cn, cv
 
 - `cn(...)` merges at build time into one string; the later of one property wins (`cn(p(4), p(2))` is `p(2)`). A
   longhand beats its shorthand whatever the order. Two properties that overlap without one containing the other
   (`borderTop` and `borderColor`, `marginLeft` and `marginInline`) are a build error: set one, or the longhands.
-- `cx(...)` joins strings at runtime (skips falsy values, flattens arrays; no clsx objects). It sees no conflicts.
+- `cn(...)` takes runtime values too: `cn(base, on && p(4), props.class)`. An argument that names a parameter, a prop
+  or state, a string, or a call of something that is not a `css.*` member is joined at runtime (falsy values skipped,
+  arrays flattened; no clsx objects); the styles in it are class strings made at build time, and while a style
+  is active it replaces the classes it overrides (`cn(p(2), on && p(4))` is `p-4` when `on`, else `p-2`). A class
+  string such as `props.class` is only appended. `cx` is gone: importing it is a build error.
 - `cv({ base, variants, defaultVariants, compoundVariants })` is the function you call; props are typed. A variant
   wins over the base, a compound (`{ size: "lg", tone: "loud", class: p(6) }`) over both. Values are `css.*` styles,
   never CSS strings.
@@ -157,7 +160,7 @@ DTCG JSON, Figma exports, references `{color.accent}`, derived values and layers
 ## Plugin packages: which one
 
 Import them with the attribute, except `@cssints/tokens` and `@cssints/ramp` (plain data for `createTokens`). A
-member returns a class string (or a value) that goes into `cn()`/`cx()`. Details and gotchas:
+member returns a class string (or a value) that goes into `cn()`. Details and gotchas:
 [references/plugins.md](references/plugins.md).
 
 | Need                                        | Package                                                      |
@@ -191,8 +194,8 @@ the call. The common ones, with fixes: [references/errors.md](references/errors.
 
 ## Rules of thumb
 
-- Make every style at module level or in a helper module; choose between them at runtime with `cx`, `cv` or tokens.
-- Prefer `cn()` to `cx()` when the parts are fixed: it is checked for conflicts and leaves nothing at runtime.
+- Make every style at module level or in a helper module; choose between them at runtime with `cn(base, on && p(4))`, `cv` or tokens.
+- A `cn()` with no runtime argument is checked for conflicts and leaves nothing at runtime; keep what is fixed in it.
 - Prefer a token and a theme to a second style for each colour mode.
 - Write `check.contrast` for each text/background pair you use; it checks every theme.
 - A support warning is not an error: the value works where the targets have it. LightningCSS lowers what it can

package/skills/cssints/references/errors.md

@@ -7,11 +7,12 @@ contrast, ranges in some positions, `supports()` property names. The messages be
 
 ## Imports and build-time values
 
-| Message                                                                                                                  | Meaning and fix                                                                                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<file> imports build-time p from "cssints" without the attribute. Import it as: … with { type: "cssints" }`             | Every member but `cx` runs at build time. Add `with { type: "cssints" }` to that import (keep `cx` in a plain import, or in the same one).                                                                     |
-| `css arguments must be known at build time: n is not defined where the call is evaluated (a parameter, a prop or state)` | The call reads a runtime value. Make the styles at build time and choose at runtime: `cx(on && p(4))`, a `cv()` variant, or a token set in `style={...}`. Also when a local shadows a global (`open`, `name`). |
-| `imports _cv from "cssints", which is gone`                                                                              | Old code: `cv({ ... })` is the function now. Drop `_cv(` and its closing bracket.                                                                                                                              |
+| Message                                                                                                                  | Meaning and fix                                                                                                                                                                                                      |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<file> imports build-time p from "cssints" without the attribute. Import it as: … with { type: "cssints" }`             | Every member runs at build time. Add `with { type: "cssints" }` to that import.                                                                                                                                      |
+| `css arguments must be known at build time: n is not defined where the call is evaluated (a parameter, a prop or state)` | The call reads a runtime value. Make the styles at build time and choose at runtime: `cn(base, on && p(4))`, a `cv()` variant, or a token set in `style={...}`. Also when a local shadows a global (`open`, `name`). |
+| `imports cx from "cssints", which is gone: cn(...) takes runtime values now`                                             | Old code: `cx(a, on && b)` is `cn(a, on && b)` now (cn from `"cssints" with { type: "cssints" }`). `cx(p(4), p(2))` kept both; `cn` keeps `p(2)`.                                                                    |
+| `imports _cv from "cssints", which is gone`                                                                              | Old code: `cv({ ... })` is the function now. Drop `_cv(` and its closing bracket.                                                                                                                                    |
 
 ## Grammar errors
 
@@ -36,7 +37,7 @@ reverse); trust the build's message and, with the MCP server, `check_declaration
 | Message                                                                    | Fix                                                                                          |
 | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
 | `flex() has no .padding(); it chains direction, wrap, flow, alignItems, …` | A chain has only its container properties. Merge the rest: `cn(flex().gap(2), p(4))`.        |
-| `plain styles do not chain (.gap); merge them with cn(...) or cx(...)`     | `flex("1")` (with an argument) is the shorthand property, a plain style.                     |
+| `plain styles do not chain (.gap); merge them with cn(...)`                | `flex("1")` (with an argument) is the shorthand property, a plain style.                     |
 | `sticky().top() is used twice` (and other members: a method is used once)  | Each method of a chain once. Under a condition, a second chain is fine: `hover(x().y(...))`. |
 
 ## Conflicts
@@ -49,7 +50,7 @@ reverse); trust the build's message and, with the MCP server, `check_declaration
 | `layout: kernel stack-core sets display, flex-direction, gap (this style also sets display)`                        | A plugin member and a property its kernel sets, in one `cn()`. Use the member's method (`stack().gap(4)`), or drop the property.            |
 | `frame: frame() sets padding, margin, border-radius and the border: use its methods (this style also sets padding)` | The same, with the plugin's own message.                                                                                                    |
 
-`cx()` joins strings at runtime and checks nothing: a conflict across `cx()` arguments is not reported.
+A runtime argument of `cn()` is joined at runtime; a style in it replaces what it overrides, and `props.class` is only appended, so a conflict with it is not reported.
 
 ## Conditions
 

package/skills/cssints-plugin/SKILL.md

@@ -14,7 +14,7 @@ description: >-
 A plugin is a module that exports the members of `scope(name, table).build(impl).export()` from `cssints/plugin`.
 The table says what the plugin has; the members are typed from it (no types file). User code imports the plugin with
 `with { type: "cssints" }`; there is no registration. In user code a member is a class string (or a CSS value), so it
-goes into `cn()`, `cx()` and conditions. Everything runs at build time in Vite's Module Runner. Read the user skill
+goes into `cn()` and conditions. Everything runs at build time in Vite's Module Runner. Read the user skill
 `cssints` first for the styles themselves; the full reference is the "Plugins" section of `docs/API.md`.
 
 If the cssints MCP server is configured, prefer `compile` to see a fixture's classes, sheet, errors and warnings,
@@ -135,6 +135,8 @@ lacks a key.
   rules or styles only when needed (`stuck()` adds its attribute rules only then).
 - `dependsOn(path)`: call it for every file the plugin reads (an image, an SVG, a font). In dev an edit of the file
   runs the modules that read it again; in `vite build --watch` it is a watched file.
+- `inGroup(group, property, value)`: is a declaration in an export group (`widely-available`, `baseline-2022`, ...)?
+  A plugin with a variant per group emits only what passes (`@cssints/reset/widely-available`). Selectors are not checked.
 
 ## Errors
 

package/dist/instrument-Bdtk2INz.mjs

@@ -1,172 +0,0 @@
-import { u as ImportError } from "./registry-n9JCX4pl.mjs";
-import { Effect, Formatter, Predicate } from "effect";
-import { parseSync } from "oxc-parser";
-import MagicString from "magic-string";
-//#region src/instrument.ts
-const RUNTIME = "cssints";
-const CV_CALL = "__cv(";
-const rootIdent = (n) => n.type === "Identifier" ? n.name : n.type === "MemberExpression" ? rootIdent(n.object) : n.type === "CallExpression" ? rootIdent(n.callee) : null;
-const RUNTIME_ONLY = /* @__PURE__ */ new Set(["cx"]);
-const TYPED_OM = /* @__PURE__ */ new Set([
-	"CSS",
-	"CSSStyleValue",
-	"CSSUnitValue",
-	"CSSColorValue",
-	"CSSImageValue"
-]);
-const nameOf = (m) => m.type === "Identifier" ? m.name : m.value;
-const isSiteImport = (s) => s.attributes.some((a) => (a.key.type === "Identifier" ? a.key.name : a.key.value) === "type" && a.value.value === "cssints");
-const importedName = (x) => x.type === "ImportSpecifier" ? nameOf(x.imported) : null;
-const isRuntime = (d, x) => d.source.value === "cssints" && x.type === "ImportSpecifier" && RUNTIME_ONLY.has(nameOf(x.imported));
-const keptImport = (d, code) => {
-	const names = d.specifiers.filter((x) => isRuntime(d, x)).map((x) => code.slice(x.start, x.end));
-	return names.length ? `import { ${names.join(", ")} } from ${Formatter.formatJson(RUNTIME)};` : "";
-};
-const findCssImport = Effect.fnUntraced(function* (program, code, id, client) {
-	const plain = (name) => RUNTIME_ONLY.has(name) || !client && TYPED_OM.has(name);
-	const locals = /* @__PURE__ */ new Set();
-	const decls = [];
-	for (const s of program.body) {
-		if (s.type !== "ImportDeclaration") continue;
-		const old = s.source.value === "cssints" && s.specifiers.find((x) => importedName(x) === "_cv");
-		if (old) return yield* new ImportError({
-			message: `cssints: ${id} imports _cv from "cssints", which is gone: cv({ ... }) is the function now. Write const button = cv({ base, variants }) (cv from "cssints" with { type: "cssints" }), drop _cv, and call button({ size: "lg" })`,
-			file: id,
-			offset: old.start
-		});
-		if (isSiteImport(s)) {
-			decls.push(s);
-			s.specifiers.forEach((x) => isRuntime(s, x) || locals.add(x.local.name));
-		} else if (s.source.value === "cssints" && s.importKind !== "type") {
-			const bad = s.specifiers.filter((x) => x.type !== "ImportSpecifier" || x.importKind !== "type" && !plain(importedName(x) ?? ""));
-			if (!bad.length) continue;
-			const names = bad.map((x) => code.slice(x.start, x.end));
-			const fix = bad[0].type === "ImportNamespaceSpecifier" ? names[0] : `{ ${names.join(", ")} }`;
-			return yield* new ImportError({
-				message: `cssints: ${id} imports build-time ${names.join(", ")} from "cssints" without the attribute. Import it as: import ${fix} from "cssints" with { type: "cssints" }; (only cx is runtime)`,
-				file: id,
-				offset: s.start
-			});
-		}
-	}
-	return locals.size ? {
-		locals,
-		decls
-	} : null;
-});
-const CONDITIONS = /* @__PURE__ */ new Set([
-	"media",
-	"container",
-	"supports",
-	"attr",
-	"within"
-]);
-const boundNames = (id, out) => {
-	if (!id) return;
-	if (id.type === "Identifier") out.add(id.name);
-	else if (id.type === "ArrayPattern") id.elements.forEach((e) => boundNames(e, out));
-	else if (id.type === "ObjectPattern") id.properties.forEach((p) => boundNames(p.type === "Property" ? p.value : p.argument, out));
-	else if (id.type === "AssignmentPattern") boundNames(id.left, out);
-	else if (id.type === "RestElement") boundNames(id.argument, out);
-};
-function withConditions(program, code, { locals, decls }) {
-	if (!/\b(?:media|container|supports|attr|within)\b/.test(code)) return locals;
-	const ctors = /* @__PURE__ */ new Set();
-	for (const d of decls) for (const x of d.specifiers) if (x.type === "ImportSpecifier" && CONDITIONS.has(nameOf(x.imported))) ctors.add(x.local.name);
-	const all = new Set(locals);
-	const walk = (node) => {
-		if (!Predicate.isObject(node) || typeof node.type !== "string") return;
-		const n = node;
-		if (n.type === "VariableDeclarator" && n.init?.type === "CallExpression") {
-			const c = n.init.callee;
-			if (c.type === "Identifier" && ctors.has(c.name) || c.type === "MemberExpression" && !c.computed && c.property.type === "Identifier" && CONDITIONS.has(c.property.name) && locals.has(rootIdent(c.object) ?? "")) boundNames(n.id, all);
-		}
-		for (const k in node) {
-			const v = node[k];
-			if (Array.isArray(v)) v.forEach(walk);
-			else if (Predicate.isObject(v) && "type" in v) walk(v);
-		}
-	};
-	walk(program);
-	return all;
-}
-const declsOf = (stmts, out) => stmts.forEach((s) => {
-	if (s.type === "VariableDeclaration") s.declarations.forEach((d) => boundNames(d.id, out));
-	else if ((s.type === "FunctionDeclaration" || s.type === "ClassDeclaration") && s.id) out.add(s.id.name);
-});
-const declares = (n, out) => {
-	if (n.type === "ArrowFunctionExpression" || n.type === "FunctionExpression" || n.type === "FunctionDeclaration") {
-		n.params.forEach((p) => boundNames(p, out));
-		if (n.type === "FunctionExpression" && n.id) out.add(n.id.name);
-	} else if (n.type === "BlockStatement" || n.type === "StaticBlock") declsOf(n.body, out);
-	else if (n.type === "SwitchCase") declsOf(n.consequent, out);
-	else if (n.type === "ForStatement" && n.init) declsOf([n.init], out);
-	else if (n.type === "ForInStatement" || n.type === "ForOfStatement") declsOf([n.left], out);
-	else if (n.type === "CatchClause") boundNames(n.param, out);
-};
-function findSites(program, locals) {
-	const sites = [];
-	const scopes = [/* @__PURE__ */ new Set()];
-	const walk = (node, inFn) => {
-		if (!Predicate.isObject(node) || typeof node.type !== "string") return;
-		const n = node;
-		if ((n.type === "CallExpression" || n.type === "NewExpression") && locals.has(rootIdent(n.callee) ?? "")) {
-			sites.push({
-				start: n.start,
-				end: n.end,
-				inFn,
-				locals: scopes[scopes.length - 1]
-			});
-			return;
-		}
-		const fn = inFn || /Function/.test(n.type);
-		const own = /* @__PURE__ */ new Set();
-		declares(n, own);
-		scopes.push(own.size ? /* @__PURE__ */ new Set([...scopes[scopes.length - 1], ...own]) : scopes[scopes.length - 1]);
-		for (const k in node) {
-			const v = node[k];
-			if (Array.isArray(v)) v.forEach((c) => walk(c, fn));
-			else if (Predicate.isObject(v) && "type" in v) walk(v, fn);
-		}
-		scopes.pop();
-	};
-	walk(program, false);
-	return sites;
-}
-const instrument = Effect.fn("cssints.instrument")(function* (code, id, client = true) {
-	const { program } = parseSync(id, code);
-	const imp = yield* findCssImport(program, code, id, client);
-	if (!imp) return null;
-	const sites = findSites(program, withConditions(program, code, imp));
-	const ms = new MagicString(code);
-	const hoisted = [];
-	const file = Formatter.formatJson(id);
-	sites.forEach((s, n) => {
-		const site = `__site(__at(${file}, ${n}, ${s.start}), `;
-		const expr = code.slice(s.start, s.end);
-		if (s.inFn) {
-			const names = new Set(expr.match(/[\p{L}\p{N}_$]+/gu));
-			const dead = [...s.locals].filter((x) => names.has(x));
-			hoisted.push(dead.length ? `{ ${site}${expr}); let ${dead.join(", ")}; }` : `${site}${expr});`);
-		} else {
-			ms.prependLeft(s.start, site).appendRight(s.end, ")");
-			hoisted.push(`__unseen(${file}, ${n}) && ${site}${expr});`);
-		}
-	});
-	imp.decls.forEach((d, i) => {
-		if (d.source.value !== "cssints") return;
-		const ns = d.specifiers.find((x) => x.type === "ImportNamespaceSpecifier");
-		const named = d.specifiers.filter((x) => !isRuntime(d, x));
-		const bind = ns ? ns.local.name : `{ ${named.map((x) => `${Formatter.formatJson(importedName(x))}: ${x.local.name}`).join(", ")} }`;
-		ms.overwrite(d.start, d.end, `import { css as __css${i} } from ${Formatter.formatJson(RUNTIME)}; const ${bind} = __css${i};${keptImport(d, code)}`);
-	});
-	ms.prepend(`import { __at, __site, __unseen } from ${Formatter.formatJson(RUNTIME)};\n`);
-	if (hoisted.length) ms.append(`\nexport function __cssints_hoisted() {\n${hoisted.join("\n")}\n}\n`);
-	return {
-		code: ms.toString(),
-		sites,
-		imp
-	};
-});
-//#endregion
-export { keptImport as i, RUNTIME as n, instrument as r, CV_CALL as t };

package/dist/lib-2OEIfPAE.d.mts

@@ -1,9 +0,0 @@
-import "./node-CdhAGmF3.mjs";
-import { Effect } from "effect";
-//#region src/lib.d.ts
-/** What firstThatWorks() builds: its values as text, the wanted one first. */
-interface Fallback {
-  __fallback: string[];
-}
-//#endregion
-export { Fallback as t };

package/dist/runtime-CTvuM-Hm.d.mts

@@ -1,5 +0,0 @@
-//#region src/runtime.d.ts
-type ClassValue = string | false | null | undefined | 0 | ClassValue[];
-declare const cx: (...a: ClassValue[]) => string;
-//#endregion
-export { cx as n, ClassValue as t };