Skip to content

Commit df0f885

Browse files
marklawlormarklawlor
authored
feat: :root nested @media queries (#62)
1 parent 5ee25c6 commit df0f885

22 files changed

+322
-223
lines changed

‎src/__tests__/vendor/tailwind.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ test("transition", () => {
2323
}
2424
`);
2525

26-
expect(compiled).toStrictEqual({
26+
expect(compiled.stylesheet()).toStrictEqual({
2727
s: [
2828
[
2929
"transition",
@@ -84,10 +84,10 @@ test("transition", () => {
8484
],
8585
],
8686
vr: [
87-
["default-transition-duration", [150]],
87+
["default-transition-duration", [[150]]],
8888
[
8989
"default-transition-timing-function",
90-
[[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]],
90+
[[[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]]],
9191
],
9292
],
9393
});
@@ -107,7 +107,7 @@ test("box-shadow", () => {
107107
}
108108
`);
109109

110-
expect(compiled).toStrictEqual({
110+
expect(compiled.stylesheet()).toStrictEqual({
111111
s: [
112112
[
113113
"shadow-xl",
@@ -215,7 +215,7 @@ test("filter", () => {
215215
}
216216
`);
217217

218-
expect(compiled).toStrictEqual({
218+
expect(compiled.stylesheet()).toStrictEqual({
219219
s: [
220220
[
221221
"brightness-50",
@@ -286,7 +286,7 @@ test("filter", () => {
286286
],
287287
],
288288
],
289-
vr: [["drop-shadow-md", [[0, 3, 3, "#0000001f"]]]],
289+
vr: [["drop-shadow-md", [[[0, 3, 3, "#0000001f"]]]]],
290290
});
291291

292292
render(<View testID={testID} className="brightness-50 drop-shadow-md" />);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test("@prop single", () => {
99
}
1010
`);
1111

12-
expect(compiled).toStrictEqual({
12+
expect(compiled.stylesheet()).toStrictEqual({
1313
s: [
1414
[
1515
"test",
@@ -39,7 +39,7 @@ test("@prop single, nested value", () => {
3939
}
4040
`);
4141

42-
expect(compiled).toStrictEqual({
42+
expect(compiled.stylesheet()).toStrictEqual({
4343
s: [
4444
[
4545
"test",
@@ -69,7 +69,7 @@ test("@prop single, top level", () => {
6969
}
7070
`);
7171

72-
expect(compiled).toStrictEqual({
72+
expect(compiled.stylesheet()).toStrictEqual({
7373
s: [
7474
[
7575
"test",
@@ -99,7 +99,7 @@ test("@prop single, top level, nested", () => {
9999
}
100100
`);
101101

102-
expect(compiled).toStrictEqual({
102+
expect(compiled.stylesheet()).toStrictEqual({
103103
s: [
104104
[
105105
"test",
@@ -129,7 +129,7 @@ test("@prop single, top level, nested", () => {
129129
}
130130
`);
131131

132-
expect(compiled).toStrictEqual({
132+
expect(compiled.stylesheet()).toStrictEqual({
133133
s: [
134134
[
135135
"test",
@@ -162,7 +162,7 @@ test("@prop multiple", () => {
162162
}
163163
`);
164164

165-
expect(compiled).toStrictEqual({
165+
expect(compiled.stylesheet()).toStrictEqual({
166166
s: [
167167
[
168168
"test",

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

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ test("hello world", () => {
66
color: red;
77
}`);
88

9-
expect(compiled).toStrictEqual({
9+
expect(compiled.stylesheet()).toStrictEqual({
1010
s: [
1111
[
1212
"my-class",
@@ -34,8 +34,8 @@ test("reads global CSS variables", () => {
3434
}
3535
}`);
3636

37-
expect(compiled).toStrictEqual({
38-
vr: [["color-red-500", ["#fb2c36"]]],
37+
expect(compiled.stylesheet()).toStrictEqual({
38+
vr: [["color-red-500", [["#fb2c36"]]]],
3939
});
4040
});
4141

@@ -49,7 +49,7 @@ test.skip("removes unused CSS variables", () => {
4949
}
5050
`);
5151

52-
expect(compiled).toStrictEqual({
52+
expect(compiled.stylesheet()).toStrictEqual({
5353
s: [
5454
[
5555
"test",
@@ -84,7 +84,7 @@ test.skip("preserves unused CSS variables with preserve-variables", () => {
8484
}
8585
`);
8686

87-
expect(compiled).toStrictEqual({
87+
expect(compiled.stylesheet()).toStrictEqual({
8888
s: [
8989
[
9090
"test",
@@ -117,7 +117,7 @@ test("multiple rules with same selector", () => {
117117
}
118118
`);
119119

120-
expect(compiled).toStrictEqual({
120+
expect(compiled.stylesheet()).toStrictEqual({
121121
s: [
122122
[
123123
"redOrGreen",
@@ -157,7 +157,7 @@ test.skip("transitions", () => {
157157
}
158158
`);
159159

160-
expect(compiled).toStrictEqual({
160+
expect(compiled.stylesheet()).toStrictEqual({
161161
s: [
162162
[
163163
"test",
@@ -195,7 +195,7 @@ test.skip("animations", () => {
195195
}
196196
`);
197197

198-
expect(compiled).toStrictEqual({
198+
expect(compiled.stylesheet()).toStrictEqual({
199199
k: [
200200
[
201201
"spin",
@@ -242,8 +242,8 @@ test("breaks apart comma separated variables", () => {
242242
}
243243
`);
244244

245-
expect(compiled).toStrictEqual({
246-
vr: [["test", [["blue", "green"]]]],
245+
expect(compiled.stylesheet()).toStrictEqual({
246+
vr: [["test", [[["blue", "green"]]]]],
247247
});
248248
});
249249

@@ -253,7 +253,7 @@ test("light-dark()", () => {
253253
background-color: light-dark(#333b3c, #efefec);
254254
}`);
255255

256-
expect(compiled).toStrictEqual({
256+
expect(compiled.stylesheet()).toStrictEqual({
257257
s: [
258258
[
259259
"my-class",
@@ -295,20 +295,17 @@ test("media query nested in rules", () => {
295295
296296
@media (min-width: 100px) {
297297
background-color: yellow;
298+
298299
}
299300
}`);
300301

301-
expect(compiled).toStrictEqual({
302+
expect(compiled.stylesheet()).toStrictEqual({
302303
s: [
303304
[
304305
"my-class",
305306
[
306307
{
307-
d: [
308-
{
309-
color: "#f00",
310-
},
311-
],
308+
d: [{ color: "#f00" }],
312309
s: [1, 1],
313310
v: [["__rn-css-color", "#f00"]],
314311
},
@@ -323,51 +320,43 @@ test("media query nested in rules", () => {
323320
v: [["__rn-css-color", "#00f"]],
324321
},
325322
{
326-
d: [
327-
{
328-
backgroundColor: "#008000",
329-
},
323+
d: [{ backgroundColor: "#008000" }],
324+
m: [
325+
[">=", "width", 600],
326+
[">=", "width", 400],
330327
],
331-
m: [[">=", "width", 400]],
332328
s: [3, 1],
333329
},
334330
{
335-
d: [
336-
{
337-
backgroundColor: "#ff0",
338-
},
339-
],
331+
d: [{ backgroundColor: "#ff0" }],
340332
m: [[">=", "width", 100]],
341333
s: [4, 1],
342334
},
335+
],
336+
],
337+
],
338+
});
339+
});
340+
341+
test("container queries", () => {
342+
const compiled = compile(`
343+
@container (width > 400px) {
344+
.child {
345+
color: blue;
346+
}
347+
}`);
348+
349+
expect(compiled.stylesheet()).toStrictEqual({
350+
s: [
351+
[
352+
"child",
353+
[
343354
{
344-
d: [
345-
{
346-
color: "#00f",
347-
},
348-
],
349-
m: [[">=", "width", 600]],
350-
s: [2, 1, 1],
355+
cq: [{ m: [">", "width", 400] }],
356+
d: [{ color: "#00f" }],
357+
s: [2, 1],
351358
v: [["__rn-css-color", "#00f"]],
352359
},
353-
{
354-
d: [
355-
{
356-
backgroundColor: "#008000",
357-
},
358-
],
359-
m: [[">=", "width", 400]],
360-
s: [3, 1, 1],
361-
},
362-
{
363-
d: [
364-
{
365-
backgroundColor: "#ff0",
366-
},
367-
],
368-
m: [[">=", "width", 100]],
369-
s: [4, 1, 1],
370-
},
371360
],
372361
],
373362
],

‎src/compiler/__tests__/media-query.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe.skip("platform media queries", () => {
88
}
99
`);
1010

11-
expect(compiled).toStrictEqual({
11+
expect(compiled.stylesheet()).toStrictEqual({
1212
s: [
1313
[
1414
"my-class",
@@ -39,7 +39,7 @@ describe.skip("platform media queries", () => {
3939
}
4040
`);
4141

42-
expect(compiled).toStrictEqual({
42+
expect(compiled.stylesheet()).toStrictEqual({
4343
s: [
4444
[
4545
"my-class",

‎src/compiler/__tests__/unstable_animations.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ test.skip("test compiler", () => {
1919
`,
2020
);
2121

22-
expect(compiled).toStrictEqual({
22+
expect(compiled.stylesheet()).toStrictEqual({
2323
k: [
2424
[
2525
"slide-in",

‎src/compiler/attributes.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ test("multiple classes", () => {
66
color: red;
77
}`);
88

9-
expect(compiled).toStrictEqual({
9+
expect(compiled.stylesheet()).toStrictEqual({
1010
s: [
1111
[
1212
"test",

0 commit comments

Comments
 (0)