CSS style sheets for embedded form not inherited from the parent document

[twschiller]

Describe the bug

• https://pixiebrix.slack.com/archives/C0436P48QHY/p1714060287364699

To Reproduce

Steps to reproduce the behavior:

1. Create a document with a theme CSS, e.g., https://pixiebrix-public-stylesheets.s3.us-east-2.amazonaws.com/pixiebrix/snippet-manager.css?versionId=bdX2jLRU2EH54uG3uLEOm28vuOl0Ny5R
2. Add a form

I also created a mod here we can use for testing: @pixies/testing/panel-theme

Actual behavior

Theme CSS is not applied to the form

Expected behavior

Theme should be applied to the form

Screenshots/Loom

Workaround

• Repeat the stylesheet in the Theme for the form

Desktop (please complete the following information):

• Extension Version: 1.8.13-beta.5-mv3

Discussion

• I think CSS behavior would be a good use of Playwright visual snapshot testing, so we can detect unintentional changes in rendering

Testing

• I created a mod here we can use for testing: @pixies/testing/panel-theme

Investigation

• Looks like the code was accidentally removed: https://pixiebrix.slack.com/archives/C0436P48QHY/p1714061651271019?thread_ts=1714060287.364699&cid=C0436P48QHY
• Likely related to the IsolatedComponent work? Either the fix or the original work: #8320: prevent IsolatedComponent and brick renderers from recreating components #8325

[twschiller]

@mnholtz if we don't want to use VRT for testing, could potentially use CSS classes with isVisible assertion to check if the CSS was applied correctly? (By playing around with display: none)?

[mnholtz]

(By playing around with display: none)?

That's a great idea, I'll probably take that approach for now. Want to have a dedicated VRT discussion/ticket.

[twschiller]

@mnholtz Actually, it looks like Playwright has support for asserting computed styles: https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-css

So you can use @pixies/testing/panel-theme as-is and assert the font color