Merge pull request #163 from danpacho/162-bug-should-override-variants-base-when-compose

[bug + feature] override variants base when `compose`, add multiple class literal for `class`

Author: danpacho

packages/tailwindest/src/create_tailwindest.ts

@@ -88,6 +88,10 @@ export interface TailwindestInterface {
      * Enables arbitrary strings as valid style properties if `true`.
      */
     useArbitrary?: true | false
+    /**
+     * Use typed class literal strings for extra classes
+     */
+    useTypedClassLiteral?: true | false
 }
 
 /**
@@ -109,7 +113,8 @@ export interface TailwindestInterface {
  *      tailwind: Tailwind
  *      tailwindNestGroups: TailwindNestGroups
  *      useArbitrary: true
- *      groupPrefix: "#"
+ *      useTypedClassLiteral: true
+ *      groupPrefix: "#" // optional
  * }>
  * ```
  */

packages/tailwindest/src/index.ts

@@ -1,14 +1,16 @@
 import { createTools, type GetVariants } from "./tools"
 
-// Merger public interfaces
-export type { Merger as TailwindestMerger } from "./tools/merger_interface"
-export type { ClassList as TailwindestClassList } from "./tools/to_class"
-
 // V2 + tailwindcss < 4.0
 export type { Tailwindest } from "./legacy/tailwindest"
 export type { ShortTailwindest } from "./legacy/tailwindest.short"
 
 // V3 + tailwindcss >= 4.0
+
+// Merger public interfaces
+export type { Merger as TailwindestMerger } from "./tools/merger_interface"
+export type { ClassList as TailwindestClassList } from "./tools/to_class"
+
+// Create tailwindest typeset
 export type {
     CreateTailwindest,
     CreateTailwindLiteral,

packages/tailwindest/src/tools/__tests__/create_tools.test.ts

@@ -26,7 +26,13 @@ describe("PrimitiveStyler", () => {
         it("concatenates with extra class name", () => {
             const style: TestStyle = { color: "green" }
             const styler = new PrimitiveStyler<TestStyle>(style)
-            expect(styler.class("extra")).toBe("green extra")
+            expect(
+                styler.class(
+                    "extra1 extra2 extra3",
+                    ["extra4 extra5", "extra6"],
+                    "extra7"
+                )
+            ).toBe("green extra1 extra2 extra3 extra4 extra5 extra6 extra7")
         })
     })
 
@@ -144,7 +150,7 @@ describe("RotaryStyler", () => {
 
     describe("compose method", () => {
         it("creates new styler with composed base", () => {
-            const base: TestStyle = { color: "gray" }
+            const base: TestStyle = { color: "gray", fontSize: "14" }
             const variants: Record<VariantKey, TestStyle> = {
                 primary: { color: "blue" },
                 secondary: { color: "green" },
@@ -153,14 +159,14 @@ describe("RotaryStyler", () => {
                 base,
                 variants,
             })
-            const newStyler = styler.compose({ fontSize: "12", color: "gray" })
+            const newStyler = styler.compose({ color: "gray", fontSize: "200" })
             expect(newStyler.style("base")).toEqual({
                 color: "gray",
-                fontSize: "12",
+                fontSize: "200",
             })
             expect(newStyler.style("primary")).toEqual({
                 color: "blue",
-                fontSize: "12",
+                fontSize: "200",
             })
         })
     })

packages/tailwindest/src/tools/__tests__/get_variants.test.ts

@@ -87,7 +87,7 @@ describe("GetVariants - rotary", () => {
 describe("GetVariants - style", () => {
     test("infer never", () => {
         const baseWind = tw.style({})
-        expectType<TypeEqual<GetVariants<typeof baseWind>, string | undefined>>(
+        expectType<TypeEqual<GetVariants<typeof baseWind>, string | string[]>>(
             true
         )
     })

packages/tailwindest/src/tools/__tests__/merger_interface.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from "vitest"
-import { twMerge } from "tailwind-merge"
-import { Merger } from "../merger_interface"
 import { createTools } from "../create_tools"
-import { CreateTailwindest } from "../../create_tailwindest"
-import { ClassList } from "../to_class"
+import type { Merger } from "../merger_interface"
+import type { CreateTailwindest } from "../../create_tailwindest"
+
+import { twMerge } from "tailwind-merge"
 
 describe("Merger interface", () => {
     it("1. tailwind-merge", () => {
@@ -25,25 +25,23 @@ describe("Merger interface", () => {
             ["bg-red-100", "bg-red-200", "p-2"],
             {
                 backgroundColor: "bg-red-300",
+                border: ["border-t-4"],
+            },
+            {
+                border: "border-2",
             }
         )
-        expect(argumentOrderHasPriority).toBe("p-2 bg-red-300")
+        expect(argumentOrderHasPriority).toBe("p-2 bg-red-300 border-2")
+        const style = t.style({
+            backgroundColor: "bg-red-100",
+        })
+
+        expect(style.class("bg-red-200", "p-2")).toBe("bg-red-200 p-2")
     })
     it("2. custom-merger", () => {
-        const customMerger: Merger<ClassList> = (...args) => {
-            const res = args
-                .map((e) => {
-                    if (typeof e === "string") {
-                        return e
-                    }
-                    if (Array.isArray(e)) {
-                        return customMerger(...e)
-                    }
-                    throw new Error("Invalid merging value")
-                })
-                .filter(Boolean)
-                .join(" with ")
-            return res
+        const customMerger: Merger = (...args) => {
+            const uniqueToken = Array.from(new Set(args))
+            return uniqueToken.join(" with ")
         }
 
         const t = createTools<{
@@ -59,11 +57,14 @@ describe("Merger interface", () => {
         const style1 = t.def([["bg-red-100", "bg-red-200"], "p-2"])
         expect(style1).toBe("bg-red-100 with bg-red-200 with p-2")
 
-        const style2 = t.def(["bg-red-100", "bg-red-200", "p-2"], {
-            backgroundColor: "bg-red-300",
-        })
+        const style2 = t.def(
+            ["bg-red-100", "ONCE", "ONCE", "ONCE", "bg-red-200", "p-2"],
+            {
+                backgroundColor: "bg-red-300",
+            }
+        )
         expect(style2).toBe(
-            "bg-red-100 with bg-red-200 with p-2 with bg-red-300"
+            "bg-red-100 with ONCE with bg-red-200 with p-2 with bg-red-300"
         )
     })
 })

packages/tailwindest/src/tools/__tests__/styler.test.ts

@@ -1,11 +1,14 @@
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import { Styler } from "../styler" // Adjust path as needed
-import type { Merger } from "../merger_interface"
+import type { AdditionalClassTokens, Merger } from "../merger_interface"
 
 // Mock implementation of Styler for testing abstract methods
 class TestStyler extends Styler<string, Record<string, unknown>> {
-    public class(key: string, extraClassName?: string): string {
-        return this.merger(key, extraClassName || "")
+    public class(
+        key: string,
+        ...extraClassNames: AdditionalClassTokens<string>
+    ): string {
+        return this.merge(key, ...extraClassNames)
     }
 
     public style(key: string, extraStyle?: Record<string, unknown>): unknown {
@@ -21,7 +24,9 @@ describe("Styler", () => {
     describe("merger", () => {
         it("uses default merger when none set", () => {
             const styler = new TestStyler()
-            expect(styler.merger("a", "b")).toBe("a b")
+            expect(styler.merge("a", "b", ["d e f", "g", "h"], "i")).toBe(
+                "a b d e f g h i"
+            )
         })
 
         it("uses custom merger when set", () => {
@@ -30,7 +35,7 @@ describe("Styler", () => {
                 classes.join("-")
             )
             styler.setMerger(customMerger)
-            expect(styler.merger("a", "b")).toBe("a-b")
+            expect(styler.merge("a", "b")).toBe("a-b")
             expect(customMerger).toHaveBeenCalledWith("a", "b")
         })
     })

packages/tailwindest/src/tools/create_tools.ts

@@ -54,6 +54,7 @@ interface ToolOptions {
  *      tailwindest: Tailwindest
  *      tailwindLiteral: TailwindLiteral
  *      useArbitrary: true  // enable arbitrary strings
+ *      useTypedClassLiteral: true // enable typed class literal
  * >({
  *      merger: twMerge // set tailwind-merge as merger, [optional]
  * })
@@ -66,25 +67,35 @@ export const createTools = <Type extends TailwindestInterface>({
     type ClassLiteral = Type["useArbitrary"] extends true
         ? Type["tailwindLiteral"] | (`${string}` & {})
         : Type["tailwindLiteral"]
+    type StyleLiteral = Type["useTypedClassLiteral"] extends true
+        ? ClassLiteral
+        : string
 
     const style = (stylesheet: StyleType) =>
-        new PrimitiveStyler<StyleType>(stylesheet).setMerger(merger)
+        new PrimitiveStyler<StyleType, StyleLiteral>(stylesheet).setMerger(
+            merger
+        )
 
     const toggle = (toggleVariants: ToggleVariants<StyleType>) =>
-        new ToggleStyler<StyleType>(toggleVariants).setMerger(merger)
+        new ToggleStyler<StyleType, StyleLiteral>(toggleVariants).setMerger(
+            merger
+        )
 
     const rotary = <VRecord extends Record<string, StyleType>>(params: {
         base?: StyleType
         variants: VRecord
     }) =>
-        new RotaryStyler<StyleType, Stringify<keyof VRecord>>(params).setMerger(
-            merger
-        )
+        new RotaryStyler<StyleType, Stringify<keyof VRecord>, StyleLiteral>(
+            params
+        ).setMerger(merger)
 
     const variants = <VMap extends VariantsRecord<StyleType>>(params: {
         base?: StyleType
         variants: VMap
-    }) => new VariantsStyler<StyleType, VMap>(params).setMerger(merger)
+    }) =>
+        new VariantsStyler<StyleType, VMap, StyleLiteral>(params).setMerger(
+            merger
+        )
 
     const mergeRecord = (...overrideRecord: Array<StyleType>): StyleType =>
         overrideRecord.reduce<StyleType>(
@@ -100,8 +111,17 @@ export const createTools = <Type extends TailwindestInterface>({
         return res
     }
 
-    const join = (...classList: ClassList<ClassLiteral>): string =>
-        merger ? toClass(merger(...classList)) : toClass(classList)
+    const join = (...classList: ClassList<ClassLiteral>): string => {
+        const base = toClass(...classList)
+        if (merger) {
+            const tokens = base
+                .split(" ")
+                .filter((e) => e.length > 0)
+                .map((e) => e.trim())
+            return merger(...tokens)
+        }
+        return base
+    }
 
     const def = (
         classList: ClassList<ClassLiteral>,
@@ -111,6 +131,9 @@ export const createTools = <Type extends TailwindestInterface>({
     return {
         /**
          * Define style
+         *
+         * `styleList` has higher priority than `classList`
+         *
          * @see {@link https://github.com/lukeed/clsx#readme clsx}
          * @param classList join target styles
          * @param styleList define styles in a record structure way

packages/tailwindest/src/tools/get_variants.ts

@@ -3,8 +3,8 @@ import type { Styler } from "./styler"
 /**
  * Get variants
  */
-export type GetVariants<StylerInstance extends Styler<any, any>> =
-    StylerInstance extends Styler<infer Arg, any>
+export type GetVariants<StylerInstance extends Styler<any, any, any>> =
+    StylerInstance extends Styler<infer Arg, any, any>
         ? Arg extends never
             ? never
             : Exclude<Parameters<StylerInstance["class"]>[0], "base">

packages/tailwindest/src/tools/merger_interface.ts

@@ -1,7 +1,14 @@
+/**
+ * @interface
+ * Additional class tokens that can be merged into a single className string.
+ */
+export type AdditionalClassTokens<Literal extends string> = Array<
+    Literal | Array<Literal>
+>
 /**
  * @interface
  * Merge arbitrary class list into one valid style classname string
  */
-export type Merger<ClassList extends Array<any> = any[]> = (
-    ...classList: ClassList
+export type Merger<Literal extends string = string> = (
+    ...classList: AdditionalClassTokens<Literal>
 ) => string

packages/tailwindest/src/tools/primitive.ts

@@ -1,6 +1,10 @@
+import type { AdditionalClassTokens } from "./merger_interface"
 import { Styler } from "./styler"
 
-export class PrimitiveStyler<StyleType> extends Styler<never, StyleType> {
+export class PrimitiveStyler<
+    StyleType,
+    StyleLiteral extends string = string,
+> extends Styler<never, StyleType, StyleLiteral> {
     private _class: string
     private _style: StyleType
 
@@ -14,20 +18,22 @@ export class PrimitiveStyler<StyleType> extends Styler<never, StyleType> {
      * Get classname
      * @param extraClassName extra classnames, if merger is provided it uses merger or just concat.
      */
-    public class(extraClassName?: string): string {
+    public class(
+        ...extraClassList: AdditionalClassTokens<StyleLiteral>
+    ): string {
         const inquired = this._class
-        if (!extraClassName) return inquired
-        return this.merger(inquired, extraClassName)
+        if (extraClassList.length === 0) return inquired
+        return this.merge(inquired as StyleLiteral, ...extraClassList)
     }
 
     /**
      * Get stylesheet
      * @param extraStyle extra stylesheet
      */
-    public style(extraStyle?: StyleType): StyleType {
+    public style(...extraStyles: Array<StyleType>): StyleType {
         const inquired = this._style
-        if (!extraStyle) return inquired
-        return Styler.deepMerge(inquired, extraStyle)
+        if (extraStyles.length === 0) return inquired
+        return Styler.deepMerge(inquired, ...extraStyles)
     }
 
     public compose(...styles: Array<StyleType>): PrimitiveStyler<StyleType> {