csszyx 0.10.11 → 0.10.12

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 (4) hide show
  1. package/README.md +61 -21
  2. package/dist/index.d.mts +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/package.json +10 -8
package/README.md CHANGED
@@ -1,15 +1,17 @@
1
1
  # csszyx
2
2
 
3
- > Universal CSS-in-JS for Tailwind CSS with WASM core.
3
+ > CSS-in-JS for Tailwind CSS v4 — object syntax at build time, class mangling
4
+ > in production, SSR-safe hydration.
4
5
 
5
6
  ## Features
6
7
 
7
- - **Build-time transforms** -- `sz` prop compiles to atomic Tailwind classes
8
- - **Zero-runtime overhead** -- Styles extracted to static CSS at build time
9
- - **SSR hydration safety** -- SHA-256 checksum validation, abort on mismatch
10
- - **Tailwind CSS v4** -- Full compatibility with Tailwind's JIT engine
11
- - **Production minification** -- Class names mangled (`p-4` -> `z`) for smaller output
12
- - **TypeScript support** -- Fully typed `sz` prop with autocomplete
8
+ - **Build-time transforms** — the `sz` prop compiles to atomic Tailwind classes; static styles cost zero runtime
9
+ - **Production mangling** — class names compress (`p-4` → `z`) with a native Rust engine driving the build
10
+ - **SSR hydration safety** — SHA-256 checksum validation, abort-and-preserve on mismatch
11
+ - **Variant authoring** — `szv` factories for finite enum props, extracted and safelisted at build time
12
+ - **Mangle-aware merging** — `szcn` resolves last-wins overrides even on mangled classes
13
+ - **Tailwind CSS v4** — full compatibility with Tailwind's JIT engine, including custom `@theme` tokens
14
+ - **TypeScript** — fully typed `sz` prop with autocomplete for utilities, variants, and your theme
13
15
 
14
16
  ## Installation
15
17
 
@@ -33,6 +35,9 @@ export default defineConfig({
33
35
  });
34
36
  ```
35
37
 
38
+ Webpack (including Next.js) uses `csszyx/webpack`; other bundlers go through
39
+ [`@csszyx/unplugin`](https://www.npmjs.com/package/@csszyx/unplugin).
40
+
36
41
  ### 2. Use the `sz` prop
37
42
 
38
43
  ```tsx
@@ -43,7 +48,8 @@ function Button() {
43
48
  }
44
49
  ```
45
50
 
46
- At build time, `sz={{ bg: 'blue-500', color: 'white', p: 4 }}` compiles to `className="bg-blue-500 text-white p-4"`.
51
+ At build time this compiles to `className="bg-blue-500 text-white p-4"` — and
52
+ in production those classes mangle to short tokens backed by the same CSS.
47
53
 
48
54
  ## Object Syntax
49
55
 
@@ -79,27 +85,61 @@ The `sz` prop accepts an object where keys are Tailwind property names and value
79
85
  // -> className="bg-blue-500/20"
80
86
  ```
81
87
 
82
- ## Runtime Helpers
88
+ ## Variants with `szv`
83
89
 
84
- For dynamic class composition, use the runtime helpers from `@csszyx/runtime` (re-exported by `csszyx`):
90
+ For a finite enum prop (severity, size, intent), declare the variants once —
91
+ every combination is compiled and safelisted at build time:
85
92
 
86
93
  ```tsx
87
- import { _sz } from "@csszyx/runtime";
94
+ import { szv } from "csszyx";
95
+
96
+ const calloutSz = szv({
97
+ variants: {
98
+ severity: {
99
+ info: { bg: { color: "sky-500", op: 10 }, color: "sky-700" },
100
+ warning: { bg: { color: "amber-500", op: 10 }, color: "amber-700" },
101
+ },
102
+ },
103
+ defaultVariants: { severity: "info" },
104
+ });
105
+
106
+ <div sz={calloutSz({ severity })} />;
107
+ ```
108
+
109
+ ## Runtime composition
110
+
111
+ For dynamic class composition use the public helpers from
112
+ [`@csszyx/runtime`](https://www.npmjs.com/package/@csszyx/runtime):
113
+
114
+ ```tsx
115
+ import { szr, szcn } from "@csszyx/runtime";
116
+
117
+ // Concatenate (mangle-aware, filters falsy)
118
+ <div className={szr("p-4", isActive && "bg-blue-500")} />;
88
119
 
89
- <div className={_sz("p-4", isActive ? "bg-blue-500" : "bg-gray-200")} />;
120
+ // Merge with last-wins override per utility (survives production mangling)
121
+ <div className={szcn("gap-2 p-4", overrideClasses)} />;
90
122
  ```
91
123
 
92
124
  ## Packages
93
125
 
94
- | Package | Description |
95
- | -------------------------------------------------------------------- | --------------------------------------- |
96
- | [`csszyx`](https://www.npmjs.com/package/csszyx) | Umbrella package (re-exports all) |
97
- | [`@csszyx/unplugin`](https://www.npmjs.com/package/@csszyx/unplugin) | Vite + Webpack + esbuild plugin |
98
- | [`@csszyx/compiler`](https://www.npmjs.com/package/@csszyx/compiler) | sz object to Tailwind class transform |
99
- | [`@csszyx/runtime`](https://www.npmjs.com/package/@csszyx/runtime) | Runtime helpers + SSR hydration |
100
- | [`@csszyx/core`](https://www.npmjs.com/package/@csszyx/core) | Rust/WASM: encoder, checksum, collision |
101
- | [`@csszyx/cli`](https://www.npmjs.com/package/@csszyx/cli) | Migration CLI + type generator |
102
- | [`@csszyx/types`](https://www.npmjs.com/package/@csszyx/types) | Shared TypeScript types |
126
+ | Package | Description |
127
+ | ------------------------------------------------------------------------ | ----------------------------------------------------- |
128
+ | [`csszyx`](https://www.npmjs.com/package/csszyx) | Umbrella package (re-exports all) |
129
+ | [`@csszyx/unplugin`](https://www.npmjs.com/package/@csszyx/unplugin) | Vite + Webpack + esbuild + Rollup plugin |
130
+ | [`@csszyx/compiler`](https://www.npmjs.com/package/@csszyx/compiler) | sz object to Tailwind class transform |
131
+ | [`@csszyx/runtime`](https://www.npmjs.com/package/@csszyx/runtime) | szr / szcn / szv / splitBox + SSR hydration |
132
+ | [`@csszyx/core`](https://www.npmjs.com/package/@csszyx/core) | Rust core: native transform engine, encoder, checksum |
133
+ | [`@csszyx/dynamic`](https://www.npmjs.com/package/@csszyx/dynamic) | Runtime CSS injection for API/CMS-driven styling |
134
+ | [`@csszyx/cli`](https://www.npmjs.com/package/@csszyx/cli) | Migration CLI, project doctor, collision scanner |
135
+ | [`@csszyx/vars`](https://www.npmjs.com/package/@csszyx/vars) | CSS custom-property helpers for runtime values |
136
+ | [`@csszyx/mcp-server`](https://www.npmjs.com/package/@csszyx/mcp-server) | MCP server for AI agents (Cursor, Claude, …) |
137
+ | [`@csszyx/types`](https://www.npmjs.com/package/@csszyx/types) | Shared TypeScript types |
138
+
139
+ ## Documentation
140
+
141
+ Guides, full sz-prop reference, SSR, and migration:
142
+ <https://csszyx.com>
103
143
 
104
144
  ## License
105
145
 
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="@csszyx/types/jsx" />
2
2
  export { SzObject, serializeManifest, transform, transformSourceCode, validateSzRecover } from '@csszyx/compiler';
3
3
  export { compute_mangle_checksum, encode, transform_sz, verify_mangle_checksum } from '@csszyx/core';
4
- export { _sz, _sz2, _sz3, _szMerge, abortHydration, endHydration, getSSRContext, isHydrating, isSSREnvironment, startHydration, szv, verifyMangleMapIntegrity } from '@csszyx/runtime';
4
+ export { _sz, _sz2, _sz3, _szMerge, abortHydration, endHydration, getSSRContext, isHydrating, isSSREnvironment, startHydration, szcn, szr, szsClass, szv, verifyMangleMapIntegrity } from '@csszyx/runtime';
5
5
  export { _sz as _szLite } from '@csszyx/runtime/lite';
6
6
  export { CsszyxConfig, DevelopmentConfig, PartialCsszyxConfig, ProductionConfig, RecoveryManifest, SzProp, SzProps } from '@csszyx/types';
7
7
  export { unplugin as default, esbuildPlugin, rollupPlugin, unplugin, vitePlugin, webpackPlugin } from '@csszyx/unplugin';
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  export { serializeManifest, transform, transformSourceCode, validateSzRecover } from '@csszyx/compiler';
2
2
  export { compute_mangle_checksum, encode, transform_sz, verify_mangle_checksum } from '@csszyx/core';
3
- export { _sz, _sz2, _sz3, _szMerge, abortHydration, endHydration, getSSRContext, isHydrating, isSSREnvironment, startHydration, szv, verifyMangleMapIntegrity } from '@csszyx/runtime';
3
+ export { _sz, _sz2, _sz3, _szMerge, abortHydration, endHydration, getSSRContext, isHydrating, isSSREnvironment, startHydration, szcn, szr, szsClass, szv, verifyMangleMapIntegrity } from '@csszyx/runtime';
4
4
  export { _sz as _szLite } from '@csszyx/runtime/lite';
5
5
  export { unplugin as default, esbuildPlugin, rollupPlugin, unplugin, vitePlugin, webpackPlugin } from '@csszyx/unplugin';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "csszyx",
3
- "version": "0.10.11",
3
+ "version": "0.10.12",
4
4
  "description": "Universal CSS-in-JS for Tailwind CSS with WASM core",
5
5
  "keywords": [
6
6
  "css",
@@ -61,15 +61,16 @@
61
61
  "dist"
62
62
  ],
63
63
  "dependencies": {
64
- "@csszyx/compiler": "0.10.11",
65
- "@csszyx/core": "0.10.11",
66
- "@csszyx/runtime": "0.10.11",
67
- "@csszyx/unplugin": "0.10.11",
68
- "@csszyx/types": "0.10.11",
69
- "@csszyx/dynamic": "0.10.11"
64
+ "@csszyx/runtime": "0.10.12",
65
+ "@csszyx/compiler": "0.10.12",
66
+ "@csszyx/unplugin": "0.10.12",
67
+ "@csszyx/types": "0.10.12",
68
+ "@csszyx/dynamic": "0.10.12",
69
+ "@csszyx/core": "0.10.12"
70
70
  },
71
71
  "devDependencies": {
72
72
  "esbuild": "^0.28.1",
73
+ "vitest": "^4.1.9",
73
74
  "typescript": "^6.0.3",
74
75
  "unbuild": "^3.6.1"
75
76
  },
@@ -79,6 +80,7 @@
79
80
  },
80
81
  "scripts": {
81
82
  "build": "unbuild",
82
- "dev": "unbuild --stub"
83
+ "dev": "unbuild --stub",
84
+ "test": "vitest run"
83
85
  }
84
86
  }