From 5ce907b7afa0d848da1b494ec41feabfa7fcb6d1 Mon Sep 17 00:00:00 2001 From: Yevhenii Date: Thu, 10 Sep 2026 14:33:46 +0300 Subject: [PATCH 1/2] =?UTF-8?q?fix(compiler):=20read=20[class=3D=E2=80=A6]?= =?UTF-8?q?=20from=20the=20prop=20the=20class=20list=20arrives=20on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CSS 2.1 §5.8.1's own example is `span[class=example]`, and it matches nothing here: an attribute query built from the name `class` reads `props.class`, which no React Native element has, so every element answers false for every operator. The compiler already knows the mapping — a second class name in the same compound builds `["a", "className", "*=", name]` — so this routes both attribute-query build sites through one `attributePropName` rather than adding a third spelling of it. --- src/__tests__/native/attributes.test.tsx | 39 ++++++++++++++++++++++++ src/compiler/selector-builder.ts | 29 +++++++++++++----- 2 files changed, 60 insertions(+), 8 deletions(-) diff --git a/src/__tests__/native/attributes.test.tsx b/src/__tests__/native/attributes.test.tsx index 78e1814c..95b4a782 100644 --- a/src/__tests__/native/attributes.test.tsx +++ b/src/__tests__/native/attributes.test.tsx @@ -133,3 +133,42 @@ describe("dataSet attribute selector", () => { }); }); }); + +describe("[class=…] reads the prop the class list actually arrives on", () => { + // CSS 2.1 §5.8.1's own example is `span[class=example]`. On React Native the + // class list is `className`, so an unmapped query reads `props.class` — which no + // element has — and answers false for every element. The compiler's own compound + // path already maps it, building `["a", "className", "*=", name]` for a second + // class name in the same selector. + const matchedWidth = ( + selector: string, + className: string, + ): number | undefined => { + registerCSS(`.test${selector} { width: 10px; }`); + render(); + const style = screen.getByTestId(testID).props.style as + | { width?: number } + | undefined; + return style?.width; + }; + + test("[class~=val] finds one word of the class list", () => { + expect(matchedWidth(`[class~='example']`, "example")).toBe(10); + expect(matchedWidth(`[class~='example']`, "other")).toBeUndefined(); + }); + + test("[class*=val] finds a substring of the class list", () => { + expect(matchedWidth(`[class*='xamp']`, "example")).toBe(10); + expect(matchedWidth(`[class*='xamp']`, "other")).toBeUndefined(); + }); + + test("[class] is present whenever the element carries a class", () => { + expect(matchedWidth(`[class]`, "example")).toBe(10); + }); + + test("the name maps at the :is() build site too", () => { + // `:is()` builds its queries on a separate path, so the mapping has to reach + // it as well. + expect(matchedWidth(`:is([class~='example'])`, "example")).toBe(10); + }); +}); diff --git a/src/compiler/selector-builder.ts b/src/compiler/selector-builder.ts index 88561b78..41c2abbc 100644 --- a/src/compiler/selector-builder.ts +++ b/src/compiler/selector-builder.ts @@ -254,13 +254,12 @@ function parseComponents( } else { // specificity[Specificity.ClassName] = // (specificity[Specificity.ClassName] ?? 0) + 1; - const attributeQuery: AttributeQuery = component.name.startsWith( - "data-", - ) + const name = attributePropName(component.name); + const attributeQuery: AttributeQuery = name.startsWith("data-") ? // [data-*] are turned into `dataSet` queries - ["d", toRNProperty(component.name.replace("data-", ""))] + ["d", toRNProperty(name.replace("data-", ""))] : // Everything else is turned into `attribute` queries - ["a", toRNProperty(component.name)]; + ["a", toRNProperty(name)]; if (component.operation) { let operator: AttrSelectorOperator | undefined; switch (component.operation.operator) { @@ -460,11 +459,12 @@ function parseIsWhereComponents( // specificity[Specificity.ClassName] = // (specificity[Specificity.ClassName] ?? 0) + 1; } - const attributeQuery: AttributeQuery = component.name.startsWith("data-") + const name = attributePropName(component.name); + const attributeQuery: AttributeQuery = name.startsWith("data-") ? // [data-*] are turned into `dataSet` queries - ["d", toRNProperty(component.name.replace("data-", ""))] + ["d", toRNProperty(name.replace("data-", ""))] : // Everything else is turned into `attribute` queries - ["a", toRNProperty(component.name)]; + ["a", toRNProperty(name)]; if (component.operation) { const operator = operatorMap[component.operation.operator]; // Append the operator onto the attribute query @@ -582,6 +582,19 @@ type CamelCase = ? `${Lowercase}${Uppercase}${CamelCase}` : Lowercase; +/** + * The prop an attribute name is read from. + * + * `class` is the one attribute whose React Native spelling differs: the class + * list arrives as `className`, so an unmapped `[class=…]` query reads `props.class` + * — a prop no element has — and answers false for every element. The compound + * form already knows this, building `["a", "className", "*=", name]` for a second + * class name in the same selector. + */ +function attributePropName(name: string): string { + return name === "class" ? "className" : name; +} + const operatorMap: Record = { "equal": "=", "includes": "~=", From c99d320e137158a4bcf8ef2b911c9509374fe497 Mon Sep 17 00:00:00 2001 From: Yevhenii Date: Thu, 10 Sep 2026 15:46:38 +0300 Subject: [PATCH 2/2] test(compiler): cover the `=` operator the fix is named for MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `[class=…]` is the headline case and the four cases covered `~=`, `*=`, presence and the `:is()` build site — so the mutation proof never exercised the operator in the title. The new case pins both directions of §6.1's exact match: the value it compares is the WHOLE class list, so `[class='test example']` matches `className="test example"` and `[class='example']` does not — the same answer a browser gives for `span[class=example]`. --- src/__tests__/native/attributes.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/__tests__/native/attributes.test.tsx b/src/__tests__/native/attributes.test.tsx index 95b4a782..3a222be0 100644 --- a/src/__tests__/native/attributes.test.tsx +++ b/src/__tests__/native/attributes.test.tsx @@ -152,6 +152,14 @@ describe("[class=…] reads the prop the class list actually arrives on", () => return style?.width; }; + test("[class=val] compares against the WHOLE class list", () => { + // §6.1's `=` is an exact match on the attribute's value, and the value here + // is the entire class list — so the spec's own `span[class=example]` matches + // `class="example"` and not `class="test example"`, exactly as in a browser. + expect(matchedWidth(`[class='test example']`, "example")).toBe(10); + expect(matchedWidth(`[class='example']`, "example")).toBeUndefined(); + }); + test("[class~=val] finds one word of the class list", () => { expect(matchedWidth(`[class~='example']`, "example")).toBe(10); expect(matchedWidth(`[class~='example']`, "other")).toBeUndefined();