@csszyx/cli 0.9.10 → 0.10.0

package/dist/bin.mjs

@@ -6,7 +6,9 @@ import path__default from 'node:path';
 import fs from 'fs-extra';
 import ora from 'ora';
 import pc from 'picocolors';
-import { i as transformHtmlSourceSimple, t as transformSource, h as generateTypes } from './shared/cli.dDkXlxD_.mjs';
+import { parseExpression } from '@babel/parser';
+import { transform } from '@csszyx/compiler';
+import { i as transformHtmlSourceSimple, t as transformSource, h as generateTypes } from './shared/cli.C2lx9IpE.mjs';
 import { execa } from 'execa';
 import prompts from 'prompts';
 import readline from 'node:readline';
@@ -18,7 +20,6 @@ import { Minimatch } from 'minimatch';
 import 'node:fs/promises';
 import 'node:url';
 import 'tailwindcss/resolveConfig.js';
-import '@babel/parser';
 import '@babel/types';
 
 const colors = {
@@ -329,6 +330,97 @@ async function doctor(options = {}) {
   }
 }
 
+class ExplainParseError extends Error {
+}
+function literalToValue(node) {
+  switch (node.type) {
+    case "StringLiteral":
+      return node.value;
+    case "NumericLiteral":
+      return node.value;
+    case "BooleanLiteral":
+      return node.value;
+    case "NullLiteral":
+      return null;
+    case "UnaryExpression":
+      if (node.operator === "-" && node.argument.type === "NumericLiteral") {
+        return -node.argument.value;
+      }
+      throw new ExplainParseError(`unsupported unary expression "${node.operator}"`);
+    case "TemplateLiteral":
+      if (node.expressions.length === 0 && node.quasis.length === 1) {
+        return node.quasis[0]?.value.cooked ?? "";
+      }
+      throw new ExplainParseError("template literals with interpolation are dynamic");
+    case "ArrayExpression":
+      return arrayToValue(node);
+    case "ObjectExpression":
+      return objectToValue(node);
+    default:
+      throw new ExplainParseError(
+        `"${node.type}" is dynamic \u2014 explain only resolves static literals`
+      );
+  }
+}
+function arrayToValue(node) {
+  return node.elements.map((element) => {
+    if (element === null) {
+      throw new ExplainParseError("array holes are not supported");
+    }
+    if (element.type === "SpreadElement") {
+      throw new ExplainParseError("spreads are dynamic and cannot be explained");
+    }
+    return literalToValue(element);
+  });
+}
+function objectToValue(node) {
+  const result = {};
+  for (const property of node.properties) {
+    if (property.type !== "ObjectProperty") {
+      throw new ExplainParseError("object methods/spreads are dynamic");
+    }
+    if (property.computed) {
+      throw new ExplainParseError("computed keys are dynamic");
+    }
+    const { key } = property;
+    const name = key.type === "Identifier" ? key.name : key.type === "StringLiteral" ? key.value : null;
+    if (name === null) {
+      throw new ExplainParseError(`unsupported key type "${key.type}"`);
+    }
+    if (property.value.type === "AssignmentPattern" || property.value.type === "RestElement") {
+      throw new ExplainParseError("pattern values are not supported");
+    }
+    result[name] = literalToValue(property.value);
+  }
+  return result;
+}
+function explainSz(input) {
+  let expression;
+  try {
+    expression = parseExpression(input, { plugins: ["typescript"] });
+  } catch {
+    throw new ExplainParseError("could not parse the sz argument as a JS expression");
+  }
+  if (expression.type !== "ObjectExpression") {
+    throw new ExplainParseError('sz must be an object literal, e.g. "{ p: 4 }"');
+  }
+  const object = objectToValue(expression);
+  const result = transform(object);
+  return typeof result === "string" ? result : result.className;
+}
+function explain(sz) {
+  let className;
+  try {
+    className = explainSz(sz);
+  } catch (error) {
+    const reason = error instanceof ExplainParseError ? error.message : String(error);
+    printError(`Could not explain sz: ${reason}`);
+    process.exitCode = 1;
+    return;
+  }
+  console.log(className === "" ? "(no classes)" : className);
+}
+
 const VITE_FRAMEWORKS = /* @__PURE__ */ new Set(["vite-react", "vite-vue", "vite-svelte"]);
 async function readFileOrNull(filePath) {
   try {
@@ -470,7 +562,40 @@ async function init(options = {}) {
   }
   console.log("  \u2022 Check the docs at https://csszyx.com");
 }
+async function isInsideWorkspace(cwd) {
+  let dir = path__default.dirname(path__default.resolve(cwd));
+  const { root } = path__default.parse(dir);
+  while (dir !== root) {
+    if (await fs.pathExists(path__default.join(dir, "pnpm-workspace.yaml")) || await fs.pathExists(path__default.join(dir, "nx.json")) || await fs.pathExists(path__default.join(dir, "lerna.json"))) {
+      return true;
+    }
+    const pkg = await readFileOrNull(path__default.join(dir, "package.json"));
+    if (pkg) {
+      try {
+        if ("workspaces" in JSON.parse(pkg)) return true;
+      } catch {
+      }
+    }
+    dir = path__default.dirname(dir);
+  }
+  return false;
+}
+function tailwindImportBlock(cssDir, cwd, monorepo) {
+  if (!monorepo) return '@import "tailwindcss";\n';
+  const rel = path__default.relative(path__default.resolve(cssDir), path__default.resolve(cwd)) || ".";
+  const src = rel.split(path__default.sep).join("/");
+  return `/* Monorepo: scope Tailwind's content detection to this package. Its
+   automatic detection otherwise climbs to the workspace root and scans
+   sibling packages + docs (.md/.mdx/.txt are NOT ignored), generating
+   phantom or broken url() classes. csszyx auto-injects @source for its
+   generated classes; this @source covers your own templates. See
+   https://csszyx.com/docs/monorepo-content-scope/ */
+@import "tailwindcss" source(none);
+@source "${src}";
+`;
+}
 async function setupTailwindCss(cwd, framework) {
+  const monorepo = await isInsideWorkspace(cwd);
   let cssPath;
   let content = null;
   for (const candidate of CSS_ENTRY_CANDIDATES) {
@@ -485,14 +610,16 @@ async function setupTailwindCss(cwd, framework) {
   if (!cssPath || content === null) {
     cssPath = path__default.join(cwd, "src/index.css");
     await fs.ensureDir(path__default.dirname(cssPath));
-    await fs.writeFile(cssPath, '@import "tailwindcss";\n');
+    await fs.writeFile(cssPath, tailwindImportBlock(path__default.dirname(cssPath), cwd, monorepo));
     printInfo(`Created ${path__default.relative(cwd, cssPath)} with Tailwind v4 import`);
     return;
   }
   if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
-    await fs.writeFile(cssPath, `@import "tailwindcss";
-
-${content}`);
+    await fs.writeFile(
+      cssPath,
+      `${tailwindImportBlock(path__default.dirname(cssPath), cwd, monorepo)}
+${content}`
+    );
     printInfo(`Added Tailwind v4 import to ${path__default.relative(cwd, cssPath)}`);
   }
   if (NEXTJS_FRAMEWORKS.has(framework)) {
@@ -841,6 +968,7 @@ async function migrate(options = {}) {
   let totalTransformed = 0;
   let totalSkipped = 0;
   let totalSkippedComponent = 0;
+  let totalSzKeysNormalized = 0;
   let totalFiles = 0;
   const allUnrecognized = [];
   const allWarnings = [];
@@ -849,7 +977,10 @@ async function migrate(options = {}) {
   for (const filePath of files) {
     const source = fs$1.readFileSync(filePath, "utf-8");
     const isHtml = filePath.endsWith(".html");
-    const hasRelevantAttr = isHtml ? source.includes("class=") : source.includes("className=");
+    if (options.keysOnly && isHtml) {
+      continue;
+    }
+    const hasRelevantAttr = isHtml ? source.includes("class=") : options.keysOnly ? source.includes("sz=") : source.includes("className=") || source.includes("sz=");
     if (!hasRelevantAttr) {
       continue;
     }
@@ -866,13 +997,18 @@ async function migrate(options = {}) {
       injectRuntime: options.injectRuntime,
       cdnUrl: options.cdnUrl,
       localPath: options.localPath
-    }) : transformSource(processSource, filePath, { injectTodos, customMap });
+    }) : transformSource(processSource, filePath, {
+      injectTodos,
+      customMap,
+      keysOnly: options.keysOnly
+    });
     allWarnings.push(...result.warnings);
     if (result.changed) {
       totalFiles++;
       totalTransformed += result.stats.classNamesTransformed;
       totalSkipped += result.stats.classNamesSkipped;
       totalSkippedComponent += result.stats.classNamesSkippedComponent;
+      totalSzKeysNormalized += result.stats.szKeysNormalized ?? 0;
       allUnrecognized.push(...result.stats.classesUnrecognized);
       if (result.potentiallyUnusedImports.length > 0) {
         const rel2 = path__default.relative(cwd, filePath);
@@ -891,20 +1027,25 @@ async function migrate(options = {}) {
         }
       }
       const rel = path__default.relative(cwd, filePath);
+      const detail = options.keysOnly ? `${result.stats.szKeysNormalized ?? 0} sz key(s) normalized` : `${result.stats.classNamesTransformed} className(s) \u2192 sz`;
       if (dryRun) {
-        printInfo(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
-        log.writeLine(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
-      } else {
-        log.writeLine(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
+        printInfo(`  ${rel}: ${detail}`);
       }
+      log.writeLine(`  ${rel}: ${detail}`);
     }
   }
   s2.succeed("Migration complete");
   console.info();
   printSuccess(`Files modified: ${totalFiles}`);
-  printSuccess(`classNames converted: ${totalTransformed}`);
+  if (!options.keysOnly) {
+    printSuccess(`classNames converted: ${totalTransformed}`);
+  }
   log.writeLine(`Files modified: ${totalFiles}`);
   log.writeLine(`classNames converted: ${totalTransformed}`);
+  if (totalSzKeysNormalized > 0) {
+    printSuccess(`legacy sz keys normalized: ${totalSzKeysNormalized}`);
+    log.writeLine(`legacy sz keys normalized: ${totalSzKeysNormalized}`);
+  }
   if (totalSkipped > 0) {
     printWarn(`classNames skipped (dynamic): ${totalSkipped}`);
     log.writeLine(`classNames skipped (dynamic): ${totalSkipped}`);
@@ -1359,6 +1500,11 @@ cli.command("doctor", "Diagnose mangling issues").option("--verbose", "Show deta
     cwd: options.cwd
   });
 });
+cli.command("explain <sz>", "Print the Tailwind className an sz object compiles to").action(
+  (sz) => {
+    explain(sz);
+  }
+);
 cli.command("audit", "Analyze mangling performance").option("--json", "Output as JSON").option("--watch", "Live updates").option("--compare <dir>", "Compare with previous build").option("--cwd <dir>", "Current working directory").action(async (options) => {
   await audit({
     json: options.json,
@@ -1378,7 +1524,10 @@ cli.command("generate-types", "Generate TypeScript declarations from tailwind.co
 cli.command("migrate [dir]", "Convert Tailwind className to sz prop").option("--dry-run", "Show changes without modifying files").option("--ignore <patterns>", "Glob patterns to ignore (comma-separated)").option("--pattern <glob>", "Custom glob pattern for file discovery").option("--cwd <dir>", "Current working directory").option("--braces", "Wrap HTML sz values in outer { } braces (default: bare)").option("--no-fouc", "Skip FOUC-prevention CSS injection into HTML files").option("--inject-runtime <mode>", "Inject runtime script into HTML: local | cdn").option("--cdn-url <url>", "Custom CDN URL for --inject-runtime cdn").option(
   "--local-path <path>",
   "Local script path for --inject-runtime local (default: csszyx-runtime.js)"
-).option("--audit", "Scan without modifying files and output .csszyx-todo.json").option("--inject-todos", "Inject {/* @sz-todo */} comments above unrecognized classes").option("--resolve-todos <file>", "Path to a JSON file mapping custom classes to sz properties").action(async (dir, options) => {
+).option("--audit", "Scan without modifying files and output .csszyx-todo.json").option("--inject-todos", "Inject {/* @sz-todo */} comments above unrecognized classes").option("--resolve-todos <file>", "Path to a JSON file mapping custom classes to sz properties").option(
+  "--keys-only",
+  "Only normalize legacy sz-prop keys to their canonical form; leave className untouched (0.9.10 \u2192 0.10.0 upgrade)"
+).action(async (dir, options) => {
   await migrate({
     dryRun: options.dryRun,
     ignore: options.ignore ? options.ignore.split(",") : void 0,
@@ -1391,7 +1540,8 @@ cli.command("migrate [dir]", "Convert Tailwind className to sz prop").option("--
     localPath: options.localPath,
     audit: options.audit,
     injectTodos: options.injectTodos,
-    resolveTodos: options.resolveTodos
+    resolveTodos: options.resolveTodos,
+    keysOnly: options.keysOnly
   });
 });
 cli.command(

package/dist/index.d.mts

@@ -212,6 +212,8 @@ interface TransformResult {
         /** className kept on capitalized components (they do not accept sz). */
         classNamesSkippedComponent: number;
         classesUnrecognized: string[];
+        /** Legacy sz-prop keys rewritten to their single-way canonical (transitional). */
+        szKeysNormalized?: number;
     };
     /** Imports that may be unused after migration (e.g., clsx, cn). */
     potentiallyUnusedImports: string[];
@@ -224,6 +226,14 @@ interface TransformOptions {
     injectTodos?: boolean;
     /** Map of custom classes to sz objects, used to override unrecognized classes */
     customMap?: CsszyxTodoMap;
+    /**
+     * If true, ONLY normalize legacy sz-prop keys to their single-way canonical
+     * and leave every `className` attribute untouched. The sz-key-only upgrade
+     * path for 0.9.10 → 0.10.0.
+     *
+     * TRANSITIONAL: part of the same legacy-key normalizer; remove at v1.
+     */
+    keysOnly?: boolean;
 }
 /**
  * Transform a JSX/TSX source file, replacing className with sz props.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { c as classNameToSzObject, e as extractScreenKeys, a as extractSpacingKeys, f as findConfigFile, b as flattenColors, g as generateAndWriteTypes, d as generateTypeDeclarations, h as generateTypes, t as migrateSource, s as scanTailwindConfig, w as writeDeclarationFile } from './shared/cli.dDkXlxD_.mjs';
+export { c as classNameToSzObject, e as extractScreenKeys, a as extractSpacingKeys, f as findConfigFile, b as flattenColors, g as generateAndWriteTypes, d as generateTypeDeclarations, h as generateTypes, t as migrateSource, s as scanTailwindConfig, w as writeDeclarationFile } from './shared/cli.C2lx9IpE.mjs';
 import 'node:path';
 import 'node:fs';
 import 'node:fs/promises';
@@ -6,3 +6,4 @@ import 'node:url';
 import 'tailwindcss/resolveConfig.js';
 import '@babel/parser';
 import '@babel/types';
+import '@csszyx/compiler';

package/dist/shared/{cli.dDkXlxD_.mjs → cli.C2lx9IpE.mjs}

@@ -5,6 +5,7 @@ import { pathToFileURL } from 'node:url';
 import resolveConfig from 'tailwindcss/resolveConfig.js';
 import { parse } from '@babel/parser';
 import * as t from '@babel/types';
+import { REMOVED_BOOLEAN_SUGAR, SUGGESTION_MAP } from '@csszyx/compiler';
 
 const CONFIG_FILES = [
   "tailwind.config.ts",
@@ -147,12 +148,6 @@ const PROPERTY_MAPPINGS = [
     valueType: "spacing",
     description: "Gap between flex/grid items"
   },
-  {
-    prop: "grid",
-    prefix: "grid",
-    valueType: "grid",
-    description: "Grid shorthand"
-  },
   {
     prop: "gridCols",
     prefix: "grid-cols",
@@ -324,7 +319,7 @@ const PROPERTY_MAPPINGS = [
     description: "Background color"
   },
   {
-    prop: "text",
+    prop: "color",
     prefix: "text",
     valueType: "colors",
     stateful: true,
@@ -358,7 +353,7 @@ const PROPERTY_MAPPINGS = [
   },
   // Typography
   {
-    prop: "font",
+    prop: "weight",
     prefix: "font",
     valueType: "fontWeight",
     description: "Font weight"
@@ -370,7 +365,7 @@ const PROPERTY_MAPPINGS = [
     description: "Font family"
   },
   {
-    prop: "fontSize",
+    prop: "text",
     prefix: "text",
     valueType: "fontSize",
     description: "Font size"
@@ -400,12 +395,6 @@ const PROPERTY_MAPPINGS = [
     valueType: "borderRadius",
     description: "Border radius"
   },
-  {
-    prop: "borderW",
-    prefix: "border",
-    valueType: "borderWidth",
-    description: "Border width"
-  },
   // Effects
   {
     prop: "shadow",
@@ -581,11 +570,14 @@ const STATIC_VALUE_TYPES = {
   transition: ["none", "all", "colors", "opacity", "shadow", "transform"],
   ease: ["linear", "in", "out", "in-out"]
 };
+function escapeTsString(value) {
+  return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\r/g, "\\r").replace(/\n/g, "\\n");
+}
 function generateUnionType(values) {
   if (values.length === 0) {
     return "string";
   }
-  return values.map((v) => `'${v}'`).join(" | ");
+  return values.map((v) => `'${escapeTsString(v)}'`).join(" | ");
 }
 function generateTypeDeclarations(theme, options = {}) {
   const { includeComments = true } = options;
@@ -989,6 +981,7 @@ const REVERSE_PROPERTY_MAP = {
   bg: "bg",
   "bg-clip": "bgClip",
   "bg-origin": "bgOrigin",
+  "bg-size": "bgSize",
   // Border Radius
   rounded: "rounded",
   "rounded-t": "roundedT",
@@ -1048,6 +1041,11 @@ const REVERSE_PROPERTY_MAP = {
   // Space between
   "space-x": "spaceX",
   "space-y": "spaceY",
+  // Logical margin / padding (block-start / block-end)
+  mbs: "mbs",
+  mbe: "mbe",
+  pbs: "pbs",
+  pbe: "pbe",
   // Sizing
   w: "w",
   "min-w": "minW",
@@ -1056,6 +1054,15 @@ const REVERSE_PROPERTY_MAP = {
   "min-h": "minH",
   "max-h": "maxH",
   size: "size",
+  // Logical sizing (block-size / inline-size). The bare `block`/`inline` classes
+  // are display values (BOOLEAN_VALUE_MAP wins via exact match first); only the
+  // `block-*` / `inline-*` value forms route here.
+  block: "blockSize",
+  inline: "inlineSize",
+  "min-block": "minBlockSize",
+  "max-block": "maxBlockSize",
+  "min-inline": "minInlineSize",
+  "max-inline": "maxInlineSize",
   // Layout
   aspect: "aspect",
   columns: "columns",
@@ -1079,6 +1086,11 @@ const REVERSE_PROPERTY_MAP = {
   inset: "inset",
   "inset-x": "insetX",
   "inset-y": "insetY",
+  // Logical inset sides (inset-s/e + block-start/block-end)
+  "inset-s": "insetS",
+  "inset-e": "insetE",
+  "inset-bs": "insetBs",
+  "inset-be": "insetBe",
   top: "top",
   right: "right",
   bottom: "bottom",
@@ -1089,7 +1101,7 @@ const REVERSE_PROPERTY_MAP = {
   // Typography (ambiguous — text-*, font-* disambiguated)
   text: "color",
   // default for text- prefix
-  font: "fontWeight",
+  font: "weight",
   // default for font- prefix
   decoration: "decoration",
   // ambiguous
@@ -1146,6 +1158,8 @@ const REVERSE_PROPERTY_MAP = {
   "mix-blend": "mixBlend",
   "bg-blend": "bgBlend",
   // Filters
+  filter: "filter",
+  "backdrop-filter": "backdropFilter",
   blur: "blur",
   brightness: "brightness",
   contrast: "contrast",
@@ -1168,9 +1182,12 @@ const REVERSE_PROPERTY_MAP = {
   scale: "scale",
   "scale-x": "scaleX",
   "scale-y": "scaleY",
+  "scale-z": "scaleZ",
   rotate: "rotate",
+  translate: "translate",
   "translate-x": "translateX",
   "translate-y": "translateY",
+  "translate-z": "translateZ",
   "skew-x": "skewX",
   "skew-y": "skewY",
   origin: "origin",
@@ -1184,6 +1201,11 @@ const REVERSE_PROPERTY_MAP = {
   cursor: "cursor",
   caret: "caret",
   "pointer-events": "pointerEvents",
+  scheme: "scheme",
+  tab: "tabSize",
+  zoom: "zoom",
+  scrollbar: "scrollbar",
+  "scrollbar-gutter": "scrollbarGutter",
   resize: "resize",
   scroll: "scroll",
   "scroll-m": "scrollM",
@@ -1221,6 +1243,8 @@ const REVERSE_PROPERTY_MAP = {
   // Line clamp
   "line-clamp": "lineClamp",
   wrap: "wrap",
+  // Typography plugin (bare `prose` is boolean; `prose-gray`/`prose-lg` carry a value)
+  prose: "prose",
   // Text shadow
   "text-shadow": "textShadow",
   // Gradient stops
@@ -1237,47 +1261,13 @@ const REVERSE_PROPERTY_MAP = {
   backface: "backface"
 };
 const REVERSE_BOOLEAN_MAP = {
-  // Display
-  block: "block",
-  inline: "inline",
-  "inline-block": "inlineBlock",
-  flex: "flex",
-  "inline-flex": "inlineFlex",
-  grid: "grid",
-  "inline-grid": "inlineGrid",
-  hidden: "hidden",
-  contents: "contents",
-  table: "table",
-  "table-row": "tableRow",
-  "table-cell": "tableCell",
-  "flow-root": "flowRoot",
-  "list-item": "listItem",
-  // Position
-  static: "static",
-  fixed: "fixed",
-  absolute: "absolute",
-  relative: "relative",
-  sticky: "sticky",
-  // Visibility
-  visible: "visible",
-  invisible: "invisible",
-  collapse: "collapse",
-  // Typography
+  // Typography (composite)
   truncate: "truncate",
-  uppercase: "uppercase",
-  lowercase: "lowercase",
-  capitalize: "capitalize",
-  "normal-case": "normalCase",
-  underline: "underline",
-  overline: "overline",
-  "line-through": "lineThrough",
-  "no-underline": "noUnderline",
-  italic: "italic",
-  "not-italic": "notItalic",
-  antialiased: "antialiased",
-  "subpixel-antialiased": "subpixelAntialiased",
-  // Flexbox
-  // flexWrap is string-based, not boolean — removed from boolean map
+  // Flexbox (default-or-value: bare `grow`/`shrink` mean grow/shrink: true,
+  // while grow-0/shrink-0 carry a value via REVERSE_PROPERTY_MAP).
+  // flexWrap is string-based, not boolean — kept out of this map.
+  grow: "grow",
+  shrink: "shrink",
   // Filters (defaults)
   blur: "blur",
   grayscale: "grayscale",
@@ -1290,6 +1280,10 @@ const REVERSE_BOOLEAN_MAP = {
   // Misc
   container: "container",
   prose: "prose",
+  // Bare `resize` (resize: both) and bare `shadow` (default elevation) are
+  // default-or-value toggles, like ring/outline below.
+  resize: "resize",
+  shadow: "shadow",
   "sr-only": "srOnly",
   "not-sr-only": "notSrOnly",
   isolate: "isolate",
@@ -1310,10 +1304,8 @@ const REVERSE_BOOLEAN_MAP = {
   "inset-ring": "insetRing",
   outline: "outline",
   rounded: "rounded",
-  // Transforms
-  "scale-3d": "scale",
-  "translate-3d": "translate",
-  // transform-gpu/cpu/none use BOOLEAN_VALUE_MAP → { transform: 'gpu'/'cpu'/'none' }
+  // Transforms — scale-3d/translate-3d carry the literal '3d' value via
+  // BOOLEAN_VALUE_MAP, and transform-gpu/cpu/none → { transform: 'gpu'/'cpu'/'none' }.
   // Font numeric
   "normal-nums": "fontVariant",
   "lining-nums": "fontVariant",
@@ -1376,10 +1368,94 @@ const BOOLEAN_VALUE_MAP = {
   // Appearance
   "appearance-none": { prop: "appearance", value: "none" },
   "appearance-auto": { prop: "appearance", value: "auto" },
+  // Isolation (bare `isolate` is in REVERSE_BOOLEAN_MAP; `isolation-auto` carries a value)
+  "isolation-auto": { prop: "isolation", value: "auto", cssProperty: "isolation" },
+  // Field sizing
+  "field-sizing-content": { prop: "fieldSizing", value: "content", cssProperty: "field-sizing" },
+  "field-sizing-fixed": { prop: "fieldSizing", value: "fixed", cssProperty: "field-sizing" },
   // Transform
   "transform-none": { prop: "transform", value: "none" },
   "transform-gpu": { prop: "transform", value: "gpu" },
-  "transform-cpu": { prop: "transform", value: "cpu" }
+  "transform-cpu": { prop: "transform", value: "cpu" },
+  // transform-style (3d / flat) — single CSS property, so fail-closed on conflict.
+  "transform-3d": { prop: "transformStyle", value: "3d", cssProperty: "transform-style" },
+  "transform-flat": { prop: "transformStyle", value: "flat", cssProperty: "transform-style" },
+  // 3D scale/translate keyword shorthands carry the literal '3d' value.
+  "scale-3d": { prop: "scale", value: "3d" },
+  "translate-3d": { prop: "translate", value: "3d" },
+  // Single-property utilities — migrated to their canonical { key: value }
+  // form. The boolean-sugar aliases (flex/absolute/italic/...) were removed,
+  // so these never emit `{ flex: true }`; one key per CSS property.
+  // display
+  block: { prop: "display", value: "block", cssProperty: "display" },
+  inline: { prop: "display", value: "inline", cssProperty: "display" },
+  "inline-block": { prop: "display", value: "inline-block", cssProperty: "display" },
+  flex: { prop: "display", value: "flex", cssProperty: "display" },
+  "inline-flex": { prop: "display", value: "inline-flex", cssProperty: "display" },
+  grid: { prop: "display", value: "grid", cssProperty: "display" },
+  "inline-grid": { prop: "display", value: "inline-grid", cssProperty: "display" },
+  hidden: { prop: "display", value: "none", cssProperty: "display" },
+  contents: { prop: "display", value: "contents", cssProperty: "display" },
+  table: { prop: "display", value: "table", cssProperty: "display" },
+  "inline-table": { prop: "display", value: "inline-table", cssProperty: "display" },
+  "table-row": { prop: "display", value: "table-row", cssProperty: "display" },
+  "table-row-group": { prop: "display", value: "table-row-group", cssProperty: "display" },
+  "table-cell": { prop: "display", value: "table-cell", cssProperty: "display" },
+  "table-caption": { prop: "display", value: "table-caption", cssProperty: "display" },
+  "table-column": { prop: "display", value: "table-column", cssProperty: "display" },
+  "table-column-group": {
+    prop: "display",
+    value: "table-column-group",
+    cssProperty: "display"
+  },
+  "table-footer-group": {
+    prop: "display",
+    value: "table-footer-group",
+    cssProperty: "display"
+  },
+  "table-header-group": {
+    prop: "display",
+    value: "table-header-group",
+    cssProperty: "display"
+  },
+  "flow-root": { prop: "display", value: "flow-root", cssProperty: "display" },
+  "list-item": { prop: "display", value: "list-item", cssProperty: "display" },
+  // position
+  static: { prop: "position", value: "static", cssProperty: "position" },
+  fixed: { prop: "position", value: "fixed", cssProperty: "position" },
+  absolute: { prop: "position", value: "absolute", cssProperty: "position" },
+  relative: { prop: "position", value: "relative", cssProperty: "position" },
+  sticky: { prop: "position", value: "sticky", cssProperty: "position" },
+  // visibility
+  visible: { prop: "visibility", value: "visible", cssProperty: "visibility" },
+  invisible: { prop: "visibility", value: "hidden", cssProperty: "visibility" },
+  collapse: { prop: "visibility", value: "collapse", cssProperty: "visibility" },
+  // isolation
+  isolate: { prop: "isolation", value: "isolate", cssProperty: "isolation" },
+  // text-transform
+  uppercase: { prop: "textTransform", value: "uppercase", cssProperty: "text-transform" },
+  lowercase: { prop: "textTransform", value: "lowercase", cssProperty: "text-transform" },
+  capitalize: { prop: "textTransform", value: "capitalize", cssProperty: "text-transform" },
+  "normal-case": { prop: "textTransform", value: "none", cssProperty: "text-transform" },
+  // font-style
+  italic: { prop: "fontStyle", value: "italic", cssProperty: "font-style" },
+  "not-italic": { prop: "fontStyle", value: "normal", cssProperty: "font-style" },
+  // text-decoration-line
+  underline: { prop: "decoration", value: "underline", cssProperty: "text-decoration-line" },
+  overline: { prop: "decoration", value: "overline", cssProperty: "text-decoration-line" },
+  "line-through": {
+    prop: "decoration",
+    value: "line-through",
+    cssProperty: "text-decoration-line"
+  },
+  "no-underline": { prop: "decoration", value: "none", cssProperty: "text-decoration-line" },
+  // font-smoothing
+  antialiased: { prop: "fontSmoothing", value: "grayscale", cssProperty: "font-smoothing" },
+  "subpixel-antialiased": {
+    prop: "fontSmoothing",
+    value: "subpixel",
+    cssProperty: "font-smoothing"
+  }
 };
 const SORTED_PREFIXES = Object.keys(REVERSE_PROPERTY_MAP).sort((a, b) => {
   if (b.length !== a.length) {
@@ -1406,6 +1482,13 @@ const NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "inset-y",
   "start",
   "end",
+  "inset-s",
+  "inset-e",
+  "inset-bs",
+  "inset-be",
+  "mbs",
+  "mbe",
+  "translate",
   "z",
   "order",
   "col",
@@ -1431,7 +1514,10 @@ const NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "scroll-mb",
   "scroll-ml",
   "hue-rotate",
-  "backdrop-hue-rotate"
+  "backdrop-hue-rotate",
+  // mask gradient direction carries a leading `-` as part of the value
+  // (e.g. -mask-linear-45 → { mask: '-linear-45' }), not a numeric negation.
+  "mask"
 ]);
 const FRACTION_SUPPORTED = /* @__PURE__ */ new Set([
   "w",
@@ -1451,8 +1537,14 @@ const FRACTION_SUPPORTED = /* @__PURE__ */ new Set([
   "left",
   "start",
   "end",
+  "inset-s",
+  "inset-e",
+  "inset-bs",
+  "inset-be",
   "translate-x",
-  "translate-y"
+  "translate-y",
+  "translate",
+  "aspect"
 ]);
 const SPACING_PROPS = /* @__PURE__ */ new Set([
   "p",
@@ -1516,7 +1608,25 @@ const SPACING_PROPS = /* @__PURE__ */ new Set([
   "scroll-pe",
   "border-spacing",
   "translate-x",
-  "translate-y"
+  "translate-y",
+  "translate-z",
+  "translate",
+  // Logical sizing accepts the spacing/sizing scale (block-4, inline-full, …)
+  "block",
+  "inline",
+  "min-block",
+  "max-block",
+  "min-inline",
+  "max-inline",
+  // Logical inset sides + block-axis margin/padding
+  "inset-s",
+  "inset-e",
+  "inset-bs",
+  "inset-be",
+  "mbs",
+  "mbe",
+  "pbs",
+  "pbe"
 ]);
 const TEXT_SIZE_KEYWORDS = /* @__PURE__ */ new Set([
   "xs",
@@ -1600,7 +1710,28 @@ const OBJECT_POSITION_KEYWORDS = /* @__PURE__ */ new Set([
   "right-top",
   "right-bottom"
 ]);
-const SHADOW_SIZE_KEYWORDS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl", "inner", "none"]);
+const SHADOW_SIZE_KEYWORDS = /* @__PURE__ */ new Set([
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "inner",
+  "none"
+]);
+const ALIGN_CONTENT_KEYWORDS = /* @__PURE__ */ new Set([
+  "normal",
+  "center",
+  "start",
+  "end",
+  "between",
+  "around",
+  "evenly",
+  "baseline",
+  "stretch"
+]);
 const OUTLINE_STYLE_KEYWORDS = /* @__PURE__ */ new Set(["none", "dashed", "dotted", "double"]);
 const DECORATION_STYLE_KEYWORDS = /* @__PURE__ */ new Set(["solid", "double", "dotted", "dashed", "wavy"]);
 const DECORATION_THICKNESS_KEYWORDS = /* @__PURE__ */ new Set([
@@ -1730,7 +1861,13 @@ function parseClass(cls, options = {}) {
     negative = true;
     negInput = input.slice(1);
   }
-  const boolResult = tryBooleanMatch(input, options);
+  if (input === "@container") {
+    return { prop: "@container", value: true };
+  }
+  if (input.startsWith("@container/")) {
+    return { prop: "@container", value: input.slice("@container/".length) };
+  }
+  const boolResult = tryBooleanMatch(input);
   if (boolResult) {
     return applyImportant(boolResult, important);
   }
@@ -1746,7 +1883,10 @@ function parseClass(cls, options = {}) {
         continue;
       }
       if (REVERSE_BOOLEAN_MAP[source]) {
-        return applyImportant(booleanClassToParsed(source, options), important);
+        return applyImportant(
+          { prop: REVERSE_BOOLEAN_MAP[source], value: true },
+          important
+        );
       }
       if (prefix === "divide-x" || prefix === "divide-y") {
         return applyImportant({ prop, value: true }, important);
@@ -1785,10 +1925,6 @@ function parseClass(cls, options = {}) {
       }
     }
   }
-  const displayResult = tryDisplay(input, options);
-  if (displayResult) {
-    return applyImportant(displayResult, important);
-  }
   if (input.startsWith("[") && input.endsWith("]") && input.includes(":")) {
     const inner = input.slice(1, -1);
     if (inner.startsWith("--")) {
@@ -1808,72 +1944,28 @@ function applyImportant(result, important) {
   if (!important) {
     return result;
   }
+  const base = result.cssProperty ? { cssProperty: result.cssProperty } : {};
   if (typeof result.value === "string") {
-    return { prop: result.prop, value: `${result.value}!` };
+    return { ...base, prop: result.prop, value: `${result.value}!` };
   }
   if (typeof result.value === "boolean") {
-    return { prop: result.prop, value: "!" };
+    return { ...base, prop: result.prop, value: "!" };
   }
   if (typeof result.value === "number") {
-    return { prop: result.prop, value: `${String(result.value)}!` };
+    return { ...base, prop: result.prop, value: `${String(result.value)}!` };
   }
   return result;
 }
-function tryBooleanMatch(cls, options) {
+function tryBooleanMatch(cls) {
   if (BOOLEAN_VALUE_MAP[cls]) {
-    const { prop, value } = BOOLEAN_VALUE_MAP[cls];
-    return { prop, value };
+    const { prop, value, cssProperty } = BOOLEAN_VALUE_MAP[cls];
+    return cssProperty ? { prop, value, cssProperty } : { prop, value };
   }
   if (REVERSE_BOOLEAN_MAP[cls]) {
-    return booleanClassToParsed(cls, options);
+    return { prop: REVERSE_BOOLEAN_MAP[cls], value: true };
   }
   return null;
 }
-function tryDisplay(cls, options) {
-  const displayValues = /* @__PURE__ */ new Set([
-    "block",
-    "inline",
-    "inline-block",
-    "flex",
-    "inline-flex",
-    "grid",
-    "inline-grid",
-    "hidden",
-    "contents",
-    "table",
-    "table-row",
-    "table-cell",
-    "flow-root",
-    "list-item"
-  ]);
-  if (displayValues.has(cls)) {
-    return REVERSE_BOOLEAN_MAP[cls] ? booleanClassToParsed(cls, options) : null;
-  }
-  return null;
-}
-function booleanClassToParsed(cls, options) {
-  const displayValue = DISPLAY_CLASS_VALUES[cls];
-  if (options.display === "canonical" && displayValue) {
-    return { prop: "display", value: displayValue, cssProperty: "display" };
-  }
-  return { prop: REVERSE_BOOLEAN_MAP[cls], value: true };
-}
-const DISPLAY_CLASS_VALUES = {
-  block: "block",
-  inline: "inline",
-  "inline-block": "inline-block",
-  flex: "flex",
-  "inline-flex": "inline-flex",
-  grid: "grid",
-  "inline-grid": "inline-grid",
-  hidden: "none",
-  contents: "contents",
-  table: "table",
-  "table-row": "table-row",
-  "table-cell": "table-cell",
-  "flow-root": "flow-root",
-  "list-item": "list-item"
-};
 function tryGradient(cls, negative) {
   let input = cls;
   let type = null;
@@ -1999,12 +2091,18 @@ function disambiguate(prefix, value, negative) {
       return disambiguateInsetShadow(value);
     case "stroke":
       return disambiguateStroke(value);
+    case "from":
+    case "via":
+    case "to":
+      return disambiguateGradientStop(prefix, value);
     case "list":
       return disambiguateList(value);
     case "ease":
       return { prop: "ease", value: parseValue("ease", value, negative) };
     case "snap":
       return disambiguateSnap();
+    case "content":
+      return disambiguateContent(value);
     case "flex":
       return disambiguateFlex(value);
     case "table":
@@ -2045,17 +2143,17 @@ function disambiguateText(value) {
 }
 function disambiguateFont(value) {
   if (FONT_WEIGHT_KEYWORDS.has(value)) {
-    return { prop: "fontWeight", value };
+    return { prop: "weight", value };
   }
   if (/^\d{3}$/.test(value)) {
-    return { prop: "fontWeight", value: parseInt(value, 10) };
+    return { prop: "weight", value: parseInt(value, 10) };
   }
   if (FONT_FAMILY_KEYWORDS.has(value)) {
     return { prop: "fontFamily", value };
   }
   if (value.startsWith("stretch-")) {
     const stretchVal = value.slice("stretch-".length);
-    return { prop: "fontStretch", value: stretchVal };
+    return { prop: "fontStretch", value: parseStringValue(stretchVal) };
   }
   if (FONT_STRETCH_KEYWORDS.has(value)) {
     return { prop: "fontStretch", value };
@@ -2087,6 +2185,12 @@ function disambiguateBg(value) {
   if (BG_ATTACHMENT_KEYWORDS.has(value)) {
     return { prop: "bgAttach", value };
   }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    const inner = value.slice(1, -1).replace(/_/g, " ");
+    if (inner.includes(" ") && BG_POSITION_KEYWORDS.has(inner.split(" ")[0])) {
+      return { prop: "bgPos", value: inner };
+    }
+  }
   if (value === "none") {
     return { prop: "bgImg", value: "none" };
   }
@@ -2105,6 +2209,13 @@ function disambiguateShadow(value) {
   if (SHADOW_SIZE_KEYWORDS.has(value)) {
     return { prop: "shadow", value };
   }
+  if (value.startsWith("(") && value.endsWith(")")) {
+    const inner = value.slice(1, -1);
+    if (inner.startsWith("color:")) {
+      return { prop: "shadowColor", value: inner.slice("color:".length) };
+    }
+    return { prop: "shadow", value: inner };
+  }
   return { prop: "shadowColor", value: parseStringValue(value) };
 }
 function disambiguateOutline(value) {
@@ -2125,12 +2236,11 @@ function disambiguateDecoration(value) {
     return { prop: "decorationStyle", value };
   }
   if (DECORATION_THICKNESS_KEYWORDS.has(value)) {
-    const num = Number(value);
-    if (!Number.isNaN(num)) {
-      return { prop: "decorationThickness", value };
-    }
     return { prop: "decorationThickness", value };
   }
+  if (isArbitraryDimension(value) || value.startsWith("(") && value.endsWith(")")) {
+    return { prop: "decorationThickness", value: parseStringValue(value) };
+  }
   return { prop: "decorationColor", value: parseStringValue(value) };
 }
 function disambiguateRing(value, negative) {
@@ -2175,8 +2285,18 @@ function disambiguateStroke(value) {
   if (!Number.isNaN(num) && Number.isInteger(num)) {
     return { prop: "strokeWidth", value: num };
   }
+  if (isArbitraryDimension(value)) {
+    return { prop: "strokeWidth", value: parseStringValue(value) };
+  }
   return { prop: "stroke", value: parseStringValue(value) };
 }
+function disambiguateGradientStop(prefix, value) {
+  const posKey = prefix === "from" ? "fromPos" : prefix === "via" ? "viaPos" : "toPos";
+  if (/^\d+(\.\d+)?%$/.test(value) || /^\d+$/.test(value) || isArbitraryDimension(value)) {
+    return { prop: posKey, value: parseStringValue(value) };
+  }
+  return { prop: prefix, value: parseStringValue(value) };
+}
 function disambiguateTransition(value) {
   if (TRANSITION_PROPERTY_KEYWORDS.has(value)) {
     return { prop: "transition", value };
@@ -2192,6 +2312,12 @@ function disambiguateList(value) {
 function disambiguateSnap(_value) {
   return null;
 }
+function disambiguateContent(value) {
+  if (ALIGN_CONTENT_KEYWORDS.has(value)) {
+    return { prop: "alignContent", value };
+  }
+  return { prop: "content", value: parseValue("content", value, false) };
+}
 function disambiguateFlex(value) {
   const dirValues = /* @__PURE__ */ new Set(["row", "col", "row-reverse", "col-reverse"]);
   if (dirValues.has(value)) {
@@ -2251,6 +2377,8 @@ function isValidSpacingValue(value) {
     "lvh",
     "lvw",
     // Max-width size keywords
+    "3xs",
+    "2xs",
     "xs",
     "sm",
     "md",
@@ -2300,7 +2428,7 @@ function parseValue(prefix, value, negative) {
     return inner;
   }
   if (FRACTION_SUPPORTED.has(prefix) && /^\d+\/\d+$/.test(value)) {
-    return value;
+    return negative ? `-${value}` : value;
   }
   if (value === "px") {
     return negative ? "-px" : "px";
@@ -2309,7 +2437,7 @@ function parseValue(prefix, value, negative) {
     return "auto";
   }
   if (value === "full") {
-    return "full";
+    return negative ? "-full" : "full";
   }
   if (value === "screen") {
     return "screen";
@@ -2627,7 +2755,7 @@ function parseClassTokenCached(token) {
 }
 function parseClassToken(token) {
   const { variantParts, baseClass } = extractVariants(token);
-  const parsed = parseClass(baseClass, { display: "canonical" });
+  const parsed = parseClass(baseClass, { });
   if (!parsed) {
     return null;
   }
@@ -3087,18 +3215,77 @@ function isAstNode(value) {
 function isClassNameJsxAttribute(node) {
   return t.isJSXAttribute(node) && t.isJSXIdentifier(node.name) && node.name.name === "className";
 }
+function isCleanCanonicalTarget(target) {
+  return /^[a-z][a-z0-9]*$/i.test(target);
+}
+function normalizeSzObject(obj, replacements) {
+  let count = 0;
+  for (const prop of obj.properties) {
+    if (!t.isObjectProperty(prop) || prop.computed) {
+      continue;
+    }
+    const key = prop.key;
+    let keyName = null;
+    if (t.isIdentifier(key)) {
+      keyName = key.name;
+    } else if (t.isStringLiteral(key)) {
+      keyName = key.value;
+    }
+    if (keyName === null) {
+      continue;
+    }
+    const sugar = REMOVED_BOOLEAN_SUGAR[keyName];
+    if (sugar && t.isBooleanLiteral(prop.value) && prop.value.value === true && prop.start != null && prop.end != null) {
+      replacements.push({
+        start: prop.start,
+        end: prop.end,
+        text: `${sugar.key}: '${sugar.value}'`
+      });
+      count++;
+      continue;
+    }
+    const suggestion = SUGGESTION_MAP[keyName];
+    if (suggestion && isCleanCanonicalTarget(suggestion) && suggestion !== keyName && key.start != null && key.end != null) {
+      replacements.push({
+        start: key.start,
+        end: key.end,
+        text: t.isStringLiteral(key) ? `'${suggestion}'` : suggestion
+      });
+      count++;
+    }
+    if (t.isObjectExpression(prop.value)) {
+      count += normalizeSzObject(prop.value, replacements);
+    }
+  }
+  return count;
+}
 function transformSource(source, filePath, options = {}) {
   const warnings = [];
   let classNamesTransformed = 0;
   let classNamesSkipped = 0;
   let classNamesSkippedComponent = 0;
+  let szKeysNormalized = 0;
   const classesUnrecognized = [];
   const replacements = [];
   const clsxImportNames = /* @__PURE__ */ new Set();
   let clsxUsedOutsideClassName = false;
   const clsxCallsitesMigrated = /* @__PURE__ */ new Set();
   let hasCvaImport = false;
-  if (source.indexOf("className") === -1 && source.indexOf("cva") === -1) {
+  if (options.keysOnly && source.indexOf("sz=") === -1) {
+    return {
+      code: source,
+      changed: false,
+      warnings: [],
+      stats: {
+        classNamesTransformed: 0,
+        classNamesSkipped: 0,
+        classNamesSkippedComponent: 0,
+        classesUnrecognized: []
+      },
+      potentiallyUnusedImports: []
+    };
+  }
+  if (source.indexOf("className") === -1 && source.indexOf("cva") === -1 && source.indexOf("sz=") === -1) {
     return {
       code: source,
       changed: false,
@@ -3160,6 +3347,16 @@ function transformSource(source, filePath, options = {}) {
     },
     JSXAttribute(node, parent) {
       const attrName = node.name;
+      if (t.isJSXIdentifier(attrName) && attrName.name === "sz") {
+        const szValue = node.value;
+        if (t.isJSXExpressionContainer(szValue) && t.isObjectExpression(szValue.expression)) {
+          szKeysNormalized += normalizeSzObject(szValue.expression, replacements);
+        }
+        return;
+      }
+      if (options.keysOnly) {
+        return;
+      }
       if (!t.isJSXIdentifier(attrName) || attrName.name !== "className") {
         return;
       }
@@ -3324,7 +3521,8 @@ function transformSource(source, filePath, options = {}) {
       classNamesTransformed,
       classNamesSkipped,
       classNamesSkippedComponent,
-      classesUnrecognized
+      classesUnrecognized,
+      szKeysNormalized
     },
     potentiallyUnusedImports
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/cli",
-  "version": "0.9.10",
+  "version": "0.10.0",
   "description": "Command-line tools for csszyx",
   "keywords": [
     "csszyx",
@@ -49,8 +49,9 @@
     "picocolors": "^1.0.0",
     "prompts": "^2.4.2",
     "tailwindcss": "^3.4.1",
-    "@csszyx/types": "0.9.10",
-    "@csszyx/unplugin": "0.9.10"
+    "@csszyx/compiler": "0.10.0",
+    "@csszyx/unplugin": "0.10.0",
+    "@csszyx/types": "0.10.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",