onlook
onlook copied to clipboard
[FEAT] Support write CSS to code
Describe the feature
We should handle CSS for the non-tailwind users. We already write stylesheets into the webviewtag. It's just a matter of swapping out the selectors with something human-readable and assigning it to the element.
Instead of translating from Tailwind to CSS, we would process the stylesheet:
- Replace CSS selector with a readable generated name
- Insert the new CSS selector into the element in code
- Write the stylesheet into file
For where the stylesheet should live, there are a few options:
- Have users specify a style sheet
- Create an onlook.css that gets imported everywhere
- Create a new stylesheet for each file
Optional:
Consider how to toggle between tailwind and CSS:
- Based on project's config (if tailwind.config.js|mjs is detected)
- Toggle on the write-to-code popup