feat: add element component (#5231)

Ref #3632

Here unflagged element component in components panel and html paste.

Additionally

- migrate link template to html element
- added :local-link state to links which is replaced with
[aria-current=page] when css is generated, sadly not yet supported in
any browser
- migrated many templates from legacy components to html elements
- put tailwind paste behind flag

Author: TrySound

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -39,6 +39,7 @@ import {
 } from "~/shared/nano-states";
 import {
   getComponentTemplateData,
+  insertWebstudioElementAt,
   insertWebstudioFragmentAt,
 } from "~/shared/instance-utils";
 import { humanizeString } from "~/shared/string-utils";
@@ -165,9 +166,6 @@ const $componentOptions = computed(
       ) {
         continue;
       }
-      if (isFeatureEnabled("element") === false && name === elementComponent) {
-        continue;
-      }
 
       const componentMeta = metas.get(name);
       const label =
@@ -207,9 +205,13 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
             value={component}
             onSelect={() => {
               closeCommandPanel();
-              const fragment = getComponentTemplateData(component);
-              if (fragment) {
-                insertWebstudioFragmentAt(fragment);
+              if (component === elementComponent) {
+                insertWebstudioElementAt();
+              } else {
+                const fragment = getComponentTemplateData(component);
+                if (fragment) {
+                  insertWebstudioFragmentAt(fragment);
+                }
               }
             }}
           >

apps/builder/app/builder/features/components/components.tsx

@@ -101,9 +101,6 @@ const $metas = computed(
       ) {
         continue;
       }
-      if (isFeatureEnabled("element") === false && name === elementComponent) {
-        continue;
-      }
 
       availableComponents.add(name);
       metas.push({

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -104,7 +104,7 @@ const renderProperty = (
     },
   });
 
-const forbiddenProperties = new Set(["style", "class", "className"]);
+const forbiddenProperties = new Set(["style"]);
 
 const $availableProps = computed(
   [

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

@@ -6,6 +6,7 @@ import {
 } from "@webstudio-is/sdk";
 import type { Instance } from "@webstudio-is/sdk";
 import { toast } from "@webstudio-is/design-system";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { createCommandsEmitter, type Command } from "~/shared/commands-emitter";
 import {
   $editingItemSelector,
@@ -528,15 +529,19 @@ 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);
-      },
-    },
+    ...(isFeatureEnabled("tailwind")
+      ? [
+          {
+            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/shared/copy-paste/plugin-html.ts

@@ -1,14 +1,10 @@
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { generateFragmentFromHtml } from "../html";
 import { insertWebstudioFragmentAt } from "../instance-utils";
 import type { Plugin } from "./init-copy-paste";
 
 export const html: Plugin = {
   mimeType: "text/plain",
   onPaste: (html: string) => {
-    if (!isFeatureEnabled("element")) {
-      return false;
-    }
     const fragment = generateFragmentFromHtml(html);
     return insertWebstudioFragmentAt(fragment);
   },

packages/css-engine/src/core/atomic.test.ts

@@ -279,3 +279,23 @@ test("generate merged properties as single rule", () => {
 }"
 `);
 });
+
+test("convert :local-link to [aria-current=page] selector", () => {
+  const sheet = createRegularStyleSheet();
+  const rule = sheet.addNestingRule(".instance");
+  sheet.addMediaRule("x");
+  rule.setDeclaration({
+    breakpoint: "x",
+    selector: ":local-link",
+    property: "color",
+    value: { type: "keyword", value: "green" },
+  });
+  expect(generateAtomic(sheet, { getKey: () => "" }).cssText)
+    .toMatchInlineSnapshot(`
+    "@media all {
+      .c3mubaz[aria-current=page] {
+        color: green
+      }
+    }"
+  `);
+});

packages/css-engine/src/core/rules.ts

@@ -258,7 +258,11 @@ export class NestingRule {
       if (declaration.breakpoint !== breakpoint) {
         continue;
       }
-      const { selector: nestedSelector } = declaration;
+      let nestedSelector = declaration.selector;
+      // polyfill :local-link with framework specific logic
+      if (nestedSelector === ":local-link") {
+        nestedSelector = "[aria-current=page]";
+      }
       const selector = this.#selector + this.#descendantSuffix + nestedSelector;
       let style = styleBySelector.get(selector);
       if (style === undefined) {

packages/css-engine/src/core/style-sheet-regular.test.ts

@@ -765,3 +765,19 @@ test("generate merged properties as single rule", () => {
 }"
 `);
 });
+
+test("convert :local-link to [aria-current=page] selector", () => {
+  const sheet = createRegularStyleSheet();
+  const rule = sheet.addNestingRule(".instance");
+  rule.setDeclaration({
+    breakpoint: "base",
+    selector: ":local-link",
+    property: "color",
+    value: { type: "keyword", value: "green" },
+  });
+  expect(rule.toString({ breakpoint: "base" })).toMatchInlineSnapshot(`
+    ".instance[aria-current=page] {
+      color: green
+    }"
+  `);
+});

packages/feature-flags/src/flags.ts

@@ -5,4 +5,4 @@ export const aiRadixComponents = false;
 export const animation = false;
 export const videoAnimation = false;
 export const resourceProp = false;
-export const element = false;
+export const tailwind = false;

packages/html-data/src/pseudo-classes.ts

@@ -4,7 +4,7 @@ const location = [
   // ':link',
   ":visited",
   // ':any-link',
-  // ':local-link',
+  ":local-link",
   // ':target',
   // ':target-within',
 ];