Skip to content

Commit 16edec1

Browse files
marklawlormarklawlor
authored
feat: inline css variables (#167)
1 parent d48061c commit 16edec1

24 files changed

+466
-590
lines changed

‎src/__tests__/compiler/@prop.test.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,13 @@ test("@prop target unparsed", () => {
6161
"my-class",
6262
[
6363
{
64-
d: [[[{}, "var", "color-black", 1], ["test"], 1]],
65-
dv: 1,
66-
s: [2, 1],
67-
v: [["__rn-css-current-color", [{}, "var", "color-black", 1]]],
64+
d: [["#000", ["test"]]],
65+
s: [1, 1],
66+
v: [["__rn-css-color", "#000"]],
6867
},
6968
],
7069
],
7170
],
72-
vr: [["color-black", [["#000"]]]],
7371
});
7472

7573
render(<View testID={testID} className="my-class" />);

‎src/__tests__/compiler/compiler.test.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,17 @@ test("hello world", () => {
2727
});
2828

2929
test("reads global CSS variables", () => {
30-
const compiled = compile(`
30+
const compiled = compile(
31+
`
3132
@layer theme {
3233
:root, :host {
3334
--color-red-500: oklch(63.7% 0.237 25.331);
3435
}
35-
}`);
36+
}`,
37+
{
38+
inlineVariables: false,
39+
},
40+
);
3641

3742
expect(compiled.stylesheet()).toStrictEqual({
3843
vr: [["color-red-500", [["#fb2c36"]]]],
@@ -236,11 +241,16 @@ test.skip("animations", () => {
236241
});
237242

238243
test("breaks apart comma separated variables", () => {
239-
const compiled = compile(`
244+
const compiled = compile(
245+
`
240246
:root {
241247
--test: blue, green;
242248
}
243-
`);
249+
`,
250+
{
251+
inlineVariables: false,
252+
},
253+
);
244254

245255
expect(compiled.stylesheet()).toStrictEqual({
246256
vr: [["test", [[["blue", "green"]]]]],

‎src/__tests__/native/box-shadow.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,43 +49,43 @@ test("shadow values - multiple nested variables", () => {
4949
boxShadow: [
5050
{
5151
blurRadius: 0,
52-
color: "red",
52+
color: "#f00",
5353
offsetX: 0,
5454
offsetY: 20,
5555
spreadDistance: 0,
5656
},
5757

5858
{
5959
blurRadius: 0,
60-
color: "green",
60+
color: "#008000",
6161
offsetX: 0,
6262
offsetY: 30,
6363
spreadDistance: 0,
6464
},
6565
{
6666
blurRadius: 0,
67-
color: "purple",
67+
color: "#800080",
6868
offsetX: 0,
6969
offsetY: 40,
7070
spreadDistance: 0,
7171
},
7272
{
7373
blurRadius: 0,
74-
color: "yellow",
74+
color: "#ff0",
7575
offsetX: 0,
7676
offsetY: 50,
7777
spreadDistance: 0,
7878
},
7979
{
8080
blurRadius: 0,
81-
color: "orange",
81+
color: "#ffa500",
8282
offsetX: 0,
8383
offsetY: 60,
8484
spreadDistance: 0,
8585
},
8686
{
8787
blurRadius: 0,
88-
color: "gray",
88+
color: "#808080",
8989
offsetX: 0,
9090
offsetY: 70,
9191
spreadDistance: 0,

‎src/__tests__/native/calc.test.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,6 @@ test("calc(var(--variable) + 20%)", () => {
139139
expect(component.type).toBe("View");
140140
expect(component.props).toStrictEqual({
141141
children: undefined,
142-
style: {},
143142
testID,
144143
});
145144
});
@@ -159,7 +158,6 @@ test("calc(var(--percent) + 20px)", () => {
159158
expect(component.type).toBe("View");
160159
expect(component.props).toStrictEqual({
161160
children: undefined,
162-
style: {},
163161
testID,
164162
});
165163
});
@@ -185,7 +183,7 @@ test("calc & colors", () => {
185183
expect(component.props).toStrictEqual({
186184
children: undefined,
187185
style: {
188-
backgroundColor: "hsl(120, 90%, 80%)",
186+
backgroundColor: "#9efa9e",
189187
},
190188
testID,
191189
});

‎src/__tests__/native/colors.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe("hsl", () => {
4545
expect(component.type).toBe("View");
4646
expect(component.props).toStrictEqual({
4747
children: undefined,
48-
style: { color: "hsl(0, 84.2%, 60.2%)" },
48+
style: { color: "#ef4444" },
4949
testID,
5050
});
5151
});
@@ -62,7 +62,7 @@ describe("hsl", () => {
6262
expect(component.type).toBe("View");
6363
expect(component.props).toStrictEqual({
6464
children: undefined,
65-
style: { color: "hsl(0, 84.2%, 60.2%)" },
65+
style: { color: "#ef4444" },
6666
testID,
6767
});
6868
});
@@ -113,7 +113,7 @@ describe("hsla", () => {
113113
expect(component.type).toBe("View");
114114
expect(component.props).toStrictEqual({
115115
children: undefined,
116-
style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
116+
style: { color: "#ef444499" },
117117
testID,
118118
});
119119
});
@@ -130,7 +130,7 @@ describe("hsla", () => {
130130
expect(component.type).toBe("View");
131131
expect(component.props).toStrictEqual({
132132
children: undefined,
133-
style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
133+
style: { color: "#ef444499" },
134134
testID,
135135
});
136136
});
@@ -160,7 +160,7 @@ describe("currentcolor", () => {
160160
expect(component.type).toBe("View");
161161
expect(component.props).toStrictEqual({
162162
children: undefined,
163-
style: { color: "red", backgroundColor: "red" },
163+
style: { color: "#f00", backgroundColor: "#f00" },
164164
testID,
165165
});
166166
});

‎src/__tests__/native/text-shadow.test.ios.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@ import { registerCSS, testID } from "react-native-css/jest";
55
describe("text-shadow", () => {
66
test("<offsetX> <offsetY>", () => {
77
registerCSS(
8-
`.my-class { --my-var: 10px 10px; text-shadow: var(--my-var); }`,
8+
`.my-class {
9+
--my-var: 10px 10px;
10+
text-shadow: var(--my-var);
11+
}`,
912
);
1013

1114
render(<Text testID={testID} className="my-class" />);
1215

1316
expect(screen.getByTestId(testID).props.style).toStrictEqual({
14-
textShadowColor: "black",
17+
textShadowColor: {
18+
semantic: ["label", "labelColor"],
19+
},
1520
textShadowOffset: {
1621
height: 10,
1722
width: 10,
@@ -28,7 +33,7 @@ describe("text-shadow", () => {
2833
render(<Text testID={testID} className="my-class" />);
2934

3035
expect(screen.getByTestId(testID).props.style).toStrictEqual({
31-
textShadowColor: "red",
36+
textShadowColor: "#f00",
3237
textShadowOffset: {
3338
height: 10,
3439
width: 10,
@@ -45,7 +50,7 @@ describe("text-shadow", () => {
4550
render(<Text testID={testID} className="my-class" />);
4651

4752
expect(screen.getByTestId(testID).props.style).toStrictEqual({
48-
textShadowColor: "red",
53+
textShadowColor: "#f00",
4954
textShadowOffset: {
5055
height: 10,
5156
width: 10,

‎src/__tests__/native/transform.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ describe("scale", () => {
5656
).getByTestId(testID);
5757

5858
expect(component.props.style).toStrictEqual({
59-
transform: [{ scale: "2%" }],
59+
transform: [{ scaleX: "2%" }, { scaleY: "2%" }],
6060
});
6161
});
6262

‎src/__tests__/native/variables.test.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ test("inline variable", () => {
2020
});
2121
});
2222

23-
test("combined inline variable", () => {
23+
test("combined inline variables", () => {
2424
registerCSS(`
2525
.my-class-1 { width: var(--my-var); }
2626
.my-class-2 { --my-var: 10px; }
@@ -142,7 +142,7 @@ test(":root variables", () => {
142142
<View testID={testID} className="my-class" />,
143143
).getByTestId(testID);
144144

145-
expect(component.props.style).toStrictEqual({ color: "red" });
145+
expect(component.props.style).toStrictEqual({ color: "#f00" });
146146
});
147147

148148
test("can apply and set new variables", () => {
@@ -166,13 +166,13 @@ test("can apply and set new variables", () => {
166166
);
167167

168168
expect(screen.getByTestId(testIDs.one).props.style).toStrictEqual({
169-
color: "red",
169+
color: "#f00",
170170
});
171171
expect(screen.getByTestId(testIDs.two).props.style).toStrictEqual({
172-
color: "red",
172+
color: "#f00",
173173
});
174174
expect(screen.getByTestId(testIDs.three).props.style).toStrictEqual({
175-
color: "green",
175+
color: "#008000",
176176
});
177177
});
178178

@@ -199,7 +199,7 @@ test("variables will be inherited", () => {
199199
);
200200

201201
expect(screen.getByTestId(testIDs.three).props.style).toStrictEqual({
202-
color: "green",
202+
color: "#008000",
203203
});
204204
});
205205

@@ -212,7 +212,7 @@ test("useUnsafeVariable", () => {
212212
render(<View testID={testID} className="test" />);
213213
const component = screen.getByTestId(testID);
214214

215-
expect(component.props.style).toStrictEqual({ color: "red" });
215+
expect(component.props.style).toStrictEqual({ color: "#f00" });
216216
});
217217

218218
test("ratio values", () => {
@@ -224,7 +224,7 @@ test("ratio values", () => {
224224
render(<View testID={testID} className="test" />);
225225
const component = screen.getByTestId(testID);
226226

227-
expect(component.props.style).toStrictEqual({ aspectRatio: "16 / 9" });
227+
expect(component.props.style).toStrictEqual({ aspectRatio: "16/9" });
228228
});
229229

230230
test("VariableContextProvider", () => {
@@ -269,5 +269,5 @@ test("variable overriding with classes", () => {
269269
);
270270

271271
const component = screen.getByTestId(testID);
272-
expect(component.props.style).toStrictEqual({ color: "red" });
272+
expect(component.props.style).toStrictEqual({ color: "#f00" });
273273
});

0 commit comments

Comments
 (0)