From a0bdaf3c7ef0a94b2886cb84aa6943827a9388e9 Mon Sep 17 00:00:00 2001 From: Giuliano Crivelli Date: Tue, 19 Mar 2024 23:16:56 -0400 Subject: [PATCH] fix: testing all possible usages of classes with array and string --- src/__tests__/tv.test.ts | 371 +++++++++++++++++++++++++-------------- 1 file changed, 235 insertions(+), 136 deletions(-) diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts index 6c0fdc2..200f232 100644 --- a/src/__tests__/tv.test.ts +++ b/src/__tests__/tv.test.ts @@ -1,6 +1,6 @@ -import {expect, describe, test} from "@jest/globals"; +import { expect, describe, test } from "@jest/globals"; -import {tv, cn} from "../index"; +import { tv, cn } from "../index"; const COMMON_UNITS = ["small", "medium", "large"]; @@ -13,8 +13,8 @@ const twMergeConfig = { borderRadius: COMMON_UNITS, }, classGroups: { - shadow: [{shadow: COMMON_UNITS}], - "font-size": [{text: ["tiny", ...COMMON_UNITS]}], + shadow: [{ shadow: COMMON_UNITS }], + "font-size": [{ text: ["tiny", ...COMMON_UNITS] }], "bg-image": ["bg-stripe-gradient"], "min-w": [ { @@ -53,7 +53,7 @@ describe("Tailwind Variants (TV) - Default", () => { }, }); - const {base, item} = menu({color: "primary"}); + const { base, item } = menu({ color: "primary" }); expect(base()).toHaveClass(["base--styles-1", "base--styles-2", "base--styles-3"]); expect(item()).toHaveClass([ @@ -64,12 +64,12 @@ describe("Tailwind Variants (TV) - Default", () => { "item--color--primary-2", "item--color--primary-3", ]); - expect(popover({isOpen: true})).toHaveClass([ + expect(popover({ isOpen: true })).toHaveClass([ "isOpen--true-1", "isOpen--true-2", "isOpen--true-3", ]); - expect(popover({isOpen: false})).toHaveClass([ + expect(popover({ isOpen: false })).toHaveClass([ "isOpen--false-1", "isOpen--false-2", "isOpen--false-3", @@ -291,7 +291,7 @@ describe("Tailwind Variants (TV) - Default", () => { "button--secondary-small", ]; - expect(button({variant: "secondary", size: "small", isDisabled: false})).toHaveClass( + expect(button({ variant: "secondary", size: "small", isDisabled: false })).toHaveClass( expectedResult, ); }); @@ -314,7 +314,7 @@ describe("Tailwind Variants (TV) - Default", () => { const expectedResult = "text-3xl font-bold text-green-500 no-underline"; - expect(h1({color: "green", isUnderline: false})).toBe(expectedResult); + expect(h1({ color: "green", isUnderline: false })).toBe(expectedResult); }); test("should support boolean variants", () => { @@ -329,9 +329,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "truncate"]); }); test("should support false only variant", () => { @@ -345,9 +345,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: true})).toHaveClass(["text-3xl"]); - expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "truncate"]); }); test("should support false only variant -- default variant", () => { @@ -364,9 +364,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl"]); - expect(h1({bool: true})).toHaveClass(["text-3xl"]); - expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl"]); }); test("should support boolean variants -- default variants", () => { @@ -384,9 +384,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "underline"]); }); test("should support boolean variants -- missing false variant", () => { @@ -400,9 +400,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl"]); - expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: false})).toHaveClass(["text-3xl"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl"]); }); test("should support boolean variants -- missing false variant -- default variants", () => { @@ -419,9 +419,9 @@ describe("Tailwind Variants (TV) - Default", () => { }); expect(h1()).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]); - expect(h1({bool: false})).toHaveClass(["text-3xl"]); - expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]); + expect(h1({ bool: false })).toHaveClass(["text-3xl"]); + expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "underline"]); }); }); @@ -469,7 +469,7 @@ describe("Tailwind Variants (TV) - Slots", () => { }); // with default values - const {base, title, item, list, wrapper} = menu(); + const { base, title, item, list, wrapper } = menu(); expect(base()).toHaveClass([ "text-3xl", @@ -494,7 +494,7 @@ describe("Tailwind Variants (TV) - Slots", () => { }, }); - const {base, title, item, list} = menu(); + const { base, title, item, list } = menu(); const expectedResult = undefined; @@ -553,30 +553,30 @@ describe("Tailwind Variants (TV) - Slots", () => { }); // with default values - const {base, title, item, list, wrapper} = menu(); + const { base, title, item, list, wrapper } = menu(); // base - expect(base({class: "text-lg"})).toHaveClass([ + expect(base({ class: "text-lg" })).toHaveClass([ "font-bold", "underline", "bg-blue-500", "text-lg", ]); - expect(base({className: "text-lg"})).toHaveClass([ + expect(base({ className: "text-lg" })).toHaveClass([ "font-bold", "underline", "bg-blue-500", "text-lg", ]); // title - expect(title({class: "text-2xl"})).toHaveClass(["text-2xl"]); - expect(title({className: "text-2xl"})).toHaveClass(["text-2xl"]); + expect(title({ class: "text-2xl" })).toHaveClass(["text-2xl"]); + expect(title({ className: "text-2xl" })).toHaveClass(["text-2xl"]); // item - expect(item({class: "text-sm"})).toHaveClass(["text-sm", "opacity-100"]); - expect(list({className: "bg-blue-50"})).toHaveClass(["list-none", "bg-blue-50"]); + expect(item({ class: "text-sm" })).toHaveClass(["text-sm", "opacity-100"]); + expect(list({ className: "bg-blue-50" })).toHaveClass(["list-none", "bg-blue-50"]); // list - expect(wrapper({class: "flex-row"})).toHaveClass(["flex", "flex-row"]); - expect(wrapper({className: "flex-row"})).toHaveClass(["flex", "flex-row"]); + expect(wrapper({ class: "flex-row" })).toHaveClass(["flex", "flex-row"]); + expect(wrapper({ className: "flex-row" })).toHaveClass(["flex", "flex-row"]); }); test("should work with slots -- custom variants", () => { @@ -623,7 +623,7 @@ describe("Tailwind Variants (TV) - Slots", () => { }); // with custom props - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: "secondary", size: "md", }); @@ -685,34 +685,34 @@ describe("Tailwind Variants (TV) - Slots", () => { }); // with default values - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: "secondary", size: "md", }); // base - expect(base({class: "text-xl"})).toHaveClass(["text-xl", "font-bold", "underline"]); - expect(base({className: "text-xl"})).toHaveClass(["text-xl", "font-bold", "underline"]); + expect(base({ class: "text-xl" })).toHaveClass(["text-xl", "font-bold", "underline"]); + expect(base({ className: "text-xl" })).toHaveClass(["text-xl", "font-bold", "underline"]); // title - expect(title({class: "text-2xl"})).toHaveClass(["text-2xl", "text-white"]); - expect(title({className: "text-2xl"})).toHaveClass(["text-2xl", "text-white"]); + expect(title({ class: "text-2xl" })).toHaveClass(["text-2xl", "text-white"]); + expect(title({ className: "text-2xl" })).toHaveClass(["text-2xl", "text-white"]); //item - expect(item({class: "bg-purple-50"})).toHaveClass(["text-xl", "bg-purple-50", "opacity-100"]); - expect(item({className: "bg-purple-50"})).toHaveClass([ + expect(item({ class: "bg-purple-50" })).toHaveClass(["text-xl", "bg-purple-50", "opacity-100"]); + expect(item({ className: "bg-purple-50" })).toHaveClass([ "text-xl", "bg-purple-50", "opacity-100", ]); // list - expect(list({class: "bg-purple-100"})).toHaveClass(["list-none", "bg-purple-100"]); - expect(list({className: "bg-purple-100"})).toHaveClass(["list-none", "bg-purple-100"]); + expect(list({ class: "bg-purple-100" })).toHaveClass(["list-none", "bg-purple-100"]); + expect(list({ className: "bg-purple-100" })).toHaveClass(["list-none", "bg-purple-100"]); // wrapper - expect(wrapper({class: "bg-purple-900 flex-row"})).toHaveClass([ + expect(wrapper({ class: "bg-purple-900 flex-row" })).toHaveClass([ "flex", "bg-purple-900", "flex-row", ]); - expect(wrapper({className: "bg-purple-900 flex-row"})).toHaveClass([ + expect(wrapper({ className: "bg-purple-900 flex-row" })).toHaveClass([ "flex", "bg-purple-900", "flex-row", @@ -776,7 +776,7 @@ describe("Tailwind Variants (TV) - Slots", () => { ], }); - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: "secondary", size: "md", }); @@ -832,12 +832,12 @@ describe("Tailwind Variants (TV) - Slots", () => { }, }); - const {base, title} = menu(); + const { base, title } = menu(); expect(base()).toHaveClass(["text-3xl", "color--primary-base"]); expect(title()).toHaveClass(["text-2xl", "color--primary-title"]); - expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]); - expect(title({color: "secondary"})).toHaveClass(["text-2xl", "color--secondary-title"]); + expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]); + expect(title({ color: "secondary" })).toHaveClass(["text-2xl", "color--secondary-title"]); }); test("should support slot level variant overrides - compoundSlots", () => { @@ -873,18 +873,18 @@ describe("Tailwind Variants (TV) - Slots", () => { }, }); - const {base, title, subtitle} = menu(); + const { base, title, subtitle } = menu(); expect(base()).toHaveClass(["text-3xl", "color--primary-base"]); expect(title()).toHaveClass(["text-2xl", "color--primary-title"]); expect(subtitle()).toHaveClass(["text-xl", "color--primary-subtitle"]); - expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]); - expect(title({color: "secondary"})).toHaveClass([ + expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]); + expect(title({ color: "secondary" })).toHaveClass([ "text-2xl", "color--secondary-title", "truncate", ]); - expect(subtitle({color: "secondary"})).toHaveClass([ + expect(subtitle({ color: "secondary" })).toHaveClass([ "text-xl", "color--secondary-subtitle", "truncate", @@ -912,11 +912,11 @@ describe("Tailwind Variants (TV) - Slots", () => { ], }); - const {base, cursor} = menu(); + const { base, cursor } = menu(); expect(base()).toEqual("flex flex-wrap"); - expect(base({size: "xs"})).toEqual("flex flex-wrap w-7 h-7 text-xs"); - expect(base({size: "sm"})).toEqual("flex flex-wrap w-7 h-7 text-xs"); + expect(base({ size: "xs" })).toEqual("flex flex-wrap w-7 h-7 text-xs"); + expect(base({ size: "sm" })).toEqual("flex flex-wrap w-7 h-7 text-xs"); expect(cursor()).toEqual("absolute flex overflow-visible"); }); @@ -1004,7 +1004,7 @@ describe("Tailwind Variants (TV) - Slots", () => { ], }); - const {tab, tabList, cursor} = tabs(); + const { tab, tabList, cursor } = tabs(); expect(tab()).toHaveClass([ "z-0", @@ -1106,7 +1106,7 @@ describe("Tailwind Variants (TV) - Slots", () => { ], }); - const {tab, tabList, cursor} = tabs({variant: "underlined"}); + const { tab, tabList, cursor } = tabs({ variant: "underlined" }); expect(tab()).toHaveClass([ "z-0", @@ -1155,12 +1155,12 @@ describe("Tailwind Variants (TV) - Slots", () => { }, }); - const {base, title} = menu(); + const { base, title } = menu(); expect(base()).toHaveClass(["text-3xl", "color--primary-base"]); expect(title()).toHaveClass(["text-2xl", "color--primary-title"]); - expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]); - expect(title({color: "secondary"})).toHaveClass([ + expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]); + expect(title({ color: "secondary" })).toHaveClass([ "text-2xl", "color--secondary-title", "truncate", @@ -1186,7 +1186,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { ], }); // with default values - const {base, item, prev, next, cursor} = pagination(); + const { base, item, prev, next, cursor } = pagination(); expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]); expect(item()).toHaveClass(["flex", "flex-wrap", "truncate"]); @@ -1229,7 +1229,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { }, }); // with default values - const {base, item, prev, next, cursor} = pagination(); + const { base, item, prev, next, cursor } = pagination(); expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]); expect(item()).toHaveClass(["flex", "flex-wrap", "truncate", "w-7", "h-7", "text-xs"]); @@ -1272,7 +1272,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { }, }); // with default values - const {base, item, prev, next, cursor} = pagination({ + const { base, item, prev, next, cursor } = pagination({ size: "xs", }); @@ -1308,13 +1308,13 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { ], }); - let styles = nav({isActive: false}); + let styles = nav({ isActive: false }); expect(styles.base()).toHaveClass(["base"]); expect(styles.toggle()).toHaveClass(["slot--toggle", "compound--item-toggle"]); expect(styles.item()).toHaveClass(["slot--item", "compound--item-toggle"]); - styles = nav({isActive: true}); + styles = nav({ isActive: true }); expect(styles.base()).toHaveClass(["base"]); expect(styles.toggle()).toHaveClass([ @@ -1374,7 +1374,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { }, }); // with default values - const {base, item, prev, next, cursor} = pagination(); + const { base, item, prev, next, cursor } = pagination(); expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]); expect(item()).toHaveClass(["flex", "flex-wrap", "truncate", "w-7", "h-7", "text-xs"]); @@ -1428,7 +1428,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => { }, }); // with default values - const {base, item, prev, next, cursor} = pagination({ + const { base, item, prev, next, cursor } = pagination({ size: "xs", color: "primary", isBig: true, @@ -1837,7 +1837,7 @@ describe("Tailwind Variants (TV) - Screen Variants", () => { }, ); - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: { initial: "primary", sm: "secondary", @@ -2093,48 +2093,6 @@ describe("Tailwind Variants (TV) - Extends", () => { expect(result).toHaveClass(expectedResult); }); - test("should override the extended classes with variants, both using array", () => { - const p = tv({ - base: "text-base text-green-500", - variants: { - isBig: { - true: "text-5xl", - false: "text-2xl", - }, - color: { - red: ["text-red-500 bg-red-100", "tracking-normal"], - blue: "text-blue-500", - }, - }, - }); - - const h1 = tv({ - extend: p, - base: "text-3xl font-bold", - variants: { - color: { - red: ["text-red-200", "bg-red-200"], - green: "text-green-500", - }, - }, - }); - - const result = h1({ - isBig: true, - color: "red", - }); - - const expectedResult = [ - "font-bold", - "text-red-200", - "bg-red-200", - "tracking-normal", - "text-5xl", - ]; - - expect(result).toHaveClass(expectedResult); - }); - test("should include the extended classes with defaultVariants - parent", () => { const p = tv({ base: "text-base text-green-500", @@ -2362,7 +2320,7 @@ describe("Tailwind Variants (TV) - Extends", () => { { isBig: true, color: "red", - class: ["bg-red-500"], + class: "bg-red-500", }, ], }); @@ -2380,7 +2338,7 @@ describe("Tailwind Variants (TV) - Extends", () => { { isBig: true, color: "red", - class: ["bg-red-600"], + class: "bg-red-600", }, ], }); @@ -2392,6 +2350,147 @@ describe("Tailwind Variants (TV) - Extends", () => { expect(result).toHaveClass(expectedResult); }); + test.only("should override the extended classes with variants and compoundVariants, using array", () => { + const p = tv({ + base: "text-base text-green-500", + variants: { + isBig: { + true: "text-5xl", + false: ["text-2xl"], + }, + color: { + red: ["text-red-500 bg-red-100", "tracking-normal"], + blue: "text-blue-500", + }, + }, + defaultVariants: { + isBig: true, + color: "red", + }, + compoundVariants: [ + { + isBig: true, + color: "red", + class: "bg-red-500", + }, + { + isBig: false, + color: "red", + class: ["bg-red-500"], + }, + { + isBig: true, + color: "blue", + class: ["bg-blue-500"], + }, + { + isBig: false, + color: "blue", + class: "bg-blue-500", + }, + ], + }); + + const h1 = tv({ + extend: p, + base: "text-3xl font-bold", + variants: { + isBig: { + true: "text-7xl", + false: "text-3xl", + }, + color: { + red: ["text-red-200", "bg-red-200"], + green: ["text-green-500"], + }, + }, + compoundVariants: [ + { + isBig: true, + color: "red", + class: "bg-red-600", + }, + { + isBig: false, + color: "red", + class: "bg-red-600", + }, + { + isBig: true, + color: "blue", + class: ["bg-blue-600"], + }, + { + isBig: false, + color: "blue", + class: ["bg-blue-600"], + }, + ], + }); + + const variantAndCompoundString = h1({ + isBig: true, + color: "red", + }); + + const expectedVariantAndCompoundStringResult = [ + "font-bold", + "text-red-200", + "bg-red-600", + "tracking-normal", + "text-7xl", + ]; + + expect(variantAndCompoundString).toHaveClass(expectedVariantAndCompoundStringResult); + + const variantAndCompoundStringAndArray = h1({ + isBig: false, + color: "red", + }); + + const expectedVariantAndCompoundStringAndArrayResult = [ + "font-bold", + "text-red-200", + "bg-red-600", + "tracking-normal", + "text-3xl", + ]; + + expect(variantAndCompoundStringAndArray).toHaveClass( + expectedVariantAndCompoundStringAndArrayResult, + ); + + const variantAndCompoundArray = h1({ + isBig: true, + color: "blue", + }); + + const expectedVariantAndCompoundArrayResult = [ + "font-bold", + "text-blue-500", + "bg-blue-600", + "text-7xl", + ]; + + expect(variantAndCompoundArray).toHaveClass(expectedVariantAndCompoundArrayResult); + + const variantAndCompoundArrayToString = h1({ + isBig: false, + color: "blue", + }); + + const expectedVariantAndCompoundArrayToStringResult = [ + "font-bold", + "text-blue-500", + "bg-blue-600", + "text-3xl", + ]; + + expect(variantAndCompoundArrayToString).toHaveClass( + expectedVariantAndCompoundArrayToStringResult, + ); + }); + test("should include the extended classes with screenVariants single values", () => { const p = tv({ base: "text-base text-green-500", @@ -2521,7 +2620,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper} = menu(); + const { base, title, item, list, wrapper } = menu(); expect(base()).toHaveClass(["base--menuBase", "base--menu"]); expect(title()).toHaveClass(["title--menuBase"]); @@ -2557,7 +2656,7 @@ describe("Tailwind Variants (TV) - Extends", () => { base: "base--menu", }); - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ isBig: true, }); @@ -2595,7 +2694,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }, }); - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ isBig: true, }); @@ -2670,7 +2769,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper, extra} = menu(); + const { base, title, item, list, wrapper, extra } = menu(); expect(base()).toHaveClass(["base--menuBase", "base--menu"]); expect(title()).toHaveClass(["title--menuBase", "title--menu"]); @@ -2716,7 +2815,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper} = menu(); + const { base, title, item, list, wrapper } = menu(); expect(base()).toHaveClass(["base--menuBase", "base--menu"]); expect(title()).toHaveClass(["title--menuBase", "title--menu", "isBig--title--menuBase"]); @@ -2765,7 +2864,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper} = menu(); + const { base, title, item, list, wrapper } = menu(); expect(base()).toHaveClass(["base--menuBase", "base--menu"]); expect(title()).toHaveClass(["title--menuBase", "title--menu", "isBig--title--menuBase"]); @@ -2841,7 +2940,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: "red", }); @@ -2939,7 +3038,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); // with default values - const {base, title, item, list, wrapper} = menu({ + const { base, title, item, list, wrapper } = menu({ color: "red", }); @@ -2978,10 +3077,10 @@ describe("Tailwind Variants (TV) - Extends", () => { const tvResult = ["w-fit", "h-fit"]; const custom = ["w-full"]; - const resultWithoutMerge = cn(tvResult.concat(custom))({twMerge: false}); - const resultWithMerge = cn(tvResult.concat(custom))({twMerge: true}); - const emptyResultWithoutMerge = cn([].concat([]))({twMerge: false}); - const emptyResultWithMerge = cn([].concat([]))({twMerge: true}); + const resultWithoutMerge = cn(tvResult.concat(custom))({ twMerge: false }); + const resultWithMerge = cn(tvResult.concat(custom))({ twMerge: true }); + const emptyResultWithoutMerge = cn([].concat([]))({ twMerge: false }); + const emptyResultWithMerge = cn([].concat([]))({ twMerge: true }); expect(resultWithoutMerge).toBe("w-fit h-fit w-full"); expect(resultWithMerge).toBe("h-fit w-full"); @@ -2990,7 +3089,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }); test("should support parent w/slots when base does not have slots", () => { - const menuBase = tv({base: "menuBase"}); + const menuBase = tv({ base: "menuBase" }); const menu = tv({ extend: menuBase, base: "menu", @@ -2999,7 +3098,7 @@ describe("Tailwind Variants (TV) - Extends", () => { }, }); - const {base, title} = menu(); + const { base, title } = menu(); expect(base()).toHaveClass(["menuBase", "menu"]); expect(title()).toHaveClass(["title"]); @@ -3029,8 +3128,8 @@ describe("Tailwind Variants (TV) - Extends", () => { }, }); - const appButton = tv({extend: themeButton}); - const button = tv({extend: appButton}); + const appButton = tv({ extend: themeButton }); + const button = tv({ extend: appButton }); expect(appButton()).toHaveClass("font-medium text-blue-500 opacity-50 bg-black"); expect(button()).toHaveClass("font-medium text-blue-500 opacity-50 bg-black"); @@ -3110,8 +3209,8 @@ describe("Tailwind Variants (TV) - Tailwind Merge", () => { borderRadius: COMMON_UNITS, }, classGroups: { - shadow: [{shadow: COMMON_UNITS}], - "font-size": [{text: ["tiny", ...COMMON_UNITS]}], + shadow: [{ shadow: COMMON_UNITS }], + "font-size": [{ text: ["tiny", ...COMMON_UNITS] }], "bg-image": ["bg-stripe-gradient"], "min-w": [ {