vercel.com observed a bug where a stylesheet hoisted using a `precedence` was reordered after an update. This is not correct semantics (once a hoisted stylesheet is inserted it should remain in place until removed)

Investigating the React implementation I observed that if you insert a hoisted stylesheet during a synchronous render and later render a new reference to that stylesheet in a transition React incorrectly considers the stylesheet not loaded and tries to coordinate it's loading the the commit. This is erroneous as once a stylesheet is in the DOM it should never be re-inserted (moved).
precedence="default"
              onLoad={() => {}}
              onError={() => {}}
            />
          </body>
        </html>,
      );
      await expect(async () => {
        await waitForAll([]);
      }).toErrorDev([
        'React encountered a <link rel="stylesheet" href="foo" ... /> with a `precedence` prop that also included the `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
      ]);
    });
    
    it('will not block displaying a Suspense boundary on a stylesheet with media that does not match', async () => {
      await act(() => {
        renderToPipeableStream(
          <html>
            <body>
              <Suspense fallback="loading...">
                <BlockedOn value="block">
                  foo
                  <link
                    rel="stylesheet"
                    href="print"
                    media="print"
                    precedence="print"
                  />
                  <link
                    rel="stylesheet"