csszyx 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 csszyx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,52 +2,105 @@
 
 > Universal CSS-in-JS for Tailwind CSS with WASM core.
 
-**csszyx** is a zero-runtime, framework-agnostic CSS-in-JS library that compiles your styles into atomic CSS classes at build time. It leverages a Rust-based WASM core for blisteringly fast performance and safety.
-
 ## Features
 
-- ⚡ **Zero-Runtime Overhead**: Styles are extracted to static CSS.
-- 🎨 **Tailwind Compatible**: Use your existing Tailwind config.
-- 🛡️ **Type Safe**: Full TypeScript support.
-- 🔒 **SSR Safe**: Built-in hydration mismatch protection.
-- 📦 **WASM Power**: Core logic runs in WebAssembly.
+- **Build-time transforms** -- `sz` prop compiles to atomic Tailwind classes
+- **Zero-runtime overhead** -- Styles extracted to static CSS at build time
+- **SSR hydration safety** -- SHA-256 checksum validation, abort on mismatch
+- **Tailwind CSS v4** -- Full compatibility with Tailwind's JIT engine
+- **Production minification** -- Class names mangled (`p-4` -> `z`) for smaller output
+- **TypeScript support** -- Fully typed `sz` prop with autocomplete
 
 ## Installation
 
 ```bash
-npm install csszyx
-# or
 pnpm add csszyx
-# or
-yarn add csszyx
 ```
 
 ## Quick Start
 
-1. **Initialize your project**:
+### 1. Configure your build tool
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import csszyx from "csszyx/vite";
+
+export default defineConfig({
+  plugins: [...csszyx(), tailwindcss(), react()],
+});
+```
+
+### 2. Use the `sz` prop
+
+```tsx
+function Button() {
+  return (
+    <button sz={{ bg: "blue-500", color: "white", p: 4 }}>Click me</button>
+  );
+}
+```
+
+At build time, `sz={{ bg: 'blue-500', color: 'white', p: 4 }}` compiles to `className="bg-blue-500 text-white p-4"`.
+
+## Object Syntax
+
+The `sz` prop accepts an object where keys are Tailwind property names and values are their arguments.
 
-   ```bash
-   npx csszyx init
-   ```
+```tsx
+// Basic utilities
+<div sz={{ p: 4, m: 2, bg: "blue-500" }} />
+// -> className="p-4 m-2 bg-blue-500"
 
-2. **Start coding**:
+// Text color uses `color`, not `text`
+<div sz={{ color: "white" }} />
+// -> className="text-white"
 
-   ```tsx
-   import { _sz } from "csszyx";
+// Font weight and family
+<div sz={{ fontWeight: "bold", fontFamily: "mono" }} />
+// -> className="font-bold font-mono"
 
-   function Button() {
-     return (
-       <button className={_sz("bg-blue-500 text-white p-4")}>Click me</button>
-     );
-   }
-   ```
+// Hover state
+<button sz={{ bg: "blue-500", hover: { bg: "blue-600" } }} />
+// -> className="bg-blue-500 hover:bg-blue-600"
+
+// Responsive breakpoints
+<div sz={{ p: 4, md: { p: 8 }, lg: { p: 12 } }} />
+// -> className="p-4 md:p-8 lg:p-12"
+
+// Negative values
+<div sz={{ m: -4 }} />
+// -> className="-m-4"
+
+// Opacity modifier
+<div sz={{ bg: "blue-500/20" }} />
+// -> className="bg-blue-500/20"
+```
+
+## Runtime Helpers
+
+For dynamic class composition, use the runtime helpers from `@csszyx/runtime` (re-exported by `csszyx`):
+
+```tsx
+import { _sz, _szIf, _szSwitch } from "@csszyx/runtime";
+
+<div className={_sz("p-4", _szIf(isActive, "bg-blue-500", "bg-gray-200"))} />;
+```
 
 ## Packages
 
-- **[@csszyx/unplugin](https://www.npmjs.com/package/@csszyx/unplugin)**: Integrations for Vite, Webpack, and more.
-- **[@csszyx/cli](https://www.npmjs.com/package/@csszyx/cli)**: Command-line tools.
-- **[@csszyx/core](https://www.npmjs.com/package/@csszyx/core)**: WASM core engine.
+| Package                                                              | Description                             |
+| -------------------------------------------------------------------- | --------------------------------------- |
+| [`csszyx`](https://www.npmjs.com/package/csszyx)                     | Umbrella package (re-exports all)       |
+| [`@csszyx/unplugin`](https://www.npmjs.com/package/@csszyx/unplugin) | Vite + Webpack + esbuild plugin         |
+| [`@csszyx/compiler`](https://www.npmjs.com/package/@csszyx/compiler) | sz object to Tailwind class transform   |
+| [`@csszyx/runtime`](https://www.npmjs.com/package/@csszyx/runtime)   | Runtime helpers + SSR hydration         |
+| [`@csszyx/core`](https://www.npmjs.com/package/@csszyx/core)         | Rust/WASM: encoder, checksum, collision |
+| [`@csszyx/cli`](https://www.npmjs.com/package/@csszyx/cli)           | Migration CLI + type generator          |
+| [`@csszyx/types`](https://www.npmjs.com/package/@csszyx/types)       | Shared TypeScript types                 |
 
 ## License
 
-MIT © [csszyx contributors](https://github.com/nguyennhutien/csszyx)
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "csszyx",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Universal CSS-in-JS for Tailwind CSS with WASM core",
   "keywords": [
     "css",
@@ -49,19 +49,19 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts src/lite.ts src/vite.ts src/webpack.ts --format esm --dts && echo '/// <reference types=\"@csszyx/types/jsx\" />' | cat - dist/index.d.ts > dist/index.d.ts.tmp && mv dist/index.d.ts.tmp dist/index.d.ts",
-    "dev": "tsup src/index.ts src/lite.ts src/vite.ts src/webpack.ts --format esm --dts --watch"
-  },
   "dependencies": {
-    "@csszyx/core": "workspace:*",
-    "@csszyx/runtime": "workspace:*",
-    "@csszyx/compiler": "workspace:*",
-    "@csszyx/unplugin": "workspace:*",
-    "@csszyx/types": "workspace:*"
+    "@csszyx/core": "0.1.2",
+    "@csszyx/runtime": "0.1.2",
+    "@csszyx/compiler": "0.1.2",
+    "@csszyx/unplugin": "0.1.2",
+    "@csszyx/types": "0.1.2"
   },
   "devDependencies": {
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/lite.ts src/vite.ts src/webpack.ts --format esm --dts && echo '/// <reference types=\"@csszyx/types/jsx\" />' | cat - dist/index.d.ts > dist/index.d.ts.tmp && mv dist/index.d.ts.tmp dist/index.d.ts",
+    "dev": "tsup src/index.ts src/lite.ts src/vite.ts src/webpack.ts --format esm --dts --watch"
   }
-}
+}