ruby gull
heyo @viral mesa , its me again - the guy who kept bugging about support for iframes haha. Finally had some time to get back to side project and im looking at docs - seems like alot of progress made with iframe release.
Did the style injection proposal ever become part of the API? recommendations on loading scripts (both inline & CDNs) as well as inline css? IE: my prev use case for using tailwind play + inline css with type = "text/tailwindcss"
Assuming i want to work with custom interfaces, im guessing I should just throw an ID prop on Puck.Preview and use js to load in styles & scripts?
Or is there a props config that makes this easier
viral mesa
Hey @ruby gull! Sure I remember. You might be able to get away with using a selector, but I was planning to add an additional API for this
ruby gull
ok awesome, and yea i read this but wasnt sure if any of it made it to the API yet.
So for now, youre advising to handle iframe content injection programmatically, yea?
@viral mesa - I left feedback.
Also, I'd be down to possibly contribute a tailwind plugin for this - for folks (like myself) who need tw JIT at runtime, isolated styles from the main app (which may also being use tailwind) & css export functionality.
Lmk if you think that would be valuable. Im going to start implementing it now on my own project
stable granite
I've got this working currently on my app, but not isolated from the main app.
ruby gull
@stable granite yea i was just about to say, it looks like the puck internal iframe component is autoloading styles from the app. All of the next.js layout css gets injected in there too which is not ideal
stable granite
I'll post a link to the relevant code a bit later (not at my PC are moment)
I'm also using the CDN tailwind in the editor, and then I have an additional build step that extracts the classes from the database
ruby gull
okay cool ! wondering if @viral mesa has any thoughts here. ideally we wouldnt inject app-scoped styles into the frame by default (except for the puck.css which is needed)
@stable granite so youre saving to database first, and then extracting tailwind classes?
stable granite
Yes, although it's not well supported by tailwind so there's a bit of a hack to get the build step to work.
I want to be able to edit the classname in puck. For most use cases you're definitely better having the classnames defined in your components and letting tailwind do it's thing.
ruby gull
I may end up using a different approach by repurposing my tw plugin from a previous page builder i was hacking on.
If you inject the tailwind PLAY CDN in the frame, im pretty sure the script's JIT transpiler automatically generates the CSS directly inside of a designated style tag in iframe document.
I may be oversimplifying but im pretty sure you can just grab the innerHTML of that style tag
With the play CDN, you can add/remove classes at runtime as component props
I can give you that code too if youre interested in exploring that approach
stable granite
So I have these components:
https://github.com/Tohuhono/Oberon/blob/main/packages/ui/src/theme/dynamic-tailwind.tsx
Which I used in the editor / preview config root:
https://github.com/Tohuhono/Oberon/blob/main/oberoncms/core/src/editor.tsx
Most of the code in the first is concerned with propagating dark mode.
The observer approach could be used to propagate the tailwind config if that's a requirement.
Because preview doesn't use an iframe, my preference would be to propogate the css by default rather than using the iframe boundary to scope the css (tailwind or otherwise).
For example you can use tailwind config {prefix} to scope the 'puck' and 'content' configs.
stable granite
I may end up using a different approach by repurposing my tw plugin from a previ...
I'd be interested in your tw plugin approach if it's source available?
ruby gull
@viral mesa - I'm considering opening a PR for style injection + the ability to isolate app styles from iframe styles.
viral mesa
Oh awesome. I haven’t done anything on it yet. Which proposal are you implementing?
ruby gull
@viral mesa I was thinking of contributing to the open issue you had for "style injection".
which ended up sparking the discussion in this thread around using tailwind lol