Skip to content

feat: :root nested @media queries #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marklawlor merged 1 commit into from
Aug 7, 2025
Merged

feat: :root nested @media queries #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/__tests__/vendor/tailwind.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ test("transition", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"transition",
Expand Down Expand Up @@ -84,10 +84,10 @@ test("transition", () => {
],
],
vr: [
["default-transition-duration", [150]],
["default-transition-duration", [[150]]],
[
"default-transition-timing-function",
[[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]],
[[[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]]],
],
],
});
Expand All @@ -107,7 +107,7 @@ test("box-shadow", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"shadow-xl",
Expand Down Expand Up @@ -215,7 +215,7 @@ test("filter", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"brightness-50",
Expand Down Expand Up @@ -286,7 +286,7 @@ test("filter", () => {
],
],
],
vr: [["drop-shadow-md", [[0, 3, 3, "#0000001f"]]]],
vr: [["drop-shadow-md", [[[0, 3, 3, "#0000001f"]]]]],
});

render(<View testID={testID} className="brightness-50 drop-shadow-md" />);
Expand Down
12 changes: 6 additions & 6 deletions src/compiler/__tests__/@prop.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ test("@prop single", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -39,7 +39,7 @@ test("@prop single, nested value", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -69,7 +69,7 @@ test("@prop single, top level", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -99,7 +99,7 @@ test("@prop single, top level, nested", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -129,7 +129,7 @@ test("@prop single, top level, nested", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -162,7 +162,7 @@ test("@prop multiple", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down
93 changes: 41 additions & 52 deletions src/compiler/__tests__/compiler.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ test("hello world", () => {
color: red;
}`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"my-class",
Expand Down Expand Up @@ -34,8 +34,8 @@ test("reads global CSS variables", () => {
}
}`);

expect(compiled).toStrictEqual({
vr: [["color-red-500", ["#fb2c36"]]],
expect(compiled.stylesheet()).toStrictEqual({
vr: [["color-red-500", [["#fb2c36"]]]],
});
});

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

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -84,7 +84,7 @@ test.skip("preserves unused CSS variables with preserve-variables", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -117,7 +117,7 @@ test("multiple rules with same selector", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"redOrGreen",
Expand Down Expand Up @@ -157,7 +157,7 @@ test.skip("transitions", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down Expand Up @@ -195,7 +195,7 @@ test.skip("animations", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
k: [
[
"spin",
Expand Down Expand Up @@ -242,8 +242,8 @@ test("breaks apart comma separated variables", () => {
}
`);

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

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

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"my-class",
Expand Down Expand Up @@ -295,20 +295,17 @@ test("media query nested in rules", () => {

@media (min-width: 100px) {
background-color: yellow;

}
}`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"my-class",
[
{
d: [
{
color: "#f00",
},
],
d: [{ color: "#f00" }],
s: [1, 1],
v: [["__rn-css-color", "#f00"]],
},
Expand All @@ -323,51 +320,43 @@ test("media query nested in rules", () => {
v: [["__rn-css-color", "#00f"]],
},
{
d: [
{
backgroundColor: "#008000",
},
d: [{ backgroundColor: "#008000" }],
m: [
[">=", "width", 600],
[">=", "width", 400],
],
m: [[">=", "width", 400]],
s: [3, 1],
},
{
d: [
{
backgroundColor: "#ff0",
},
],
d: [{ backgroundColor: "#ff0" }],
m: [[">=", "width", 100]],
s: [4, 1],
},
],
],
],
});
});

test("container queries", () => {
const compiled = compile(`
@container (width > 400px) {
.child {
color: blue;
}
}`);

expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"child",
[
{
d: [
{
color: "#00f",
},
],
m: [[">=", "width", 600]],
s: [2, 1, 1],
cq: [{ m: [">", "width", 400] }],
d: [{ color: "#00f" }],
s: [2, 1],
v: [["__rn-css-color", "#00f"]],
},
{
d: [
{
backgroundColor: "#008000",
},
],
m: [[">=", "width", 400]],
s: [3, 1, 1],
},
{
d: [
{
backgroundColor: "#ff0",
},
],
m: [[">=", "width", 100]],
s: [4, 1, 1],
},
],
],
],
Expand Down
4 changes: 2 additions & 2 deletions src/compiler/__tests__/media-query.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe.skip("platform media queries", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"my-class",
Expand Down Expand Up @@ -39,7 +39,7 @@ describe.skip("platform media queries", () => {
}
`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"my-class",
Expand Down
2 changes: 1 addition & 1 deletion src/compiler/__tests__/unstable_animations.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ test.skip("test compiler", () => {
`,
);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
k: [
[
"slide-in",
Expand Down
2 changes: 1 addition & 1 deletion src/compiler/attributes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ test("multiple classes", () => {
color: red;
}`);

expect(compiled).toStrictEqual({
expect(compiled.stylesheet()).toStrictEqual({
s: [
[
"test",
Expand Down
Loading
Loading