experimental: paste tailwind (#5217)

Ref #2651

Added "Paste Html With Tailwind Classes" command.

For now only tailwind 3 is supported.
Also fixed a few issues with css parser.


<img width="547" alt="Screenshot 2025-05-18 at 00 38 01"
src="https://github.com/user-attachments/assets/470b63e0-9b17-4769-8a65-679b90d73a89"
/>

Author: TrySound

apps/builder/app/builder/shared/commands.ts

@@ -25,6 +25,7 @@ import {
 import {
   deleteInstanceMutable,
   extractWebstudioFragment,
+  insertWebstudioFragmentAt,
   insertWebstudioFragmentCopy,
   updateWebstudioData,
 } from "~/shared/instance-utils";
@@ -48,6 +49,8 @@ import {
   isRichTextContent,
   isTreeSatisfyingContentModel,
 } from "~/shared/content-model";
+import { generateFragmentFromHtml } from "~/shared/html";
+import { generateFragmentFromTailwind } from "~/shared/tailwind/tailwind";
 
 export const $styleSourceInputElement = atom<HTMLInputElement | undefined>();
 
@@ -519,6 +522,16 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       handler: () => unwrap(),
     },
 
+    {
+      name: "pasteHtmlWithTailwindClasses",
+      handler: async () => {
+        const html = await navigator.clipboard.readText();
+        let fragment = generateFragmentFromHtml(html);
+        fragment = await generateFragmentFromTailwind(fragment);
+        return insertWebstudioFragmentAt(fragment);
+      },
+    },
+
     // history
 
     {

apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts

@@ -5,7 +5,7 @@ describe("parseStyleInput", () => {
   test("parses custom property", () => {
     const result = parseStyleInput("--custom-color");
     expect(result).toEqual(
-      new Map([["--custom-color", { type: "keyword", value: "unset" }]])
+      new Map([["--custom-color", { type: "unparsed", value: "" }]])
     );
   });
 
@@ -43,7 +43,7 @@ describe("parseStyleInput", () => {
   test("converts unknown property to custom property assuming user forgot to add --", () => {
     const result = parseStyleInput("notaproperty");
     expect(result).toEqual(
-      new Map([["--notaproperty", { type: "keyword", value: "unset" }]])
+      new Map([["--notaproperty", { type: "unparsed", value: "" }]])
     );
   });
 

apps/builder/app/shared/html.test.tsx

@@ -223,15 +223,20 @@ test("generate style attribute as local styles", () => {
   );
 });
 
-test("paste svg as html embed", () => {
+test("optionally paste svg as html embed", () => {
   expect(
-    generateFragmentFromHtml(`
-      <div>
-        <svg viewBox="0 0 20 20">
-          <rect x="5" y="5" width="10" height="10" />
-        </svg>
-      </div>
-    `)
+    generateFragmentFromHtml(
+      `
+        <div>
+          <svg viewBox="0 0 20 20">
+            <rect x="5" y="5" width="10" height="10" />
+          </svg>
+        </div>
+      `,
+      {
+        unknownTags: true,
+      }
+    )
   ).toEqual(
     renderTemplate(
       <ws.element ws:tag="div">

apps/builder/app/shared/html.ts

@@ -71,7 +71,10 @@ const findContentTags = (element: ElementNode, tags = new Set<string>()) => {
   return tags;
 };
 
-export const generateFragmentFromHtml = (html: string): WebstudioFragment => {
+export const generateFragmentFromHtml = (
+  html: string,
+  options?: { unknownTags?: boolean }
+): WebstudioFragment => {
   const attributeTypes = getAttributeTypes();
   const instances = new Map<Instance["id"], Instance>();
   const styleSourceSelections: StyleSourceSelection[] = [];
@@ -112,7 +115,11 @@ export const generateFragmentFromHtml = (html: string): WebstudioFragment => {
   };
 
   const convertElementToInstance = (node: ElementNode) => {
-    if (node.tagName === "svg" && node.sourceCodeLocation) {
+    if (
+      node.tagName === "svg" &&
+      node.sourceCodeLocation &&
+      options?.unknownTags
+    ) {
       const { startCol, startOffset, endOffset } = node.sourceCodeLocation;
       const indent = startCol - 1;
       const htmlFragment = html

apps/builder/app/shared/style-object-model.test.tsx

@@ -517,6 +517,35 @@ test("support custom properties in unparsed values", () => {
   });
 });
 
+test("support empty custom properties", () => {
+  const model = createModel({
+    css: `
+      bodyLocal {
+        --inset: ;
+        box-shadow: var(--inset) red;
+      }
+    `,
+    jsx: <$.Body ws:id="body" class="bodyLocal"></$.Body>,
+  });
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector: ["body"],
+      property: "--inset",
+    }).computedValue
+  ).toEqual({ type: "unparsed", value: "" });
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector: ["body"],
+      property: "box-shadow",
+    }).computedValue
+  ).toEqual({
+    type: "layers",
+    value: [{ type: "unparsed", value: "red" }],
+  });
+});
+
 test("use fallback value when custom property does not exist", () => {
   const model = createModel({
     css: `