sebmarkbage bcae4ac199 Use valid CSS selectors in useId format (#32001) ...

For the `useId` algorithm we used colon `:` before and after.
https://github.com/facebook/react/pull/23360

This avoids collisions in general by using an unusual characters. It
also avoids collisions when concatenated with some other ID.
Unfortunately, `:` is not a valid character in `view-transition-name`.

This PR swaps the format from:

```
:r123:
```

To the unicode:

```
«r123»
```

Which is valid CSS selectors. This also allows them being used for
`querySelector()` which we didn't really find a legit use for but seems
ok-ish.

That way you can get a view-transition-name that you can manually
reference. E.g. to generate styles:

```js
const id = useId();
return <>
  <style>{`
    ::view-transition-group(${id}) { ... }
    ::view-transition-old(${id}) { ... }
    ::view-transition-new(${id}) { ... }
  `}</style>
  <ViewTransition name={id}>...</ViewTransition>
</>;
```

DiffTrain build for [2e4db3344f](https://github.com/facebook/react/commit/2e4db3344f030fe622152ecc231a7c99a81a9c9d)

2025-02-25 09:53:58 -08:00

..

facebook-fbsource/xplat/js

Use valid CSS selectors in useId format (#32001)

2025-02-25 09:53:58 -08:00

VERSION_NATIVE_FB

Use valid CSS selectors in useId format (#32001)

2025-02-25 09:53:58 -08:00