Open davestewart opened 1 month ago
Maybe tailwind playground is not doable, but codepen/codesandbox/replit/others would be doable?
I've been thinking through this a bit more, and actually it might just be better to render Tailwind directly in the responsive preview.
See also:
If you know how, I would accept.. But I don't know how.
I think it might be possible using the Play CDN:
For arbitrary rules, a custom config can be created injected (see further down page).
I don't know if it's possible to run inside the Figma environment, but might be an option.
Have also seen some solutions where classes were generated, but it adds about 1.2MB to the size of the CSS. For arbitrary classes (size, color) could probably parse the markup and add styles dynamically.
Another option might be to see how Tailwind Config Viewer does it:
Happy to take a look.
Play cdn won't work because plugin has no internet connection. Could flex that a bit,allow and see if it works well, but I don't know.. What do you think? 1mb is probably too much for Figma. I don't know how to fix this in a good way.
On Sat, Jul 13, 2024, 11:56 Dave Stewart @.***> wrote:
I think it might be possible using the Play CDN:
For arbitrary rules, a custom config can be created injected (see further down page).
I don't know if it's possible to run inside the Figma environment, but might be an option.
Have also seen some solutions where classes were generated, but it adds about 1.2MB to the size of the CSS. For arbitrary classes (size, color) could probably parse the markup and add styles dynamically.
Happy to take a look.
— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2226941479, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFJXFFGD37S4DFEILCLZME5ZTAVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHE2DCNBXHE . You are receiving this because you commented.Message ID: @.***>
I've had a few attempts to make this work and coming up short.
I grabbed the Tailwind 2 CSS from a CDN.
This mainly works, but I know there's a few changes from v2 to v3, esp with colors.
I got Tailwind compiling with JIT via Post CSS in Node, but I can't get it to run in the Figma build env.
Seems to be problems with built-ins like FS which I can't seem to get around, even though I've tried multiple polyfills etc.
Going to pause effort on this for now.
Not tried this yet, but think could be an option to:
packages/backend/node_modules/tailwindcss/stubs/config.full.js
)I think for now – as I need to get back to work – I'm going to pause this, but think it's worth exploring.
If you fancy generating a base set of Tailwind class names (colors, sizes, borders, etc) that you think FigmaToCode can output, I can PR the script above, and we could at least use that as a build step to generate a TW config that we could load into the Plugin UI, as step 1.
Might even be easier to do this with code, seeing as you have a lot of the sizes already mapped.
LMK and I can PR the core code.
Seems the only way is via the web. Thanks for looking trough. Another possibility would somehow be mapping Tailwind colors and attributes to html in a way. But don't worry.
On Mon, Jul 15, 2024, 10:10 Dave Stewart @.***> wrote:
I've had a few attempts to make this work and coming up short. Attempt 1: Grab the Tailwind 2 compiled source
This mainly works, but I know there's a few changes from v2 to v3, esp with colors.
CleanShot.2024-07-15.at.14.07.30.png (view on web) https://github.com/user-attachments/assets/41399694-e693-46e7-9e43-61774b595201 Attempt 2: Compile Tailwind using Post CSS
I got Tailwind compiling with JIT via Post CSS in Node, but I can't get it to run in the Figma build env.
CleanShot.2024-07-15.at.13.51.53.png (view on web) https://github.com/user-attachments/assets/5097c3e1-5523-4959-b3d3-b6f81cac7f15
Seems to be problems with built-ins like FS which I can't seem to get around, even though I've tried multiple polyfills etc.
Going to pause effort on this for now. Attempt 3:
Not tried this yet, but think could be an option to:
- identify the finite classes needed, such as layout, default colours, etc
- leverage Tailwind's default config (see packages/backend/node_modules/tailwindcss/stubs/config.full.js)
- build this set of classes using some of the techniques above
- create additional arbitrary classes (size, colors) on the fly
I think for now – as I need to get back to work – I'm going to pause this, but think it's worth exploring.
— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2228469865, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFPVNCGGXM2NQ7OPKILZMPC2ZAVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRYGQ3DSOBWGU . You are receiving this because you commented.Message ID: @.***>
Check my updated comment above. I think we could successfully leverage Post CSS to build just the classes we're using in F2C.
I liked approach 3 because if we make html output Tailwind colors somehow, then it is very easy. Only code would be potentially ugly.
OK. I propose the PR would look something like this:
Build time:
.preview
, so .preview .bg-red-500 { ... }
Run time:
(text|bg)-\[(.+?)\]
(perhaps you can advise on TW class names)I'm happy to take the Post CSS stuff if you want to take more of the client code?
It looks like additional processing will also be needed for transparent colors too, as not only can /25
not be passed as a token to the compiler, but passing all those transparency variants would balloon the file size.
I think we can get somewhere which will work, but indeed, Tailwind is tricky!
Some additional tweaks needed, but do seem to be getting somewhere:
Yeah, I can help. Whatever you do, make it easy to update, because Tailwind 4 will come one day and it is going to be big.
So, are we kind of reverse-engineering tailwind to output html? Does it add 1mb or not?
So, are we kind of reverse-engineering tailwind to output html
Kind of:
Suspect will need to generate from markup:
Have been tweaking classes in the devtools and it feels way better to be able to toggle TW classes than guess what they might be once they are copied and pasted elsewhere. Not perfect compared to an actual JIT compiler, but feels like it could certainly be better than the HTML stand-in.
FWIW, final-generated classes are:
/**
* Add all combinations of class names
*
* Listed in order of Tailwind docs
*/
function makeClasses() {
// layout
add("block inline-block inline flex inline-flex grid inline-grid hidden"); // https://tailwindcss.com/docs/display
add("static fixed absolute relative"); // https://tailwindcss.com/docs/position
add("top", config.layoutSize); // https://tailwindcss.com/docs/top-right-bottom-left
add("right", config.layoutSize);
add("bottom", config.layoutSize);
add("left", config.layoutSize);
add("start", config.layoutSize);
add("end", config.layoutSize);
// flexbox
add("basis", config.layoutSize); // https://tailwindcss.com/docs/flex-basis
add("flex", "row row-reverse col col-reverse"); // https://tailwindcss.com/docs/flex-direction
add("flex", "wrap"); // https://tailwindcss.com/docs/flex-wrap
add("grow grow-0"); //https://tailwindcss.com/docs/flex-grow
add("shrink shrink-0"); //https://tailwindcss.com/docs/flex-shrink
add("gap", config.layoutSize); // https://tailwindcss.com/docs/gap
add("gap-x", config.layoutSize);
add("gap-y", config.layoutSize);
// flexbox align
add("justify", "normal start end center between around evenly stretch"); // https://tailwindcss.com/docs/justify-content
add("justify-items", "start end center stretch"); // https://tailwindcss.com/docs/justify-items
add("justify-self", "auto start end center stretch"); // https://tailwindcss.com/docs/justify-self
add("content", "normal center start end between around evenly baseline stretch"); // https://tailwindcss.com/docs/align-content
add("items", "start end center baseline stretch"); // https://tailwindcss.com/docs/align-items
add("self", "auto start end center stretch baseline"); // https://tailwindcss.com/docs/align-self
// spacing
add("p", config.layoutSize); // https://tailwindcss.com/docs/padding
add("px", config.layoutSize);
add("py", config.layoutSize);
add("m", config.layoutSize); // https://tailwindcss.com/docs/margin
add("mx", config.layoutSize);
add("my", config.layoutSize);
add("space-x", config.layoutSize); // https://tailwindcss.com/docs/space
add("space-y", config.layoutSize);
// sizing
add("w", config.layoutSize); // https://tailwindcss.com/docs/width
add("min-w", config.layoutSize); // https://tailwindcss.com/docs/min-width
add("max-w", config.layoutSize); // https://tailwindcss.com/docs/max-width
add("h", config.layoutSize); // https://tailwindcss.com/docs/height
add("min-h", config.layoutSize); // https://tailwindcss.com/docs/min-height
add("max-h", config.layoutSize); // https://tailwindcss.com/docs/max-height
add("size", config.layoutSize); // https://tailwindcss.com/docs/size
// typography
add("text", config.fontSize); // https://tailwindcss.com/docs/font-size
add("italic not-italic"); // https://tailwindcss.com/docs/font-style
add("font", config.fontWeight); // https://tailwindcss.com/docs/font-weight
add("tracking", config.letterSpacing); // https://tailwindcss.com/docs/letter-spacing
add("leading", config.lineHeight); // https://tailwindcss.com/docs/line-height
add("text", "left center right justify start end"); // https://tailwindcss.com/docs/text-align
add("text", config.color); // https://tailwindcss.com/docs/text-color
add("uppercase lowercase capitalize normal-case"); // https://tailwindcss.com/docs/text-transform
add("text", "wrap nowrap balance pretty"); // https://tailwindcss.com/docs/text-wrap
add("align", "top middle bottom"); // https://tailwindcss.com/docs/vertical-align
// backgrounds
add("bg", config.color); // https://tailwindcss.com/docs/background-color
// borders
add("rounded", config.borderRadius); // https://tailwindcss.com/docs/border-radius
add("border", " 0 2 4 8"); // https://tailwindcss.com/docs/border-width
add("border", config.color); // https://tailwindcss.com/docs/border-color
add("border", "solid dashed dotted double hidden none"); // https://tailwindcss.com/docs/border-style
// effects
add("shadow", config.shadow); // https://tailwindcss.com/docs/box-shadow
add("shadow", config.color); // https://tailwindcss.com/docs/box-shadow-color
add("opacity", config.opacity); //https://tailwindcss.com/docs/opacity
// filters
add("blur", config.blur); // https://tailwindcss.com/docs/blur
}
This basically generates custom @apply
classes which are then extracted and renamed as per the original TW classes and output as a CSS file:
#preview .border-slate-950 {
--tw-border-opacity: 1;
border-color: rgb(2 6 23 / var(--tw-border-opacity));
}
#preview .border-gray-50 {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
...
#preview .px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
#preview .px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
#preview .px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
...
Does it add 1mb or not?
178K at the mo, which is manageable.
it is going to be big
Big, in what way?
Morning update...
Tailwind classes:
tailwindConfig.ts
file using values (though, hardcoded is still fine)Preview generation:
w h p m px py mx my gap
) workingHere's how it's looking right now (outline just for debugging purposes):
Next steps:
Looks fantastic. Do you need any help?
On Tue, Jul 16, 2024, 09:15 Dave Stewart @.***> wrote:
Morning update...
Tailwind classes:
- have added all supported TW classes; TW size is now 178K
- could potentially output as JSON, and just add classes as needed (vs adding the whole stylesheet)
Preview generation:
- am successfully sending TW to preview from backend
- have arbitrary colors, opacities and sizes (w h p m px py mx my gap) working
Here's how it's looking right now (outline just for debugging purposes):
CleanShot.2024-07-16.at.13.13.04.png (view on web) https://github.com/user-attachments/assets/1515e636-483a-46e4-8d17-4319752667cb
— Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/114#issuecomment-2230741013, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFJE6MZ7DEBACB4G6GTZMUFF5AVCNFSM6AAAAABKVMLLLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZQG42DCMBRGM . You are receiving this because you commented.Message ID: @.***>
Probably for QA!
Also, hoping to get all three over the line ASAP. How are you fixed for reviews in the next day or so?
And, would be great to get the various updates published sooner rather than later so my team can use them.
Question regarding left and top values.
In the tailwind builder, size
values pass through the conversion tables / rounding function, but position
values do not.
Just checking that this is intentional?
(I wonder if at some point in the future there might be more granular control over which properties get rounded).
OK, so FINALLY got all the flexbox layout code working, along with the new Tailwind renderer, and updated preview renderer:
It's pretty cool; the new renderer now shows real Tailwind, with the rounding of sizes, colors, as well as user colors (variables).
The reason why user colors are showing as stripes above, is because I'm working to add Figma's codeSyntax
property, which will mean we won't have to fall back to deriving TW names names from variable names, the user will be able to specify them in the UI:
Overall... very nearly there!
Amazing!
In the tailwind builder, size values pass through the conversion tables / rounding function, but position values do not.
I don't know lol I think it wasn't intentional, but maybe I found it easier that way, because you have top-4 left-[17px]
, quickly becomes weird, could be that.. I don't remember. Feel free to fix it!
Edit: oh, I think I know. There wasn't top-[17px]
before, so it was too much work to switch between JSX and Tailwind, I simplified.
With the initial work on variables done, I'll look to implement them for numbers soon, then the choice to use exact values or rounded values can be chosen per-property.
I was wondering if it was possible to open Tailwind code in Tailwind Playground
Whilst not possible to do directly, a simple Chrome extension could act as a bridge.
The steps would be as follows:
MAIN
execution context:Have done a quick experiment, and the code does set the Tailwind Playground code, would just have to confirm the extension could access the
MonacoEditor
global.