iAPI Router: Fix CSS rule order in some constructed style sheets (#68923

) * Add failing test * Place CSS rules in order Co-authored-by: DAreRodz <darerodz@git.wordpress.org> Co-authored-by: luisherranz <luisherranz@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org> Co-authored-by: sethrubenstein <smrubenstein@git.wordpress.org>
WordPress · Jan 29, 2025 · 4aad5e3 · 4aad5e3
1 parent 266c11b
commit 4aad5e3
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/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 ) : ?>

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css b/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);
+}
diff --git a/packages/interactivity-router/src/assets/styles.ts b/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 );
 		} );

diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/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 );
+	} );
 } );