Skip to content
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.

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

fix: escape every CSS ident character necessary #3102

Merged
merged 5 commits into from
Apr 13, 2020

Conversation

kripod
Copy link
Contributor

@kripod kripod commented Apr 9, 2020

The list of characters to be escaped was determined by the serialize an identifier idiom of the CSSOM spec:

  • [Ignored rules about control characters and non-letter first symbols…]
  • If the character is not handled by one of the above rules and is greater than or equal to U+0080, is "-" (U+002D) or "_" (U+005F), or is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character itself.
  • Otherwise, the escaped character.

The new list of characters in escapeRegex was generated by applying the rules above:

const arr = [];
for (let i = 0x20; i < 0x80; ++i) {
  if (
    i !== 0x7f &&
    i !== 0x2d &&
    !(i >= 0x30 && i <= 0x39) &&
    !(i >= 0x41 && i <= 0x5a) &&
    i !== 0x5f &&
    !(i >= 0x61 && i <= 0x7a)
  )
    arr.push(String.fromCharCode(i));
}
console.log(arr.join("")); // !"#$%&'()*+,./:;<=>?@[\]^`{|}~

@quantizor
Copy link
Contributor

What is this intended to fix?

@kripod
Copy link
Contributor Author

kripod commented Apr 13, 2020

Generating class names for components with display names which may contain characters to be escaped.

@quantizor
Copy link
Contributor

@kripod thanks for getting the tests fixed up. Could you add an entry to the changelog?

@kripod
Copy link
Contributor Author

kripod commented Apr 13, 2020

Sure!

@quantizor quantizor merged commit 01e5747 into styled-components:master Apr 13, 2020
@kripod kripod deleted the patch-1 branch April 13, 2020 20:43
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.

2 participants