fix: fix transition:name can be unicode

[liruifengv]

Changes

• Close transition:name can't use Chinese、Japanese and Korean, etc. #9803
• escape transition:name use cssesc lib

Testing

Added e2e test.

Docs

Not need update.

[changeset-bot]

🦋 Changeset detected

Latest commit: d302ee9

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[martrapp]

Great PR! Don't let my many comments put you off, I really appreciate your contribution!

[yisibl]

Also, need to consider emoji, additionally is there a test case to test them?

[martrapp]

Also, need to consider emoji, additionally is there a test case to test them?

An idea for a e2e test case would be to read back the view-transition-name style property, e.g. test el.style.viewTransitionName. If the view-transition-name in the generated style sheet contains illegal chars, the viewTransitionName of the elements styles will be completely empty. In other cases it will yield the string as shown on the right side of the screenshots above, i.e. human readable. Escaped ascii characters would would be shown with there escaping slash but hex encoded code points will be shown as the character they represent.

[natemoo-re]

I did find a potential package to handle this! cssesc was written by Mathias Bynens, who is very involved in standards work. He also wrote an article and built a hosted tool to explore this topic.

Although the package is quite old, I'm confident that the code is stable!

I'd suggest that we try to use a package for this, and fallback to implementing our own logic only if there isn't a package out there that meets our needs.

[martrapp]

I did find a potential package to handle this!

Excellent catch! As you can see from the linked issue, we were looking for a lib like this but failed.

cssesc(name, {'isIdentifier': true});

seems to be exactly what we need here.

[liruifengv]

I did find a potential package to handle this! cssesc was written by Mathias Bynens, who is very involved in standards work. He also wrote an article and built a hosted tool to explore this topic.

Although the package is quite old, I'm confident that the code is stable!

I'd suggest that we try to use a package for this, and fallback to implementing our own logic only if there isn't a package out there that meets our needs.

Thank you! I used the package. It works!

[martrapp]

Wow over 20 conversation and at the end a one line change (+ tests and dependencies of course)
That was a fun trip, I enjoyed it!

[martrapp]

Looks very good to me now!