Skip to content

Commit a3114a2

Browse files
committed
fix: line-height parsing (#27)
1 parent bd3bf06 commit a3114a2

File tree

3 files changed

+28
-10
lines changed

3 files changed

+28
-10
lines changed

example/global.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
11
@import "tailwindcss/theme.css" layer(theme);
22
@import "tailwindcss/preflight.css" layer(base);
3-
@import "tailwindcss/utilities.css";
3+
@import "tailwindcss/utilities.css";
4+
5+
@theme {
6+
--text-xs--line-height: calc(1em / 0.75);
7+
--text-sm--line-height: calc(1.25em / 0.875);
8+
--text-base--line-height: calc(1.5em / 1);
9+
--text-lg--line-height: calc(1.75em / 1.125);
10+
--text-xl--line-height: calc(1.75em / 1.25);
11+
--text-2xl--line-height: calc(2em / 1.5);
12+
--text-3xl--line-height: calc(2.25em / 1.875);
13+
--text-4xl--line-height: calc(2.5em / 2.25);
14+
15+
--leading-tight: 1.25em;
16+
--leading-snug: 1.375em;
17+
--leading-normal: 1.5em;
18+
--leading-relaxed: 1.625em;
19+
--leading-loose: 2em;
20+
}

example/src/App.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ export default function App() {
66
return (
77
<>
88
<View className="justify-center items-center h-full">
9-
<Text className="text-green-500 ring-2 ring-blue-500 shadow-xl shadow-red-500">
10-
Test Component
11-
</Text>
9+
<Text className="text-red-500">Test Component</Text>
1210
</View>
1311
</>
1412
);

src/compiler/declarations.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const propertyRename: Record<string, string> = {
5757
"background-image": "experimental_backgroundImage",
5858
};
5959

60-
const needsRuntimeParsing = new Set([
60+
const unparsedRuntimeParsing = new Set([
6161
"animation",
6262
"text-shadow",
6363
"transform",
@@ -811,7 +811,7 @@ export function parseDeclarationUnparsed(
811811
/**
812812
* Unparsed shorthand properties need to be parsed at runtime
813813
*/
814-
if (needsRuntimeParsing.has(property)) {
814+
if (unparsedRuntimeParsing.has(property)) {
815815
const args = parseUnparsed(declaration.value.value, builder);
816816

817817
if (property === "animation") {
@@ -829,10 +829,13 @@ export function parseDeclarationUnparsed(
829829
]);
830830
}
831831
} else {
832-
builder.addDescriptor(
833-
property,
834-
parseUnparsed(declaration.value.value, builder),
835-
);
832+
const value = parseUnparsed(declaration.value.value, builder);
833+
834+
builder.addDescriptor(property, value);
835+
836+
if (property === "font-size") {
837+
builder.addDescriptor("--__rn-css-em", value);
838+
}
836839
}
837840
}
838841

0 commit comments

Comments
 (0)