Use valid CSS selectors in useId format

Author: sebmarkbage

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -1553,7 +1553,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('Id');
-    expect(String(tree[0].value).startsWith(':r')).toBe(true);
+    expect(String(tree[0].value).startsWith('\u00ABr')).toBe(true);
 
     expect(normalizeSourceLoc(tree)[1]).toMatchInlineSnapshot(`
       {

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -820,7 +820,7 @@ export function makeId(
 ): string {
   const idPrefix = resumableState.idPrefix;
 
-  let id = ':' + idPrefix + 'R' + treeId;
+  let id = '\u00AB' + idPrefix + 'R' + treeId;
 
   // Unless this is the first id at this level, append a number at the end
   // that represents the position of this useId hook among all the useId
@@ -829,7 +829,7 @@ export function makeId(
     id += 'H' + localId.toString(32);
   }
 
-  return id + ':';
+  return id + '\u00BB';
 }
 
 function encodeHTMLTextNode(text: string): string {

packages/react-dom/src/__tests__/ReactDOMUseId-test.js

@@ -608,10 +608,10 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          :custom-prefix-R1:
+          «custom-prefix-R1»
         </div>
         <div>
-          :custom-prefix-R2:
+          «custom-prefix-R2»
         </div>
       </div>
     `);
@@ -625,13 +625,13 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          :custom-prefix-R1:
+          «custom-prefix-R1»
         </div>
         <div>
-          :custom-prefix-R2:
+          «custom-prefix-R2»
         </div>
         <div>
-          :custom-prefix-r0:
+          «custom-prefix-r0»
         </div>
       </div>
     `);
@@ -672,11 +672,11 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          :R0:
+          «R0»
           <!-- -->
            
           <div>
-            :R7:
+            «R7»
           </div>
         </div>
       </div>
@@ -690,11 +690,11 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          :R0:
+          «R0»
           <!-- -->
            
           <div>
-            :R7:
+            «R7»
           </div>
         </div>
       </div>

packages/react-reconciler/src/ReactFiberHooks.js

@@ -3527,7 +3527,7 @@ function mountId(): string {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = ':' + identifierPrefix + 'R' + treeId;
+    id = '\u00AB' + identifierPrefix + 'R' + treeId;
 
     // Unless this is the first id at this level, append a number at the end
     // that represents the position of this useId hook among all the useId
@@ -3537,11 +3537,16 @@ function mountId(): string {
       id += 'H' + localId.toString(32);
     }
 
-    id += ':';
+    id += '\u00BB';
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
+    id =
+      '\u00AB' +
+      identifierPrefix +
+      'r' +
+      globalClientId.toString(32) +
+      '\u00BB';
   }
 
   hook.memoizedState = id;