Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style isolation #923

Merged
merged 44 commits into from
Oct 10, 2024
Merged

Style isolation #923

merged 44 commits into from
Oct 10, 2024

Conversation

eritbh
Copy link
Member

@eritbh eritbh commented Mar 29, 2024

Extremely WIP branch, just putting something up here to get on the board and have something to reference in the release notes of v7.0.0-beta.2

Pulls in rollup-plugin-postcss which lets us use CSS modules for our style code. Also modifies our React rendering helper to put all React content in shadow roots which are isolated from page styles. This prevents the page from interacting with Toolbox's UI styles at all, which means we don't have to worry about Naut compatibility of our CSS or working around environment differences between frontends nearly as much. In particular this will make it actually reasonable to get Toolbox running in Shreddit, since its CSS is significantly different than old or new Reddit's.

This has the direct impact of preventing subreddit stylesheets on old Reddit from interacting with Toolbox UI, which is good for Naut-related reasons but also kinda sucks because I've seen some people do really neat stuff to our buttons that way. I think it's a trade-off that's necessary for us to make now that we're supporting so many different frontends though.

The other downside of this method is that we basically have to incrementally rewrite all the CSS in the extension as it moves to React and .module.css files. This just means that styles for some common controls which exist in both jQuery-backed and React-backed forms will be duplicated for now, and that I have a lot of effort to put into this before it will be done.

@eritbh eritbh added enhancement New feature or request code quality labels Mar 29, 2024
@eritbh eritbh added this to the v7 milestone Mar 29, 2024
@eritbh
Copy link
Member Author

eritbh commented Mar 29, 2024

#914 moved modnotes window rendering into a portal to document.body so it's actually no longer being rendered in shadow DOM at all - need to fix this, probably with a helper function for creating portals into shadow roots hosted by div children of document.body

@eritbh eritbh force-pushed the chore/style-isolation branch 4 times, most recently from 81dbe75 to e573b35 Compare September 5, 2024 06:29
@eritbh
Copy link
Member Author

eritbh commented Sep 5, 2024

this is actually working reasonably well?? currently shouldn't be merged because i still need to style a couple more components used in modnotes, but once that looks the same as it did pre-this i think we just merge this and add this to the list of slow ongoing projects that are happening concurrently on master

@eritbh
Copy link
Member Author

eritbh commented Oct 10, 2024

Marking this as ready-to-review now - the modnotes module, the textFeedback toast, and in-page notifications are all fully working with component-scoped styles now. guess all we have to do now is rework the entire rest of the extension to work like that :v

will merge after some more testing and getting out some other small stuff i've been sitting on probably. excited for this to hit the beta channel

@eritbh eritbh marked this pull request as ready for review October 10, 2024 22:05
@eritbh
Copy link
Member Author

eritbh commented Oct 10, 2024

fuck it we ball

@eritbh eritbh merged commit e2d3bd3 into master Oct 10, 2024
3 checks passed
@eritbh eritbh deleted the chore/style-isolation branch October 10, 2024 23:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
code quality enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant