transition:name can't use Chinese、Japanese and Korean, etc.

[liruifengv]

Astro Info

Astro                    v4.1.0
Node                     v20.9.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react
                         @astrojs/sitemap
                         astro-expressive-code
                         @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

Set a element transition:name to transition:name={name}
The name is Chinese text.

Read Astro code:

// Ensure animationName is a valid CSS identifier
function toValidIdent(name: string): string {
	return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '');
}

This will cause the Chinese name to be replaced with empty, resulting in multiple duplicates of the name.

My website as example:

https://liruifengv.com/tags/

I think the same will be true for Japanese and Korean, etc.

What's the expected result?

Expect Chinese to be used correctly as transition:name.

CSS identifiers can be Chinese、Japanese and Korean, etc.

Link to Minimal Reproducible Example

https://liruifengv.com/tags/

Participation

• I am willing to submit a pull request for this issue.

[liruifengv]

This is causing me a lot of problems and causing my site animations to fail.

I checked the commit history and found that this PR did a replacement process for transition:name.

Why do this, I think it's a break change.

#8207

[delucis]

It looks like the replace logic there was intended to ensure valid transition names as those are supposed to be CSS <custom-ident> strings, but didn’t account for Unicode character support (which requires escaping):

astro/packages/astro/src/runtime/server/transition.ts

Lines 26 to 29 in 457e8b6

	// Ensure animationName is a valid CSS identifier
	function toValidIdent(name: string): string {
	return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, '');
	}

[martrapp]

As you can see, I'm having trouble choosing the right label here. This is definitely not an edge case, but it also does not contradict the documented behavior.

The browser only accepts a limited range of characters for view-transition-names.
The only valid unescaped characters are A-Z, a-z, 0-9, and \-_.

[liruifengv]

Maybe we can encode it using encodeURIComponent before.

[martrapp]

Even if the intention is good, it's not so nice to change the characters without notice :-)
We also replace "\" which would be a legal character and necessary for escaping.
The correct way to define 开源 as a view transition name would be "\5F00\6E90" which is currently not possible due to the missing \)

Maybe we can do better on auto escaping, but I think we should definitively issue warning when changing names.

[liruifengv]

Yeah. We need give a warning when change the user passed value.

[martrapp]

Maybe we can encode it using encodeURIComponent before.

This would yield %E5%BC%80%E6%BA%90 which is also illegal, but I know what you mean and would agree to auto-escaping if we find a robust way to do so.

[delucis]

I took a quick look and didn’t immediately spot a definitive CSS ident escaping tool, but yes I’d be +1 on auto-escaping if possible and definitely warning in case someone is using the name elsewhere in their CSS.

[martrapp]

This might be a bit bumpy, but I'll take a look.
Or will someone else volunteer?

[liruifengv]

I'll also take a look.

[ccbikai]

Is it possible to use encodeURIComponent('中文').replaceAll('%', '_')?

Although longer, they are all legal characters

[martrapp]

Is it possible to use encodeURIComponent('中文').replaceAll('%', '_')?

true, but it would be rather inconvenient to decode. When using \5F00\6E90, you get the original text in the browsers development tools:

[liruifengv]

I just made a PR. Can you help me with it? @delucis @martrapp

#9822

[martrapp]

Great! Thanks a lot, happy to do so!