From dbce6ab23c756fa582abd95d8aeb8ba4711a9b43 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com>
Date: Thu, 6 Feb 2025 10:31:12 +0100
Subject: [PATCH] =?UTF-8?q?iAPI=20Router:=20Fix=20CSS=20rule=20order=20in?=
 =?UTF-8?q?=20some=20constructed=20style=20sheets=20(#68=E2=80=A6=20(#6905?=
 =?UTF-8?q?8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>

* Plugin: Remove ESLint rule for deprecated functions (#68590)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

* e2e:fix WP Editor Meta Boxes test (#68872)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>

---------

Co-authored-by: David Arenas <david.arenas@automattic.com>
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>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .eslintrc.js                                  | 23 ---------------
 .../router-styles-wrapper/render.php          | 17 +++++++++++
 .../router-styles-wrapper/style-from-link.css |  7 +++++
 .../interactivity-router/src/assets/styles.ts |  5 ++--
 .../editor/plugins/wp-editor-meta-box.spec.js |  2 +-
 .../specs/interactivity/router-styles.spec.ts | 29 +++++++++++++++++++
 6 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css

diff --git a/.eslintrc.js b/.eslintrc.js
index e5f42eea656b9..6626a55a762d1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,21 +4,6 @@
 const glob = require( 'glob' ).sync;
 const { join } = require( 'path' );
 
-/**
- * Internal dependencies
- */
-const { version } = require( './package' );
-
-/**
- * Regular expression string matching a SemVer string with equal major/minor to
- * the current package version. Used in identifying deprecations.
- *
- * @type {string}
- */
-const majorMinorRegExp =
-	version.replace( /\.\d+$/, '' ).replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' ) +
-	'(\\.\\d+)?';
-
 /**
  * The list of patterns matching files used only for development purposes.
  *
@@ -92,14 +77,6 @@ const restrictedSyntax = [
 			'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
 		message: 'Path access on WordPress dependencies is not allowed.',
 	},
-	{
-		selector:
-			'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
-			majorMinorRegExp +
-			'/]',
-		message:
-			'Deprecated functions must be removed before releasing this version.',
-	},
 	{
 		selector:
 			'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
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
index 6373e8e9bc235..683db9eea5c4c 100644
--- 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
new file mode 100644
index 0000000000000..5cf5b34914ee8
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index ddb41eabc7a75..967bed5bb376d 100644
--- 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/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
index c5eafdafe918d..86c08fe1cd43e 100644
--- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -27,7 +27,7 @@ test.describe( 'WP Editor Meta Boxes', () => {
 		// Switch tinymce to Text mode, first waiting for it to initialize
 		// because otherwise it will flip back to Visual mode once initialized.
 		await page.locator( '#test_tinymce_id_ifr' ).waitFor();
-		await page.locator( 'role=button[name="Text"i]' ).click();
+		await page.locator( 'role=button[name="Code"i]' ).click();
 
 		// Type something in the tinymce Text mode textarea.
 		const metaBoxField = page.locator( '#test_tinymce_id' );
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index 7bc575af37816..c154b5d432d7b 100644
--- 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 );
+	} );
 } );