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

feat(css): add support for injecting css into custom elements #12206

Closed
wants to merge 1 commit into from

Conversation

sventschui
Copy link
Contributor

@sventschui sventschui commented Feb 26, 2023

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?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

@sventschui sventschui force-pushed the custom-css-container branch 2 times, most recently from fa563d3 to 94b41d9 Compare February 26, 2023 12:33
@sventschui sventschui force-pushed the custom-css-container branch from 94b41d9 to d1cf35e Compare March 6, 2023 15:22
@sventschui
Copy link
Contributor Author

@lukewarlow as you opened a similar PR. Do you need this behaviour also during production builds (i.e. vite build) or only during dev (vite)? For us it is only during dev and making this work for production builds might be much harder. I'd therefore only apply this config for dev builds.

@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?

@Niputi Niputi added feat: css p2-nice-to-have Not breaking anything but nice to have (priority) labels Mar 30, 2023
@lukewarlow
Copy link

lukewarlow commented Mar 30, 2023

I believe we need it in production as well. But even using vite for Dev and Vue CLI still for prod build would improve the experience.


expect(await getColor(linkedOutside)).toBe('red')
expect(await getColor(linkedInside)).toBe('black')
expect(await getColor(importedOutside)).toBe('black')
Copy link
Contributor

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

Copy link
Contributor Author

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.

@lukewarlow
Copy link

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

@patak-dev patak-dev added p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority) and removed p2-nice-to-have Not breaking anything but nice to have (priority) labels Apr 19, 2023
@IamFive
Copy link

IamFive commented Apr 19, 2023

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?
And my case seems more complex, it's run in web extension content script, so program needs to dynamic create root.

  const container = document.createElement("div"); 
  container.id = "some-id-to-indentify-shadow-root"
  document.body.appendChild(container); 

  const shadow = container.attachShadow({ mode: "open" });
  ReactDOMClient.createRoot(shadow).render(app);

@lukewarlow
Copy link

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">&lt;imported&gt;</p>
`

import('./imported.css')
Copy link
Member

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

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.

Copy link

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?

@sventschui
Copy link
Contributor Author

As we worked around this issue I'll close this PR. Anyone is welcome to re-use my work to continue on this.

@sventschui sventschui closed this May 22, 2023
@IamFive
Copy link

IamFive commented Jun 6, 2023

is this feature has been released or any other issue is tracing this issue.
many other similar issues are closed, and maintainers decides to discuss the feature in this thread, but finally this issue is closed without trace?

@hood
Copy link

hood commented Aug 4, 2023

Yes, any news on this? I’m kinda confused on how to obtain the desired behaviour.

@leopsidom
Copy link

Is this still under track ? It seems all related threads have been closed

@hood
Copy link

hood commented Dec 31, 2023

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

@bluwy
Copy link
Member

bluwy commented Jan 2, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority)
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

9 participants