kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-11 08:03:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent adding empty style arrays to parents

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-18 15:29:20 +10:00
parent 7df8e2e981
commit 61780d2aff
6 changed files with 58 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
View File

@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
<View
style={Array []}
>
<View>
<Text
style={
Array [

100
__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap
View File

@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Border - Divide Color divide-amber-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -25,9 +23,7 @@ exports[`Border - Divide Color divide-amber-50 1`] = `
`;
exports[`Border - Divide Color divide-black 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -49,9 +45,7 @@ exports[`Border - Divide Color divide-black 1`] = `
`;
exports[`Border - Divide Color divide-blue-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -73,9 +67,7 @@ exports[`Border - Divide Color divide-blue-50 1`] = `
`;
exports[`Border - Divide Color divide-cyan-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -97,9 +89,7 @@ exports[`Border - Divide Color divide-cyan-50 1`] = `
`;
exports[`Border - Divide Color divide-emerald-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -121,9 +111,7 @@ exports[`Border - Divide Color divide-emerald-50 1`] = `
`;
exports[`Border - Divide Color divide-fuchsia-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -145,9 +133,7 @@ exports[`Border - Divide Color divide-fuchsia-50 1`] = `
`;
exports[`Border - Divide Color divide-gray-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -169,9 +155,7 @@ exports[`Border - Divide Color divide-gray-50 1`] = `
`;
exports[`Border - Divide Color divide-green-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -193,9 +177,7 @@ exports[`Border - Divide Color divide-green-50 1`] = `
`;
exports[`Border - Divide Color divide-indigo-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -217,9 +199,7 @@ exports[`Border - Divide Color divide-indigo-50 1`] = `
`;
exports[`Border - Divide Color divide-lime-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -241,9 +221,7 @@ exports[`Border - Divide Color divide-lime-50 1`] = `
`;
exports[`Border - Divide Color divide-neutral-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -265,9 +243,7 @@ exports[`Border - Divide Color divide-neutral-50 1`] = `
`;
exports[`Border - Divide Color divide-orange-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -289,9 +265,7 @@ exports[`Border - Divide Color divide-orange-50 1`] = `
`;
exports[`Border - Divide Color divide-pink-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -313,9 +287,7 @@ exports[`Border - Divide Color divide-pink-50 1`] = `
`;
exports[`Border - Divide Color divide-purple-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -337,9 +309,7 @@ exports[`Border - Divide Color divide-purple-50 1`] = `
`;
exports[`Border - Divide Color divide-red-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -361,9 +331,7 @@ exports[`Border - Divide Color divide-red-50 1`] = `
`;
exports[`Border - Divide Color divide-rose-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -385,9 +353,7 @@ exports[`Border - Divide Color divide-rose-50 1`] = `
`;
exports[`Border - Divide Color divide-sky-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -409,9 +375,7 @@ exports[`Border - Divide Color divide-sky-50 1`] = `
`;
exports[`Border - Divide Color divide-slate-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -433,9 +397,7 @@ exports[`Border - Divide Color divide-slate-50 1`] = `
`;
exports[`Border - Divide Color divide-stone-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -457,9 +419,7 @@ exports[`Border - Divide Color divide-stone-50 1`] = `
`;
exports[`Border - Divide Color divide-teal-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -481,9 +441,7 @@ exports[`Border - Divide Color divide-teal-50 1`] = `
`;
exports[`Border - Divide Color divide-transparent 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -505,9 +463,7 @@ exports[`Border - Divide Color divide-transparent 1`] = `
`;
exports[`Border - Divide Color divide-violet-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -529,9 +485,7 @@ exports[`Border - Divide Color divide-violet-50 1`] = `
`;
exports[`Border - Divide Color divide-white 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -553,9 +507,7 @@ exports[`Border - Divide Color divide-white 1`] = `
`;
exports[`Border - Divide Color divide-yellow-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -577,9 +529,7 @@ exports[`Border - Divide Color divide-yellow-50 1`] = `
`;
exports[`Border - Divide Color divide-zinc-50 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>

12
__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap
View File

@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Border - Divide Style divide-dashed 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -22,9 +20,7 @@ exports[`Border - Divide Style divide-dashed 1`] = `
`;
exports[`Border - Divide Style divide-dotted 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -43,9 +39,7 @@ exports[`Border - Divide Style divide-dotted 1`] = `
`;
exports[`Border - Divide Style divide-solid 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>

40
__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap
View File

@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Border - Divide Width divide-x 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -23,9 +21,7 @@ exports[`Border - Divide Width divide-x 1`] = `
`;
exports[`Border - Divide Width divide-x-0 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -45,9 +41,7 @@ exports[`Border - Divide Width divide-x-0 1`] = `
`;
exports[`Border - Divide Width divide-x-2 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -67,9 +61,7 @@ exports[`Border - Divide Width divide-x-2 1`] = `
`;
exports[`Border - Divide Width divide-x-4 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -89,9 +81,7 @@ exports[`Border - Divide Width divide-x-4 1`] = `
`;
exports[`Border - Divide Width divide-x-8 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -111,9 +101,7 @@ exports[`Border - Divide Width divide-x-8 1`] = `
`;
exports[`Border - Divide Width divide-y 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -133,9 +121,7 @@ exports[`Border - Divide Width divide-y 1`] = `
`;
exports[`Border - Divide Width divide-y-0 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -155,9 +141,7 @@ exports[`Border - Divide Width divide-y-0 1`] = `
`;
exports[`Border - Divide Width divide-y-2 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -177,9 +161,7 @@ exports[`Border - Divide Width divide-y-2 1`] = `
`;
exports[`Border - Divide Width divide-y-4 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -199,9 +181,7 @@ exports[`Border - Divide Width divide-y-4 1`] = `
`;
exports[`Border - Divide Width divide-y-8 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>

48
__tests__/tailwindcss/__snapshots__/space-between.tsx.snap
View File

@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Border - Divide Width space-x-0 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -22,9 +20,7 @@ exports[`Border - Divide Width space-x-0 1`] = `
`;
exports[`Border - Divide Width space-x-0.5 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -43,9 +39,7 @@ exports[`Border - Divide Width space-x-0.5 1`] = `
`;
exports[`Border - Divide Width space-x-1 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -64,9 +58,7 @@ exports[`Border - Divide Width space-x-1 1`] = `
`;
exports[`Border - Divide Width space-x-1.5 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -85,9 +77,7 @@ exports[`Border - Divide Width space-x-1.5 1`] = `
`;
exports[`Border - Divide Width space-x-96 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -106,9 +96,7 @@ exports[`Border - Divide Width space-x-96 1`] = `
`;
exports[`Border - Divide Width space-x-px 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -127,9 +115,7 @@ exports[`Border - Divide Width space-x-px 1`] = `
`;
exports[`Border - Divide Width space-y-0 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -148,9 +134,7 @@ exports[`Border - Divide Width space-y-0 1`] = `
`;
exports[`Border - Divide Width space-y-0.5 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -169,9 +153,7 @@ exports[`Border - Divide Width space-y-0.5 1`] = `
`;
exports[`Border - Divide Width space-y-1 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -190,9 +172,7 @@ exports[`Border - Divide Width space-y-1 1`] = `
`;
exports[`Border - Divide Width space-y-1.5 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -211,9 +191,7 @@ exports[`Border - Divide Width space-y-1.5 1`] = `
`;
exports[`Border - Divide Width space-y-96 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>
@@ -232,9 +210,7 @@ exports[`Border - Divide Width space-y-96 1`] = `
`;
exports[`Border - Divide Width space-y-px 1`] = `
<View
style={Array []}
>
<View>
<Text>
A
</Text>

9
src/styled.tsx
View File

@@ -35,7 +35,10 @@ export function styled<P>(
children: componentChildren,
...props
}: StyledProps<P>) {
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<P>(
const style = styleProperty
? [tailwindStyles, styleProperty]
: tailwindStyles;
: Array.isArray(tailwindStyles) && tailwindStyles.length > 0
? tailwindStyles
: undefined;
let children = isFragment(componentChildren)
? // This probably needs to be recursive