Skip to content

fix(id): escape values assigned through the value setter#326

Open
greymoth-jp wants to merge 1 commit into
postcss:mainfrom
greymoth-jp:fix-id-value-escaping
Open

fix(id): escape values assigned through the value setter#326
greymoth-jp wants to merge 1 commit into
postcss:mainfrom
greymoth-jp:fix-id-value-escaping

Conversation

@greymoth-jp

Copy link
Copy Markdown

ID doesn't override value, so assigning to id.value stores the string as-is and toString() emits it unescaped. ClassName has had an escaping value setter since d4dda8c5 ("Escape class name values by default", 2018), but ID never got the same one, even though class and id selectors are both identifiers and follow the same escaping rules.

The result is wrong output for any id value that contains characters needing escapes:

const parser = require("postcss-selector-parser");

const cls = parser.className({ value: "x" });
cls.value = "foo.bar";
cls.toString(); // ".foo\\.bar"   (correct)

const id = parser.id({ value: "x" });
id.value = "foo.bar";
id.toString(); // "#foo.bar"   (wrong: re-parses to id "foo" + class "bar")

Leading digits, spaces and # break the same way: #1abc, #a b, #a#b.

This adds the same setter ClassName uses (cssesc(v, { isIdentifier: true }) stored into raws.value), so id values escape on assignment:

id.value = "foo.bar";
id.toString(); // "#foo\\.bar"

The new test mirrors the existing ClassName#set value test. npm test passes (lint, typecheck, full suite).

ID had no value setter, so a programmatically assigned id value was
emitted verbatim instead of escaped. ClassName has escaped assigned
values since 2018; mirror the same setter on ID.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant