@tenphi/tasty 1.1.0 → 1.2.0

package/docs/tasty-static.md

@@ -157,6 +157,7 @@ module.exports = {
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `output` | `string` | `'tasty.css'` | Path for generated CSS file |
+| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode)) |
 | `configFile` | `string` | — | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack. |
 | `config` | `TastyZeroConfig \| () => TastyZeroConfig` | `{}` | Inline config object or factory function. Takes precedence over `configFile`. |
 | `configDeps` | `string[]` | `[]` | Absolute file paths that affect config (for cache invalidation) |
@@ -224,6 +225,7 @@ export default withTastyZero({
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `output` | `string` | `'public/tasty.css'` | Output path for CSS relative to project root |
+| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS |
 | `enabled` | `boolean` | `true` | Enable/disable the plugin |
 | `configFile` | `string` | — | Path to a TS/JS module that default-exports `TastyZeroConfig`. Recommended for Turbopack compatibility. |
 | `config` | `TastyZeroConfig` | — | Inline config object. For static configs that don't change during dev. |
@@ -333,6 +335,91 @@ export const Button = () => <button className={button}>Click</button>;
 
 ---
 
+## Inject Mode
+
+By default the Babel plugin writes CSS to a file (`mode: 'file'`). **Inject mode** (`mode: 'inject'`) embeds CSS inline in your JavaScript and injects it at runtime via a tiny injector. No CSS file is produced.
+
+This is ideal for **reusable components**, **extensions**, and **libraries** where consumers shouldn't need to manage an external CSS file.
+
+### How It Works
+
+1. The Babel plugin extracts CSS at build time (same pipeline as file mode).
+2. Instead of writing to a `.css` file, the CSS is embedded as string literals in the JS output.
+3. The `@tenphi/tasty/static` import is rewritten to `@tenphi/tasty/static/inject`.
+4. Each `tastyStatic` call becomes a self-contained expression that injects its CSS and evaluates to a `StaticStyle` object.
+
+### Configuration
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['@tenphi/tasty/babel-plugin', {
+      mode: 'inject',
+      config: {
+        states: { '@mobile': '@media(w < 768px)' },
+      },
+    }]
+  ]
+};
+```
+
+With Next.js:
+
+```typescript
+// next.config.ts
+import { withTastyZero } from '@tenphi/tasty/next';
+
+export default withTastyZero({
+  mode: 'inject',
+  configFile: './app/tasty-zero.config.ts',
+})({
+  reactStrictMode: true,
+});
+```
+
+When `mode` is `'inject'`, the `output` and `injectImport` options are ignored.
+
+### Build Transformation (inject mode)
+
+**Before:**
+
+```tsx
+import { tastyStatic } from '@tenphi/tasty/static';
+
+const button = tastyStatic({
+  padding: '2x 4x',
+  fill: '#purple',
+});
+
+tastyStatic('.heading', { preset: 'h1' });
+```
+
+**After:**
+
+```tsx
+import { injectCSS as _$i } from '@tenphi/tasty/static/inject';
+
+const button = (_$i("ts3f2a1b ts8c4d2e", ".ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}"), {
+  className: 'ts3f2a1b ts8c4d2e',
+  styles: { padding: '2x 4x', fill: '#purple' },
+  toString() { return this.className; }
+});
+
+_$i(".heading", ".heading{font-size:2.5rem;font-weight:700;line-height:1.2}");
+```
+
+### Dev Mode / HMR
+
+Class names are content-hashed (`ts` + MD5). When styles change, a new hash produces a new `_$i` call that injects fresh CSS. The injector deduplicates by id, so unchanged styles are skipped. Old CSS stays in the DOM but is harmless since no elements reference those class names.
+
+### Limitations (inject mode)
+
+- **Client-side only** — Styles are injected via the DOM, so they are not available during SSR. For server-rendered apps, use `mode: 'file'` or the runtime `tasty()`.
+- **Larger JS bundle** — CSS is embedded in JavaScript, increasing bundle size. Best suited for components and extensions, not full-app styling.
+
+---
+
 ## Style Extension
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,6 +17,11 @@
       "import": "./dist/static/index.js",
       "default": "./dist/static/index.js"
     },
+    "./static/inject": {
+      "types": "./dist/static/inject.d.ts",
+      "import": "./dist/static/inject.js",
+      "default": "./dist/static/inject.js"
+    },
     "./babel-plugin": {
       "types": "./dist/zero/babel.d.ts",
       "import": "./dist/zero/babel.js",
@@ -117,7 +122,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/changelog-github": "^0.6.0",
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^10.0.1",
     "@size-limit/esbuild": "^12.0.0",
@@ -131,11 +136,11 @@
     "@vitest/runner": "^4.0.18",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.0.1",
     "prettier": "^3.8.1",
     "react": "^19.0.0",
     "size-limit": "^12.0.0",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.7",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.0",
     "vitest": "^4.0.18"
@@ -168,7 +173,7 @@
         "path",
         "crypto"
       ],
-      "limit": "28 kB"
+      "limit": "28.5 kB"
     },
     {
       "name": "babel-plugin",
@@ -179,7 +184,7 @@
         "path",
         "crypto"
       ],
-      "limit": "40 kB"
+      "limit": "41 kB"
     }
   ],
   "scripts": {

package/dist/styles/align.d.ts

@@ -1,15 +0,0 @@
-//#region src/styles/align.d.ts
-declare function alignStyle({
-  align
-}: {
-  align?: string;
-}): {
-  'align-items': string;
-  'align-content': string;
-} | undefined;
-declare namespace alignStyle {
-  var __lookupStyles: string[];
-}
-//#endregion
-export { alignStyle };
-//# sourceMappingURL=align.d.ts.map

package/dist/styles/align.js

@@ -1,14 +0,0 @@
-//#region src/styles/align.ts
-function alignStyle({ align }) {
-	if (typeof align !== "string") return;
-	if (!align) return;
-	return {
-		"align-items": align,
-		"align-content": align
-	};
-}
-alignStyle.__lookupStyles = ["align"];
-
-//#endregion
-export { alignStyle };
-//# sourceMappingURL=align.js.map

package/dist/styles/align.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"align.js","names":[],"sources":["../../src/styles/align.ts"],"sourcesContent":["export function alignStyle({ align }: { align?: string }) {\n  if (typeof align !== 'string') return;\n\n  if (!align) return;\n\n  return {\n    'align-items': align,\n    'align-content': align,\n  };\n}\n\nalignStyle.__lookupStyles = ['align'];\n"],"mappings":";AAAA,SAAgB,WAAW,EAAE,SAA6B;AACxD,KAAI,OAAO,UAAU,SAAU;AAE/B,KAAI,CAAC,MAAO;AAEZ,QAAO;EACL,eAAe;EACf,iBAAiB;EAClB;;AAGH,WAAW,iBAAiB,CAAC,QAAQ"}

package/dist/styles/justify.d.ts

@@ -1,15 +0,0 @@
-//#region src/styles/justify.d.ts
-declare function justifyStyle({
-  justify
-}: {
-  justify?: string;
-}): {
-  'justify-items': string;
-  'justify-content': string;
-} | undefined;
-declare namespace justifyStyle {
-  var __lookupStyles: string[];
-}
-//#endregion
-export { justifyStyle };
-//# sourceMappingURL=justify.d.ts.map

package/dist/styles/justify.js

@@ -1,14 +0,0 @@
-//#region src/styles/justify.ts
-function justifyStyle({ justify }) {
-	if (typeof justify !== "string") return;
-	if (!justify) return;
-	return {
-		"justify-items": justify,
-		"justify-content": justify
-	};
-}
-justifyStyle.__lookupStyles = ["justify"];
-
-//#endregion
-export { justifyStyle };
-//# sourceMappingURL=justify.js.map

package/dist/styles/justify.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"justify.js","names":[],"sources":["../../src/styles/justify.ts"],"sourcesContent":["export function justifyStyle({ justify }: { justify?: string }) {\n  if (typeof justify !== 'string') return;\n\n  if (!justify) return;\n\n  return {\n    'justify-items': justify,\n    'justify-content': justify,\n  };\n}\n\njustifyStyle.__lookupStyles = ['justify'];\n"],"mappings":";AAAA,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,OAAO,YAAY,SAAU;AAEjC,KAAI,CAAC,QAAS;AAEd,QAAO;EACL,iBAAiB;EACjB,mBAAmB;EACpB;;AAGH,aAAa,iBAAiB,CAAC,UAAU"}