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

fix: missing units error on some styles

Browse Source
This commit is contained in:
Mark Lawlor
2022-04-08 10:57:21 +10:00
parent 6ce3f960bb
commit f2bb1fc806
2 changed files with 99 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
__tests__/tailwindcss/margin.spec.ts Normal file
View File

@@ -0,0 +1,20 @@
import { tailwindRunner, Case } from "./runner";
const cases: Array<Case> = [
[
"Layout - Margin",
[
[
"my-8",
{
styles: {
"my-8": { marginBottom: 32, marginTop: 32 },
},
media: {},
},
],
],
],
];
tailwindRunner(cases);

158
src/babel/tailwind/native-config.ts
View File

@@ -132,75 +132,75 @@ export function getNativeTailwindConfig({
video: "1.777777778",
},
letterSpacing: {
tighter: "-0.5",
tight: "-0.25",
normal: "0",
wide: "0.25",
wider: "0.5",
widest: "1",
tighter: "-0.5px",
tight: "-0.25px",
normal: "0px",
wide: "0.25px",
wider: "0.5px",
widest: "1px",
},
spacing: {
px: "1px",
0: "0px",
0.5: `${rem * 0.125}`,
1: `${rem * 0.25}`,
1.5: `${rem * 0.375}`,
2: `${rem * 0.5}`,
2.5: `${rem * 0.625}`,
3: `${rem * 0.75}`,
3.5: `${rem * 0.875}`,
4: `${rem * 1}`,
5: `${rem * 1.25}`,
6: `${rem * 1.5}`,
7: `${rem * 1.75}`,
8: `${rem * 2}`,
9: `${rem * 2.25}`,
10: `${rem * 2.5}`,
11: `${rem * 2.75}`,
12: `${rem * 3}`,
14: `${rem * 3.5}`,
16: `${rem * 4}`,
20: `${rem * 5}`,
24: `${rem * 6}`,
28: `${rem * 7}`,
32: `${rem * 8}`,
36: `${rem * 9}`,
40: `${rem * 10}`,
44: `${rem * 11}`,
48: `${rem * 12}`,
52: `${rem * 13}`,
56: `${rem * 14}`,
60: `${rem * 15}`,
64: `${rem * 16}`,
72: `${rem * 18}`,
80: `${rem * 20}`,
96: `${rem * 24}`,
0.5: `${rem * 0.125}px`,
1: `${rem * 0.25}px`,
1.5: `${rem * 0.375}px`,
2: `${rem * 0.5}px`,
2.5: `${rem * 0.625}px`,
3: `${rem * 0.75}px`,
3.5: `${rem * 0.875}px`,
4: `${rem * 1}px`,
5: `${rem * 1.25}px`,
6: `${rem * 1.5}px`,
7: `${rem * 1.75}px`,
8: `${rem * 2}px`,
9: `${rem * 2.25}px`,
10: `${rem * 2.5}px`,
11: `${rem * 2.75}px`,
12: `${rem * 3}px`,
14: `${rem * 3.5}px`,
16: `${rem * 4}px`,
20: `${rem * 5}px`,
24: `${rem * 6}px`,
28: `${rem * 7}px`,
32: `${rem * 8}px`,
36: `${rem * 9}px`,
40: `${rem * 10}px`,
44: `${rem * 11}px`,
48: `${rem * 12}px`,
52: `${rem * 13}px`,
56: `${rem * 14}px`,
60: `${rem * 15}px`,
64: `${rem * 16}px`,
72: `${rem * 18}px`,
80: `${rem * 20}px`,
96: `${rem * 24}px`,
},
borderRadius: {
none: "0px",
sm: `${rem * 0.125}`,
DEFAULT: `${rem * 0.25}`,
md: `${rem * 0.375}`,
lg: `${rem * 0.5}`,
xl: `${rem * 0.75}`,
"2xl": `${rem * 1}`,
"3xl": `${rem * 1.5}`,
sm: `${rem * 0.125}px`,
DEFAULT: `${rem * 0.25}px`,
md: `${rem * 0.375}px`,
lg: `${rem * 0.5}px`,
xl: `${rem * 0.75}px`,
"2xl": `${rem * 1}px`,
"3xl": `${rem * 1.5}px`,
full: "9999px",
},
fontSize: {
xs: [`${rem * 0.75}`, { lineHeight: `${rem * 1}` }],
sm: [`${rem * 0.875}`, { lineHeight: `${rem * 1.25}` }],
base: [`${rem * 1}`, { lineHeight: `${rem * 1.5}` }],
lg: [`${rem * 1.125}`, { lineHeight: `${rem * 1.75}` }],
xl: [`${rem * 1.25}`, { lineHeight: `${rem * 1.75}` }],
"2xl": [`${rem * 1.5}`, { lineHeight: `${rem * 2}` }],
"3xl": [`${rem * 1.875}`, { lineHeight: `${rem * 2.25}` }],
"4xl": [`${rem * 2.25}`, { lineHeight: `${rem * 2.5}` }],
"5xl": [`${rem * 3}`, { lineHeight: "1" }],
"6xl": [`${rem * 3.75}`, { lineHeight: "1" }],
"7xl": [`${rem * 4.5}`, { lineHeight: "1" }],
"8xl": [`${rem * 6}`, { lineHeight: "1" }],
"9xl": [`${rem * 8}`, { lineHeight: "1" }],
xs: [`${rem * 0.75}px`, { lineHeight: `${rem * 1}px` }],
sm: [`${rem * 0.875}px`, { lineHeight: `${rem * 1.25}px` }],
base: [`${rem * 1}px`, { lineHeight: `${rem * 1.5}px` }],
lg: [`${rem * 1.125}px`, { lineHeight: `${rem * 1.75}px` }],
xl: [`${rem * 1.25}px`, { lineHeight: `${rem * 1.75}px` }],
"2xl": [`${rem * 1.5}px`, { lineHeight: `${rem * 2}px` }],
"3xl": [`${rem * 1.875}px`, { lineHeight: `${rem * 2.25}px` }],
"4xl": [`${rem * 2.25}px`, { lineHeight: `${rem * 2.5}px` }],
"5xl": [`${rem * 3}px`, { lineHeight: "1" }],
"6xl": [`${rem * 3.75}px`, { lineHeight: "1" }],
"7xl": [`${rem * 4.5}px`, { lineHeight: "1" }],
"8xl": [`${rem * 6}px`, { lineHeight: "1" }],
"9xl": [`${rem * 8}px`, { lineHeight: "1" }],
},
lineHeight: {
none: "1",
@@ -209,29 +209,29 @@ export function getNativeTailwindConfig({
normal: "1.5",
relaxed: "1.625",
loose: "2",
3: `${rem * 0.75}`,
4: `${rem * 1}`,
5: `${rem * 1.25}`,
6: `${rem * 1.5}`,
7: `${rem * 1.75}`,
8: `${rem * 2}`,
9: `${rem * 2.25}`,
10: `${rem * 2.5}`,
3: `${rem * 0.75}px`,
4: `${rem * 1}px`,
5: `${rem * 1.25}px`,
6: `${rem * 1.5}px`,
7: `${rem * 1.75}px`,
8: `${rem * 2}px`,
9: `${rem * 2.25}px`,
10: `${rem * 2.5}px`,
},
maxWidth: ({ theme, breakpoints }) => ({
none: "none",
0: `${rem * 0}`,
xs: `${rem * 20}`,
sm: `${rem * 24}`,
md: `${rem * 28}`,
lg: `${rem * 32}`,
xl: `${rem * 36}`,
"2xl": `${rem * 42}`,
"3xl": `${rem * 48}`,
"4xl": `${rem * 56}`,
"5xl": `${rem * 64}`,
"6xl": `${rem * 72}`,
"7xl": `${rem * 80}`,
0: `${rem * 0}px`,
xs: `${rem * 20}px`,
sm: `${rem * 24}px`,
md: `${rem * 28}px`,
lg: `${rem * 32}px`,
xl: `${rem * 36}px`,
"2xl": `${rem * 42}px`,
"3xl": `${rem * 48}px`,
"4xl": `${rem * 56}px`,
"5xl": `${rem * 64}px`,
"6xl": `${rem * 72}px`,
"7xl": `${rem * 80}px`,
full: "100%",
min: "min-content",
max: "max-content",