Vite build Puck V 0.14.0 not showing correct css for dropzones among other classes

[agustin9998]

The first thing to appreciate is all of your work on this great library.

I have an application in Vite and when building it, some CSS classes such as the dropzone ones do not get applied correctly. When running in development mode I have no problems at all. This is a screenshot of the Preview component in development mode compared to building the application.

Dev mode:

Build:

[chrisvxd]

Thanks @agustin9998! Would you be able to share an example repo that reproduces this issue?

[agustin9998]

@chrisvxd I will create a demo repo when I have time later today or tomorrow, I was able to fix it though and I think I figured what was going on.

Vite differently from WebPack creates CSS files and imports them via <style> tag via HTML, as the Puck Preview uses an iframe, it is incapable of using this CSS imported via HTML. I installed this library so that it just injects the CSS into JS files when building.

This isn't an ideal solution since I'm handicapping a Vite feature, but I'm okay with it for now.

[chrisvxd]

Hm that's not ideal. You can always opt out of iframes with iframe={{ enabled: false }} if they're not working for you.

I wonder if this might also help once implemented: #409

[agustin9998]

@chrisvxd That worked! And it's by far a cleaner solution.

Besides Viewports, I don't see any real advantage of the Iframe right?

Thanks for the solution.

[agustin9998]

About #409, I like option 2 the most, even though I like specifics on the 3 better, (e.g being able to create a URL for the imported styles an passing them to the Puck component, without creating a style tag). This could be a problem when wanting to import multiple URLs ?

Just my humble thought.

[chrisvxd]

If you don't need viewports, you might want to use iframes for better style isolation. But if that's not a concern, feel free to disable it!

We suspect the majority of Puck users do want viewport support, so decided to enable it by default.

And thanks for suggestions on #409! I think I'm leaning towards option 2, as well.