Skip to content

Commit 3109259

Browse files
marklawlormarklawlor
committed
fix: ignore empty selectors
1 parent 9cb7b6a commit 3109259

File tree

5 files changed

+135
-60
lines changed

5 files changed

+135
-60
lines changed

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"@react-native/eslint-config": "^0.81.1",
8686
"@react-native/typescript-config": "^0.82.0",
8787
"@release-it/conventional-changelog": "^10.0.1",
88+
"@tailwindcss/postcss": "^4.1.16",
8889
"@types/debug": "^4.1.12",
8990
"@types/jest": "^29.5.14",
9091
"@types/node": "^24.8.1",
@@ -97,6 +98,7 @@
9798
"jest": "^29.7.0",
9899
"lightningcss": "1.30.1",
99100
"nitrogen": "^0.29.1",
101+
"postcss": "^8.5.6",
100102
"prettier": "^3.6.2",
101103
"react": "19.1.0",
102104
"react-native": "0.82.0",
@@ -105,6 +107,7 @@
105107
"react-native-reanimated": "^4.1.3",
106108
"react-native-worklets": "^0.6.1",
107109
"release-it": "^19.0.4",
110+
"tailwindcss": "^4.1.16",
108111
"turbo": "^2.5.6",
109112
"typescript": "^5.9.2",
110113
"typescript-eslint": "^8.46.1"
@@ -188,7 +191,7 @@
188191
"version": "0.54.3"
189192
},
190193
"dependencies": {
191-
"colorjs.io": "^0.5.2",
194+
"colorjs.io": "0.6.0-alpha.1",
192195
"comment-json": "^4.4.1",
193196
"debug": "^4.4.3"
194197
},

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import tailwind from "@tailwindcss/postcss";
2+
import postcss from "postcss";
3+
4+
import { compile } from "../../compiler";
5+
6+
test("tailwind", async () => {
7+
const css = `@import "tailwindcss";
8+
@source inline("text-red-500");
9+
`;
10+
11+
const { css: output } = await postcss([
12+
/* Tailwind seems to internally cache things, so we need a random value to cache bust */
13+
tailwind({ base: Date.now().toString() }),
14+
]).process(css, {
15+
from: __dirname,
16+
});
17+
18+
const compiled = compile(output);
19+
20+
expect(compiled.stylesheet()).toStrictEqual({
21+
s: {
22+
"text-red-500": [
23+
{
24+
d: {
25+
color: "#fb2c36",
26+
},
27+
s: [0, 0, 0, 0, 0],
28+
v: {
29+
"__rn-css-color": "#fb2c36",
30+
},
31+
},
32+
],
33+
},
34+
});
35+
});

‎src/compiler/parsers.ts‎

Lines changed: 85 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
import { type BoxShadowValue } from "react-native";
22

3-
import Color from "colorjs.io";
3+
import {
4+
A98RGB,
5+
ColorSpace,
6+
HSL,
7+
HWB,
8+
Lab,
9+
LCH,
10+
OKLab,
11+
OKLCH,
12+
P3,
13+
ProPhoto,
14+
REC_2020,
15+
serialize,
16+
sRGB,
17+
sRGB_Linear,
18+
XYZ_D50,
19+
XYZ_D65,
20+
type PlainColorObject,
21+
} from "colorjs.io/fn";
422
import type {
523
Angle,
624
AnimationDirection,
@@ -47,6 +65,20 @@ import type { ValueType } from "react-native-nitro-modules";
4765
import type { DeclarationBuilder } from "./declarations";
4866
import { toRNProperty } from "./selectors-new";
4967

68+
ColorSpace.register(sRGB);
69+
ColorSpace.register(P3);
70+
ColorSpace.register(OKLab);
71+
ColorSpace.register(OKLCH);
72+
ColorSpace.register(Lab);
73+
ColorSpace.register(LCH);
74+
ColorSpace.register(HSL);
75+
ColorSpace.register(HWB);
76+
ColorSpace.register(A98RGB);
77+
ColorSpace.register(ProPhoto);
78+
ColorSpace.register(REC_2020);
79+
ColorSpace.register(XYZ_D50);
80+
ColorSpace.register(XYZ_D65);
81+
5082
export type Parser<
5183
T extends Declaration["property"] = Declaration["property"],
5284
> = (
@@ -1249,7 +1281,7 @@ function color(
12491281
return;
12501282
}
12511283

1252-
let color: Color | undefined;
1284+
let color: PlainColorObject | undefined;
12531285

12541286
const { hexColors = true, colorPrecision } = b.getOptions();
12551287

@@ -1271,120 +1303,124 @@ function color(
12711303
return;
12721304
}
12731305
case "rgb": {
1274-
color = new Color({
1275-
space: "sRGB",
1306+
color = {
1307+
space: sRGB,
12761308
coords: [cssColor.r / 255, cssColor.g / 255, cssColor.b / 255],
12771309
alpha: cssColor.alpha,
1278-
});
1310+
};
12791311
break;
12801312
}
12811313
case "hsl":
1282-
color = new Color({
1283-
space: cssColor.type,
1314+
color = {
1315+
space: HSL,
12841316
coords: [cssColor.h, cssColor.s, cssColor.l],
12851317
alpha: cssColor.alpha,
1286-
});
1318+
};
12871319
break;
12881320
case "hwb":
1289-
color = new Color({
1290-
space: cssColor.type,
1321+
color = {
1322+
space: HWB,
12911323
coords: [cssColor.h, cssColor.w, cssColor.b],
12921324
alpha: cssColor.alpha,
1293-
});
1325+
};
12941326
break;
12951327
case "lab":
1296-
color = new Color({
1297-
space: cssColor.type,
1328+
color = {
1329+
space: Lab,
12981330
coords: [cssColor.l, cssColor.a, cssColor.b],
12991331
alpha: cssColor.alpha,
1300-
});
1332+
};
13011333
break;
13021334
case "lch":
1303-
color = new Color({
1304-
space: cssColor.type,
1335+
color = {
1336+
space: LCH,
13051337
coords: [cssColor.l, cssColor.c, cssColor.h],
13061338
alpha: cssColor.alpha,
1307-
});
1339+
};
13081340
break;
13091341
case "oklab":
1310-
color = new Color({
1311-
space: cssColor.type,
1342+
color = {
1343+
space: OKLab,
13121344
coords: [cssColor.l, cssColor.a, cssColor.b],
13131345
alpha: cssColor.alpha,
1314-
});
1346+
};
13151347
break;
13161348
case "oklch":
1317-
color = new Color({
1318-
space: cssColor.type,
1349+
color = {
1350+
space: OKLCH,
13191351
coords: [cssColor.l, cssColor.c, cssColor.h],
13201352
alpha: cssColor.alpha,
1321-
});
1353+
};
13221354
break;
13231355
case "srgb":
1324-
color = new Color({
1325-
space: cssColor.type,
1356+
color = {
1357+
space: sRGB,
13261358
coords: [cssColor.r, cssColor.g, cssColor.b],
13271359
alpha: cssColor.alpha,
1328-
});
1360+
};
13291361
break;
13301362
case "srgb-linear":
1331-
color = new Color({
1332-
space: cssColor.type,
1363+
color = {
1364+
space: sRGB_Linear,
13331365
coords: [cssColor.r, cssColor.g, cssColor.b],
13341366
alpha: cssColor.alpha,
1335-
});
1367+
};
13361368
break;
13371369
case "display-p3":
1338-
color = new Color({
1339-
space: "p3",
1370+
color = {
1371+
space: P3,
13401372
coords: [cssColor.r, cssColor.g, cssColor.b],
13411373
alpha: cssColor.alpha,
1342-
});
1374+
};
13431375
break;
13441376
case "a98-rgb":
1345-
color = new Color({
1346-
space: "a98rgb",
1377+
color = {
1378+
space: A98RGB,
13471379
coords: [cssColor.r, cssColor.g, cssColor.b],
13481380
alpha: cssColor.alpha,
1349-
});
1381+
};
13501382
break;
13511383
case "prophoto-rgb":
1352-
color = new Color({
1353-
space: "prophoto",
1384+
color = {
1385+
space: ProPhoto,
13541386
coords: [cssColor.r, cssColor.g, cssColor.b],
13551387
alpha: cssColor.alpha,
1356-
});
1388+
};
13571389
break;
13581390
case "rec2020":
1359-
color = new Color({
1360-
space: cssColor.type,
1391+
color = {
1392+
space: REC_2020,
13611393
coords: [cssColor.r, cssColor.g, cssColor.b],
13621394
alpha: cssColor.alpha,
1363-
});
1395+
};
13641396
break;
13651397
case "xyz-d50":
1366-
color = new Color({
1367-
space: cssColor.type,
1398+
color = {
1399+
space: XYZ_D50,
13681400
coords: [cssColor.x, cssColor.y, cssColor.z],
13691401
alpha: cssColor.alpha,
1370-
});
1402+
};
13711403
break;
13721404
case "xyz-d65":
1373-
color = new Color({
1374-
space: cssColor.type,
1405+
color = {
1406+
space: XYZ_D65,
13751407
coords: [cssColor.x, cssColor.y, cssColor.z],
13761408
alpha: cssColor.alpha,
1377-
});
1409+
};
13781410
break;
13791411
default: {
13801412
cssColor satisfies never;
13811413
}
13821414
}
13831415

1416+
if (!color) {
1417+
return;
1418+
}
1419+
13841420
if (!hexColors || colorPrecision) {
1385-
return color?.toString({ precision: colorPrecision ?? 3 });
1421+
return serialize(color, { precision: colorPrecision ?? 3 });
13861422
} else {
1387-
return color?.toString({ format: "hex" });
1423+
return serialize(serialize(color, { format: "srgb" }), { format: "hex" });
13881424
}
13891425
}
13901426

‎src/compiler/stylesheet-new.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export class CompilerStyleSheet {
113113
}
114114

115115
addImportantDeclarations(declarations?: Declaration[]) {
116-
if (!declarations) {
116+
if (!declarations || declarations.length === 0) {
117117
return;
118118
}
119119
const rule = new DeclarationBuilder(this.options, this.currentMapping);
@@ -171,9 +171,7 @@ export class CompilerStyleSheet {
171171

172172
const selectors = this.selectorStack.at(0);
173173
if (!selectors?.length) {
174-
throw new Error(
175-
"Cannot add declaration without an active selector context",
176-
);
174+
return;
177175
}
178176

179177
for (const selector of selectors) {

‎yarn.lock‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5386,10 +5386,10 @@ __metadata:
53865386
languageName: node
53875387
linkType: hard
53885388

5389-
"colorjs.io@npm:^0.5.2":
5390-
version: 0.5.2
5391-
resolution: "colorjs.io@npm:0.5.2"
5392-
checksum: f4ad8a0ead4e7eb74612a5fed9ae999201116b215b2eac70660c1f643e21980922741641209bdbd010723923762e8e80bd499250acf7505605309f01b76f53fa
5389+
"colorjs.io@npm:0.6.0-alpha.1":
5390+
version: 0.6.0-alpha.1
5391+
resolution: "colorjs.io@npm:0.6.0-alpha.1"
5392+
checksum: 3a3988a0f559e9260fd00edab5f6e2657b9b57ec66a083377ea4cd8872365a2ce5f8b961eb3efa1b555119e53b77c9e54077efae4d2e610dc3cb49a9c8a3b199
53935393
languageName: node
53945394
linkType: hard
53955395

@@ -11378,7 +11378,7 @@ __metadata:
1137811378
version: 0.0.0-use.local
1137911379
resolution: "react-native-css-nitro@portal:..::locator=react-native-css-nitro-example%40workspace%3Aexample"
1138011380
dependencies:
11381-
colorjs.io: ^0.5.2
11381+
colorjs.io: 0.6.0-alpha.1
1138211382
comment-json: ^4.4.1
1138311383
debug: ^4.4.3
1138411384
peerDependencies:
@@ -11405,11 +11405,12 @@ __metadata:
1140511405
"@react-native/eslint-config": ^0.81.1
1140611406
"@react-native/typescript-config": ^0.82.0
1140711407
"@release-it/conventional-changelog": ^10.0.1
11408+
"@tailwindcss/postcss": ^4.1.16
1140811409
"@types/debug": ^4.1.12
1140911410
"@types/jest": ^29.5.14
1141011411
"@types/node": ^24.8.1
1141111412
"@types/react": ^19.1.0
11412-
colorjs.io: ^0.5.2
11413+
colorjs.io: 0.6.0-alpha.1
1141311414
comment-json: ^4.4.1
1141411415
commitlint: ^19.8.1
1141511416
debug: ^4.4.3
@@ -11420,6 +11421,7 @@ __metadata:
1142011421
jest: ^29.7.0
1142111422
lightningcss: 1.30.1
1142211423
nitrogen: ^0.29.1
11424+
postcss: ^8.5.6
1142311425
prettier: ^3.6.2
1142411426
react: 19.1.0
1142511427
react-native: 0.82.0
@@ -11428,6 +11430,7 @@ __metadata:
1142811430
react-native-reanimated: ^4.1.3
1142911431
react-native-worklets: ^0.6.1
1143011432
release-it: ^19.0.4
11433+
tailwindcss: ^4.1.16
1143111434
turbo: ^2.5.6
1143211435
typescript: ^5.9.2
1143311436
typescript-eslint: ^8.46.1

0 commit comments

Comments
 (0)