Unified Styles API #3153
Open
Unified Styles API #3153
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…, replace style names with style objects
Vendicated
reviewed
Jan 19, 2025
| @@ -276,7 +276,7 @@ export const stylePlugin = { | |||
| name: "style-plugin", | |||
| setup: ({ onResolve, onLoad }) => { | |||
| onResolve({ filter: /\.css\?managed$/, namespace: "file" }, ({ path, resolveDir }) => ({ | |||
| path: relative(process.cwd(), join(resolveDir, path.replace("?managed", ""))), | |||
| path: relative(process.cwd(), join(resolveDir, path.replace(/\?managed$/, ""))), | |||
There was a problem hiding this comment.
in this current state, yes it's unnecessary
i was just working on adding enabled by default styles, would there be ANY usecase for that?
There was a problem hiding this comment.
idc about the styles being enabled idea anymore, should this just be left as a string
Vendicated
reviewed
Jan 19, 2025
…enableStyle/disableStyle in start/stop
Sqaaakoi
force-pushed
the
managed-styles-rewrite
branch
from
8d15983 to
330532c
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Converts the managed styles API to be a unified API for all styles
The problem
Vencord does not inject styles into popout windows.
Additionally, plugins that create their own styles at runtime contain a lot of (ugly) code to add these styles.
How this solves the problem
Almost every call to
document.createElement("style")1 is replaced with the unified styles API.This API should be considered the single source of truth regarding stylesheets for everything from now on.
The underlying data structure for "managed styles" has been changed to not store references to DOM
<style>elements.Instead, DOM elements are looked up in all available documents (current document and popouts) when necessary.
When a popout is created, all enabled styles are injected to that document.
Please note that there is no "style updated" event system implemented into this API.
How to use it
The major functions that should be commonly used are
createStyle2,deleteStyle, andsetStyle. The existingenableStyleanddisableStylecan still be used for managed styles.I am aware that there's still a decent amount of out-of-date documentation in the code, and some things should be renamed or moved around. Please do provide feedback on this.
Some code was taken from #3080 (thank you @Masterjoona for originally developing code for CSS in popouts)
Footnotes
Not used in YoutubeAdblock or ShikiCodeblocks, though the code in ShikiCodeblocks looks redundant. ↩
createStyleis also used to update styles ↩