Reapply "iAPI Router: Fix CSS rule order in some constructed style sheets (WordPress#68923)"

This reverts commit a53bb20.

Author: DAreRodz

packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php

@@ -7,6 +7,17 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'wrapper-styles-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+	}
+);
+
 $wrapper_attributes = get_block_wrapper_attributes();
 ?>
 <div <?php echo $wrapper_attributes; ?>>
@@ -38,6 +49,12 @@
 		<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
 	</fieldset>
 
+	<!-- This one should remain green after navigation. -->
+	<fieldset>
+		<legend>Rule order checker</legend>
+		<p data-testid="order-checker" class="order-checker">I should remain green</p>
+	</fieldset>
+
 	<!-- Links to pages with different blocks combination. -->
 	<nav data-wp-interactive="test/router-styles">
 		<?php foreach ( $attributes['links'] as $label => $link ) : ?>

packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css

@@ -0,0 +1,7 @@
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(255, 0, 0);
+}
+
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(0, 255, 0);
+}

packages/interactivity-router/src/assets/styles.ts

@@ -41,8 +41,9 @@ const sheetFromLink = async (
 	if ( elementSheet ) {
 		return getCachedSheet( sheetId, () => {
 			const sheet = new CSSStyleSheet();
-			for ( const { cssText } of elementSheet.cssRules ) {
-				sheet.insertRule( withAbsoluteUrls( cssText, sheetUrl ) );
+			for ( let i = 0; i < elementSheet.cssRules.length; i++ ) {
+				const { cssText } = elementSheet.cssRules[ i ];
+				sheet.insertRule( withAbsoluteUrls( cssText, sheetUrl ), i );
 			}
 			return Promise.resolve( sheet );
 		} );

test/e2e/specs/interactivity/router-styles.spec.ts

@@ -229,4 +229,33 @@ test.describe( 'Router styles', () => {
 		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
 		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
 	} );
+
+	test( 'should preserve rule order from referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const orderChecker = page.getByTestId( 'order-checker' );
+
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+	} );
 } );