feat: cx.with method #290

.github/actions/cache-dir/action.yml

@@ -11,6 +11,7 @@ inputs:
     default: |
       .cache
       **/.cache
+      configs/vite-config-custom/dist
 
 runs:
   using: composite

.vscode/settings.json

@@ -28,6 +28,7 @@
     "vue"
   ],
   "cSpell.words": [
+    "Classable",
     "codegen",
     "elif",
     "fontface",
@@ -39,8 +40,10 @@
     "pkgs",
     "Pretendard",
     "Resizer",
+    "Stringable",
     "unicase",
     "unitless",
-    "urange"
+    "urange",
+    "Valueable"
   ]
 }

configs/eslint-config-custom/package.json

@@ -18,18 +18,18 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
-    "@types/node": "^24.9.1",
+    "@types/node": "^25.0.5",
     "@typescript-eslint/parser": "^8.46.2",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-yml": "^1.19.0",
-    "globals": "^16.4.0",
-    "prettier": "^3.6.2",
+    "globals": "^17.0.0",
+    "prettier": "^3.7.4",
     "prettier-config-custom": "workspace:^",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
-    "yaml-eslint-parser": "^1.3.0"
+    "yaml-eslint-parser": "^1.3.2"
   },
   "prettier": "prettier-config-custom"
 }

examples/react-babel/package.json

@@ -23,30 +23,30 @@
     "@vanilla-extract/private": "^1.0.9",
     "css-what": "^7.0.0",
     "cssesc": "^3.0.0",
-    "dedent": "^1.7.0",
+    "dedent": "^1.7.1",
     "deep-object-diff": "^1.1.9",
     "deepmerge": "^4.3.1",
-    "lru-cache": "^11.2.2",
+    "lru-cache": "^11.2.4",
     "media-query-parser": "3.0.2",
     "modern-ahocorasick": "^2.0.4",
     "picocolors": "^1.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "scheduler": "^0.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@types/babel__core": "^7.20.5",
     "@types/cssesc": "^3.0.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
     "@types/scheduler": "^0.26.0",
     "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.38.0",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.4.0",
+    "globals": "^17.0.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.2",
     "vite": "^7.1.12"

examples/react-swc/package.json

@@ -11,24 +11,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@mincho-js/css": "workspace:^",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
     "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/esbuild-plugin": "^2.3.18",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react-swc": "^4.1.0",
+    "@vanilla-extract/esbuild-plugin": "^2.3.21",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vitejs/plugin-react-swc": "^4.2.2",
     "eslint": "^9.38.0",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.4.0",
+    "globals": "^17.0.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "vite": "^7.1.12"

package.json

@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "postinstall": "yarn workspace vite-config-custom build",
-    "task": "yarn turbo run --cache-dir .cache/turbo",
-    "clean": "yarn g:clean && yarn task clean",
+    "task": "yarn run -T turbo run --cache-dir .cache/turbo",
+    "clean": "yarn g:clean & yarn task clean",
     "build": "yarn task build",
     "build:full": "PACKAGE_PUBLISH=true yarn task build",
     "build:type": "yarn tsc --build",
@@ -47,30 +47,30 @@
   },
   "prettier": "prettier-config-custom",
   "devDependencies": {
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
     "@mincho-js/debug-log": "workspace:^",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.11.0",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^24.9.1",
+    "@types/node": "^25.0.5",
     "@typescript/analyze-trace": "^0.10.1",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitest/coverage-v8": "^4.0.2",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.16",
     "@yarnpkg/types": "^4.0.1",
     "c8": "^10.1.3",
     "eslint": "^9.38.0",
     "eslint-config-custom": "workspace:^",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-config-custom": "workspace:^",
     "prettier-eslint": "^16.4.2",
     "rimraf": "6.0.0",
-    "terser": "^5.44.0",
+    "terser": "^5.44.1",
     "tsconfig-custom": "workspace:^",
-    "turbo": "^2.5.8",
+    "turbo": "^2.7.3",
     "typescript": "^5.9.3",
     "vite": "^7.1.12",
     "vite-node": "^3.2.4",
-    "vitest": "^4.0.2",
+    "vitest": "^4.0.16",
     "yarn-constraints-rules": "^0.1.0"
   },
   "dependencies": {

packages/css/src/classname/cx.ts

@@ -1,6 +1,11 @@
 import { clsx } from "clsx";
-import type { ClassMultipleInput, ClassMultipleResult } from "./types.js";
+import type {
+  ClassValue,
+  ClassMultipleInput,
+  ClassMultipleResult
+} from "./types.js";
 
+const cxImpl: (...inputs: ClassValue[]) => string = clsx;
 /**
  * Conditionally join class names into a single string
  *
@@ -27,8 +32,9 @@ import type { ClassMultipleInput, ClassMultipleResult } from "./types.js";
  * cx('foo', [1 && 'bar', { baz: false }], ['hello', ['world']], 'cya');
  * // => 'foo bar hello world cya'
  */
-export const cx = Object.assign(clsx, {
-  multiple: cxMultiple
+export const cx = Object.assign(cxImpl, {
+  multiple: cxMultiple,
+  with: cxWith
 });
 
 function cxMultiple<T extends ClassMultipleInput>(
@@ -37,14 +43,37 @@ function cxMultiple<T extends ClassMultipleInput>(
   const result = {} as ClassMultipleResult<T>;
 
   for (const key in map) {
-    if (Object.prototype.hasOwnProperty.call(map, key)) {
-      result[key] = clsx(map[key]);
-    }
+    result[key] = cxImpl(map[key]);
   }
 
   return result;
 }
 
+function cxWith<const T extends ClassValue>(
+  callback?: (params: T) => ClassValue
+) {
+  const cxFunction = callback ?? ((className: T) => className);
+
+  function cxWithImpl(...className: T[]) {
+    const result = className.map((cn) => cxFunction(cn));
+    return cxImpl(...result);
+  }
+
+  function cxWithMultiple<ClassNameMap extends ClassMultipleInput<T>>(
+    classNameMap: ClassNameMap
+  ): ClassMultipleResult<ClassNameMap> {
+    type TransformedClassNameMap = Record<keyof ClassNameMap, ClassValue>;
+    const transformedClassNameMap: TransformedClassNameMap =
+      {} as TransformedClassNameMap;
+    for (const key in classNameMap) {
+      transformedClassNameMap[key] = cxFunction(classNameMap[key]);
+    }
+    return cxMultiple(transformedClassNameMap);
+  }
+
+  return Object.assign(cxWithImpl, { multiple: cxWithMultiple });
+}
+
 // == Tests ====================================================================
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore error TS1343
@@ -124,10 +153,11 @@ if (import.meta.vitest) {
     it("filters falsy values correctly", () => {
       expect(cx(null)).toBe("");
       expect(cx(undefined)).toBe("");
+      expect(cx(true)).toBe("");
       expect(cx(false)).toBe("");
       expect(cx(0)).toBe("");
       expect(cx("")).toBe("");
-      expect(cx(null, undefined, false, 0, "")).toBe("");
+      expect(cx(null, undefined, true, false, 0, "")).toBe("");
     });
 
     it("preserves whitespace in class names", () => {
@@ -201,4 +231,104 @@ if (import.meta.vitest) {
       assertType<{ a: string; b: string }>(result);
     });
   });
+
+  describe.concurrent("cx.with()", () => {
+    it("creates a typed constraint without transformer", () => {
+      type LayoutDisplay = "flex" | "grid" | "block";
+      type LayoutSpacing = `p-${number}` | `m-${number}`;
+      const layout = cx.with<LayoutDisplay | LayoutSpacing>();
+
+      expect(layout("flex", "p-4")).toBe("flex p-4");
+      expect(layout("grid")).toBe("grid");
+    });
+
+    it("creates a typed full constraint without transformer", () => {
+      type LayoutDisplay = "flex" | "grid" | "block";
+      type LayoutSpacing = `p-${number}` | `m-${number}`;
+      const layout = cx.with<ClassValue<LayoutDisplay | LayoutSpacing>>();
+
+      expect(layout("flex", "p-4", { block: true })).toBe("flex p-4 block");
+      expect(layout("grid", { block: false, "m-1": true })).toBe("grid m-1");
+    });
+
+    it("creates a typed constraint with transformer", () => {
+      const responsive = cx.with<{ base: string; md?: string; lg?: string }>(
+        ({ base, md, lg }) => [base, md && `md:${md}`, lg && `lg:${lg}`]
+      );
+
+      expect(
+        responsive({ base: "text-sm", md: "text-base", lg: "text-lg" })
+      ).toBe("text-sm md:text-base lg:text-lg");
+      expect(responsive({ base: "text-sm" })).toBe("text-sm");
+    });
+
+    it("filters out non-string and empty values without transformer", () => {
+      const test = cx.with<{
+        required: string;
+        optional?: string;
+        flag?: boolean;
+      }>();
+
+      expect(test({ required: "foo", optional: undefined, flag: true })).toBe(
+        "required flag"
+      );
+      expect(test({ required: "foo", optional: "" })).toBe("required");
+    });
+
+    it("transformer receives all params", () => {
+      const test = cx.with<{ a: string; b: boolean }>(({ a, b }) => [
+        a,
+        b && "active"
+      ]);
+
+      expect(test({ a: "base", b: true })).toBe("base active");
+      expect(test({ a: "base", b: false })).toBe("base");
+    });
+
+    it("cx.with().multiple() processes a map with typed constraint", () => {
+      type LayoutDisplay = "flex" | "grid" | "block";
+      type LayoutSpacing = `p-${number}` | `m-${number}`;
+      const layout = cx.with<LayoutDisplay | LayoutSpacing>();
+
+      const result = layout.multiple({
+        card: "flex",
+        container: "grid"
+      });
+
+      expect(result.card).toBe("flex");
+      expect(result.container).toBe("grid");
+    });
+
+    it("cx.with().multiple() with transformer", () => {
+      const responsive = cx.with<{ base: string; md?: string; lg?: string }>(
+        ({ base, md, lg }) => [base, md && `md:${md}`, lg && `lg:${lg}`]
+      );
+
+      const result = responsive.multiple({
+        heading: { base: "text-xl", md: "text-2xl", lg: "text-3xl" },
+        body: { base: "text-sm", md: "text-base" },
+        caption: { base: "text-xs" }
+      });
+
+      expect(result.heading).toBe("text-xl md:text-2xl lg:text-3xl");
+      expect(result.body).toBe("text-sm md:text-base");
+      expect(result.caption).toBe("text-xs");
+    });
+
+    it("cx.with().multiple() handles empty map", () => {
+      const layout = cx.with<"flex" | "grid">();
+      const result = layout.multiple({});
+      expect(result).toEqual({});
+    });
+
+    it("cx.with().multiple() returns correct type", () => {
+      const layout = cx.with<"flex" | "grid">();
+      const result = layout.multiple({
+        a: "flex",
+        b: "grid"
+      });
+
+      assertType<{ a: string; b: string }>(result);
+    });
+  });
 }

packages/css/src/classname/index.ts

@@ -1,3 +1,3 @@
 export { cx } from "./cx.js";
 
-export type { ClassValue, ClassArray, ClassDictionary } from "./types.js";
+export type { ClassValue } from "./types.js";