-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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
feat(css): add support for injecting css into custom elements #12206
Conversation
fa563d3
to
94b41d9
Compare
94b41d9
to
d1cf35e
Compare
@lukewarlow as you opened a similar PR. Do you need this behaviour also during production builds (i.e. @patak-dev as you commented on my other discussions/PRs, would you mind giving me an indication whether this would be feasible to land or whether I need to look for a solution outside of vite? |
|
|
||
expect(await getColor(linkedOutside)).toBe('red') | ||
expect(await getColor(linkedInside)).toBe('black') | ||
expect(await getColor(importedOutside)).toBe('black') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All of the tests are failing on this line
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
They fail for production mode which is not in our scope. One would need to find another way for production mode support. As we worked around this issue I'll close this PR. Anyone is welcome to re-use my work to continue on this.
Having looked into it further my original PR only added it for dev so I don't think we need it for prod so this probably does address our use case. @sventschui |
I am courious why you only need this for dev. how you manage this case for prod env?
|
I've just found my original work on the project where we needed this and the reason we only need it for dev is that for production there's a way to get this behaviour by using a Vite plugin with the generateBundle hook injecting the necessary code. The work was never completed so its possible this would have caused issues with the CSS being injected twice I'm not sure. So while it'd be nice if this functionality worked in both prod and dev, dev was the only place that I think we needed it for our use case. My understanding of vite is far from complete so it may even be that we could get our plugin to work nicely in dev too but I believe HMR and the fact this plugin hook doesn't run on a dev build was why I made the original PR. |
<p class="imported inside"><imported></p> | ||
` | ||
|
||
import('./imported.css') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure about this feature to "alternate" the import
globally. Also it does not seem to be flexible when you have multiple shadow roots.
Wondering why you want to do it this implicit way, instead of appending the CSS manually with ?inline
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
?inline can't be applied (as far as I'm aware) to styles within Vue SFCs. Which is my use case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@antfu does ?inline works for css imported by 3rd party lib?
As we worked around this issue I'll close this PR. Anyone is welcome to re-use my work to continue on this. |
is this feature has been released or any other issue is tracing this issue. |
Yes, any news on this? I’m kinda confused on how to obtain the desired behaviour. |
Is this still under track ? It seems all related threads have been closed |
I’ve made this Vite plug-in, which fits my needs for injecting my css into webcomponents’ shadow doms: https://github.com/hood/vite-plugin-shadow-style |
The feature request is still open at #11855, it's also on the team discussion board, but we haven't got to discussing it yet. |
Description
Add support to inject CSS style tags into custom elements.
This is based on #4821
Closes: #4821
Additional context
In our microfrontend framework we're rendering our apps into custom elements. In order to migrate from webpack to vite we need a mechanism similar to style-loader's insert option (https://webpack.js.org/loaders/style-loader/#insert) to inject styles into these custom elements.
What is the purpose of this pull request?
Before submitting the PR, please make sure you do the following
fixes #123
).