useCompatibilityStyles: clarify how dependencies related to inline st…

…yles work (#51199)

packages/block-editor/src/components/iframe/use-compatibility-styles.js

@@ -72,23 +72,40 @@ export function useCompatibilityStyles() {
 				if ( matchFromRules( cssRules ) ) {
 					const isInline = ownerNode.tagName === 'STYLE';
 
-					// Add inline styles belonging to the stylesheet.
-					const inlineCssId = ownerNode.id.replace(
-						isInline ? '-inline-css' : '-css',
-						isInline ? '-css' : '-inline-css'
-					);
-					const otherElement = document.getElementById( inlineCssId );
-
-					// If the matched stylesheet is inline, add the main
-					// stylesheet before the inline style element.
-					if ( otherElement && isInline ) {
-						accumulator.push( otherElement.cloneNode( true ) );
+					if ( isInline ) {
+						// If the current target is inline,
+						// it could be a dependency of an existing stylesheet.
+						// Look for that dependency and add it BEFORE the current target.
+						const mainStylesCssId = ownerNode.id.replace(
+							'-inline-css',
+							'-css'
+						);
+						const mainStylesElement =
+							document.getElementById( mainStylesCssId );
+						if ( mainStylesElement ) {
+							accumulator.push(
+								mainStylesElement.cloneNode( true )
+							);
+						}
 					}
 
 					accumulator.push( ownerNode.cloneNode( true ) );
 
-					if ( otherElement && ! isInline ) {
-						accumulator.push( otherElement.cloneNode( true ) );
+					if ( ! isInline ) {
+						// If the current target is not inline,
+						// we still look for inline styles that could be relevant for the current target.
+						// If they exist, add them AFTER the current target.
+						const inlineStylesCssId = ownerNode.id.replace(
+							'-css',
+							'-inline-css'
+						);
+						const inlineStylesElement =
+							document.getElementById( inlineStylesCssId );
+						if ( inlineStylesElement ) {
+							accumulator.push(
+								inlineStylesElement.cloneNode( true )
+							);
+						}
 					}
 				}