onlook icon indicating copy to clipboard operation
onlook copied to clipboard

[FEAT] Support write CSS to code

Open Kitenite opened this issue 7 months ago • 0 comments

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:

  1. Replace CSS selector with a readable generated name
  2. Insert the new CSS selector into the element in code
  3. Write the stylesheet into file

For where the stylesheet should live, there are a few options:

  1. Have users specify a style sheet
  2. Create an onlook.css that gets imported everywhere
  3. Create a new stylesheet for each file

Optional:

Consider how to toggle between tailwind and CSS:

  1. Based on project's config (if tailwind.config.js|mjs is detected)
  2. Toggle on the write-to-code popup

Kitenite avatar Jul 16 '24 20:07 Kitenite