Description

The new iAPI router dynamic css loading has one major issue. When using CSSStyleSheet to regenerate styles, something is happening with the order of rules and how browsers are reading them.

Step-by-step reproduction instructions

1. Enable iAPI in core/query block loop. Or any block that supports iAPI routing on a page.
2. Place a core/social-links block set to small logos only add some icons.
3. Go to your page with the iAPI core/query block and navigate to another page of results using the iAPI router.
4. Observe the padding change on the core/social-links block as the styles are re-generated.

Screenshots, screen recording, code snippet

Environment info

• WP 6.7
• Gutenberg 20
• Demo video is via WP Playground

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure