diff --git a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap index 466cadc..793d259 100644 --- a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap +++ b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = ` - + + A @@ -25,9 +23,7 @@ exports[`Border - Divide Color divide-amber-50 1`] = ` `; exports[`Border - Divide Color divide-black 1`] = ` - + A @@ -49,9 +45,7 @@ exports[`Border - Divide Color divide-black 1`] = ` `; exports[`Border - Divide Color divide-blue-50 1`] = ` - + A @@ -73,9 +67,7 @@ exports[`Border - Divide Color divide-blue-50 1`] = ` `; exports[`Border - Divide Color divide-cyan-50 1`] = ` - + A @@ -97,9 +89,7 @@ exports[`Border - Divide Color divide-cyan-50 1`] = ` `; exports[`Border - Divide Color divide-emerald-50 1`] = ` - + A @@ -121,9 +111,7 @@ exports[`Border - Divide Color divide-emerald-50 1`] = ` `; exports[`Border - Divide Color divide-fuchsia-50 1`] = ` - + A @@ -145,9 +133,7 @@ exports[`Border - Divide Color divide-fuchsia-50 1`] = ` `; exports[`Border - Divide Color divide-gray-50 1`] = ` - + A @@ -169,9 +155,7 @@ exports[`Border - Divide Color divide-gray-50 1`] = ` `; exports[`Border - Divide Color divide-green-50 1`] = ` - + A @@ -193,9 +177,7 @@ exports[`Border - Divide Color divide-green-50 1`] = ` `; exports[`Border - Divide Color divide-indigo-50 1`] = ` - + A @@ -217,9 +199,7 @@ exports[`Border - Divide Color divide-indigo-50 1`] = ` `; exports[`Border - Divide Color divide-lime-50 1`] = ` - + A @@ -241,9 +221,7 @@ exports[`Border - Divide Color divide-lime-50 1`] = ` `; exports[`Border - Divide Color divide-neutral-50 1`] = ` - + A @@ -265,9 +243,7 @@ exports[`Border - Divide Color divide-neutral-50 1`] = ` `; exports[`Border - Divide Color divide-orange-50 1`] = ` - + A @@ -289,9 +265,7 @@ exports[`Border - Divide Color divide-orange-50 1`] = ` `; exports[`Border - Divide Color divide-pink-50 1`] = ` - + A @@ -313,9 +287,7 @@ exports[`Border - Divide Color divide-pink-50 1`] = ` `; exports[`Border - Divide Color divide-purple-50 1`] = ` - + A @@ -337,9 +309,7 @@ exports[`Border - Divide Color divide-purple-50 1`] = ` `; exports[`Border - Divide Color divide-red-50 1`] = ` - + A @@ -361,9 +331,7 @@ exports[`Border - Divide Color divide-red-50 1`] = ` `; exports[`Border - Divide Color divide-rose-50 1`] = ` - + A @@ -385,9 +353,7 @@ exports[`Border - Divide Color divide-rose-50 1`] = ` `; exports[`Border - Divide Color divide-sky-50 1`] = ` - + A @@ -409,9 +375,7 @@ exports[`Border - Divide Color divide-sky-50 1`] = ` `; exports[`Border - Divide Color divide-slate-50 1`] = ` - + A @@ -433,9 +397,7 @@ exports[`Border - Divide Color divide-slate-50 1`] = ` `; exports[`Border - Divide Color divide-stone-50 1`] = ` - + A @@ -457,9 +419,7 @@ exports[`Border - Divide Color divide-stone-50 1`] = ` `; exports[`Border - Divide Color divide-teal-50 1`] = ` - + A @@ -481,9 +441,7 @@ exports[`Border - Divide Color divide-teal-50 1`] = ` `; exports[`Border - Divide Color divide-transparent 1`] = ` - + A @@ -505,9 +463,7 @@ exports[`Border - Divide Color divide-transparent 1`] = ` `; exports[`Border - Divide Color divide-violet-50 1`] = ` - + A @@ -529,9 +485,7 @@ exports[`Border - Divide Color divide-violet-50 1`] = ` `; exports[`Border - Divide Color divide-white 1`] = ` - + A @@ -553,9 +507,7 @@ exports[`Border - Divide Color divide-white 1`] = ` `; exports[`Border - Divide Color divide-yellow-50 1`] = ` - + A @@ -577,9 +529,7 @@ exports[`Border - Divide Color divide-yellow-50 1`] = ` `; exports[`Border - Divide Color divide-zinc-50 1`] = ` - + A diff --git a/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap index 9e03bbe..757ba8b 100644 --- a/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap +++ b/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Border - Divide Style divide-dashed 1`] = ` - + A @@ -22,9 +20,7 @@ exports[`Border - Divide Style divide-dashed 1`] = ` `; exports[`Border - Divide Style divide-dotted 1`] = ` - + A @@ -43,9 +39,7 @@ exports[`Border - Divide Style divide-dotted 1`] = ` `; exports[`Border - Divide Style divide-solid 1`] = ` - + A diff --git a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap index 13c00bd..e7f4cec 100644 --- a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap +++ b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Border - Divide Width divide-x 1`] = ` - + A @@ -23,9 +21,7 @@ exports[`Border - Divide Width divide-x 1`] = ` `; exports[`Border - Divide Width divide-x-0 1`] = ` - + A @@ -45,9 +41,7 @@ exports[`Border - Divide Width divide-x-0 1`] = ` `; exports[`Border - Divide Width divide-x-2 1`] = ` - + A @@ -67,9 +61,7 @@ exports[`Border - Divide Width divide-x-2 1`] = ` `; exports[`Border - Divide Width divide-x-4 1`] = ` - + A @@ -89,9 +81,7 @@ exports[`Border - Divide Width divide-x-4 1`] = ` `; exports[`Border - Divide Width divide-x-8 1`] = ` - + A @@ -111,9 +101,7 @@ exports[`Border - Divide Width divide-x-8 1`] = ` `; exports[`Border - Divide Width divide-y 1`] = ` - + A @@ -133,9 +121,7 @@ exports[`Border - Divide Width divide-y 1`] = ` `; exports[`Border - Divide Width divide-y-0 1`] = ` - + A @@ -155,9 +141,7 @@ exports[`Border - Divide Width divide-y-0 1`] = ` `; exports[`Border - Divide Width divide-y-2 1`] = ` - + A @@ -177,9 +161,7 @@ exports[`Border - Divide Width divide-y-2 1`] = ` `; exports[`Border - Divide Width divide-y-4 1`] = ` - + A @@ -199,9 +181,7 @@ exports[`Border - Divide Width divide-y-4 1`] = ` `; exports[`Border - Divide Width divide-y-8 1`] = ` - + A diff --git a/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap b/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap index c38ede2..79bbd62 100644 --- a/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap +++ b/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Border - Divide Width space-x-0 1`] = ` - + A @@ -22,9 +20,7 @@ exports[`Border - Divide Width space-x-0 1`] = ` `; exports[`Border - Divide Width space-x-0.5 1`] = ` - + A @@ -43,9 +39,7 @@ exports[`Border - Divide Width space-x-0.5 1`] = ` `; exports[`Border - Divide Width space-x-1 1`] = ` - + A @@ -64,9 +58,7 @@ exports[`Border - Divide Width space-x-1 1`] = ` `; exports[`Border - Divide Width space-x-1.5 1`] = ` - + A @@ -85,9 +77,7 @@ exports[`Border - Divide Width space-x-1.5 1`] = ` `; exports[`Border - Divide Width space-x-96 1`] = ` - + A @@ -106,9 +96,7 @@ exports[`Border - Divide Width space-x-96 1`] = ` `; exports[`Border - Divide Width space-x-px 1`] = ` - + A @@ -127,9 +115,7 @@ exports[`Border - Divide Width space-x-px 1`] = ` `; exports[`Border - Divide Width space-y-0 1`] = ` - + A @@ -148,9 +134,7 @@ exports[`Border - Divide Width space-y-0 1`] = ` `; exports[`Border - Divide Width space-y-0.5 1`] = ` - + A @@ -169,9 +153,7 @@ exports[`Border - Divide Width space-y-0.5 1`] = ` `; exports[`Border - Divide Width space-y-1 1`] = ` - + A @@ -190,9 +172,7 @@ exports[`Border - Divide Width space-y-1 1`] = ` `; exports[`Border - Divide Width space-y-1.5 1`] = ` - + A @@ -211,9 +191,7 @@ exports[`Border - Divide Width space-y-1.5 1`] = ` `; exports[`Border - Divide Width space-y-96 1`] = ` - + A @@ -232,9 +210,7 @@ exports[`Border - Divide Width space-y-96 1`] = ` `; exports[`Border - Divide Width space-y-px 1`] = ` - + A diff --git a/src/styled.tsx b/src/styled.tsx index b9688a2..4d544bd 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -35,7 +35,10 @@ export function styled

( children: componentChildren, ...props }: StyledProps

) { - const { hover, focus, active, ...handlers } = useInteraction(props); + const { hover, focus, active, ...handlers } = useInteraction({ + className, + ...props, + }); const classes = tw ?? className ?? ""; @@ -48,7 +51,9 @@ export function styled

( const style = styleProperty ? [tailwindStyles, styleProperty] - : tailwindStyles; + : Array.isArray(tailwindStyles) && tailwindStyles.length > 0 + ? tailwindStyles + : undefined; let children = isFragment(componentChildren) ? // This probably needs to be recursive