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

#69058) * iAPI Router: Fix CSS rule order in some constructed style sheets (#68923) * Add failing test * Place CSS rules in order Co-authored-by: DAreRodz <[email protected]> Co-authored-by: luisherranz <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: SainathPoojary <[email protected]> Co-authored-by: sethrubenstein <[email protected]> * Plugin: Remove ESLint rule for deprecated functions (#68590) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: fabiankaegy <[email protected]> * e2e:fix WP Editor Meta Boxes test (#68872) Co-authored-by: t-hamano <[email protected]> --------- Co-authored-by: David Arenas <[email protected]> Co-authored-by: DAreRodz <[email protected]> Co-authored-by: luisherranz <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: SainathPoojary <[email protected]> Co-authored-by: sethrubenstein <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 6, 2025 · dbce6ab · dbce6ab
1 parent ed37876
commit dbce6ab
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git 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
@@ -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/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
@@ -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 );
+	} );
 } );