experimental: allow pasting styles into style source (#4200)

Ref #3399

He added support for paste style declarations into style source or
state. It will let us create collections of custom properties like open
props with a few clicks.

The downside is browser prompt with permission confirmation because we
use "unsafe" navigator.clipboard.readText() instead of paste event.



https://github.com/user-attachments/assets/8e0153b6-5b98-4f07-bb2c-aac6bc51c6d3

Author: TrySound

apps/builder/app/builder/features/style-panel/style-source-section.tsx

@@ -11,6 +11,7 @@ import {
   type StyleSources,
   getStyleDeclKey,
 } from "@webstudio-is/sdk";
+import { parseCss } from "@webstudio-is/css-data";
 import {
   Flex,
   Dialog,
@@ -40,6 +41,7 @@ import {
   $styleSourceSelections,
   $styleSources,
   $styles,
+  $selectedBreakpoint,
 } from "~/shared/nano-states";
 import { removeByMutable } from "~/shared/array-utils";
 import { cloneStyles } from "~/shared/tree-utils";
@@ -392,6 +394,30 @@ const renameStyleSource = (
   });
 };
 
+const pasteStyles = async (
+  styleSourceId: StyleSource["id"],
+  state: undefined | string
+) => {
+  const text = await navigator.clipboard.readText();
+  const parsedStyles = parseCss(`selector{${text}}`);
+  const breakpointId = $selectedBreakpoint.get()?.id;
+  if (breakpointId === undefined) {
+    return;
+  }
+  serverSyncStore.createTransaction([$styles], (styles) => {
+    for (const { property, value } of parsedStyles) {
+      const styleDecl: StyleDecl = {
+        breakpointId,
+        styleSourceId,
+        state,
+        property,
+        value,
+      };
+      styles.set(getStyleDeclKey(styleDecl), styleDecl);
+    }
+  });
+};
+
 const clearStyles = (styleSourceId: StyleSource["id"]) => {
   serverSyncStore.createTransaction([$styles], (styles) => {
     for (const [styleDeclKey, styleDecl] of styles) {
@@ -536,6 +562,12 @@ export const StyleSourcesSection = () => {
           convertLocalStyleSourceToToken(id);
           setEditingItem(id);
         }}
+        onPasteStyles={(styleSourceSelector) => {
+          pasteStyles(
+            styleSourceSelector.styleSourceId,
+            styleSourceSelector.state
+          );
+        }}
         onClearStyles={clearStyles}
         onRemoveItem={(id) => {
           removeStyleSourceFromInstance(id);

apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx

@@ -12,6 +12,8 @@
  */
 
 import { nanoid } from "nanoid";
+import { useFocusWithin } from "@react-aria/interactions";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   Box,
   ComboboxListbox,
@@ -57,7 +59,6 @@ import { useSortable } from "./use-sortable";
 import { matchSorter } from "match-sorter";
 import { StyleSourceBadge } from "./style-source-badge";
 import { humanizeString } from "~/shared/string-utils";
-import { useFocusWithin } from "@react-aria/interactions";
 
 type IntermediateItem = {
   id: string;
@@ -252,6 +253,7 @@ type StyleSourceInputProps<Item extends IntermediateItem> = {
   onSelectAutocompleteItem?: (item: Item) => void;
   onRemoveItem?: (id: Item["id"]) => void;
   onDeleteItem?: (id: Item["id"]) => void;
+  onPasteStyles?: (item: ItemSelector) => void;
   onClearStyles?: (id: Item["id"]) => void;
   onDuplicateItem?: (id: Item["id"]) => void;
   onConvertToToken?: (id: Item["id"]) => void;
@@ -325,6 +327,7 @@ const renderMenuItems = (props: {
   onEnable?: (itemId: IntermediateItem["id"]) => void;
   onRemove?: (itemId: IntermediateItem["id"]) => void;
   onDelete?: (itemId: IntermediateItem["id"]) => void;
+  onPasteStyles?: (item: ItemSelector) => void;
   onClearStyles?: (itemId: IntermediateItem["id"]) => void;
 }) => {
   return (
@@ -347,6 +350,20 @@ const renderMenuItems = (props: {
           Convert to token
         </DropdownMenuItem>
       )}
+      {isFeatureEnabled("pasteStyles") && (
+        <DropdownMenuItem
+          onSelect={() => {
+            if (props.selectedItemSelector?.styleSourceId === props.item.id) {
+              // allow paste into state when selected
+              props.onPasteStyles?.(props.selectedItemSelector);
+            } else {
+              props.onPasteStyles?.({ styleSourceId: props.item.id });
+            }
+          }}
+        >
+          Paste styles
+        </DropdownMenuItem>
+      )}
       {props.item.source === "local" && (
         <DropdownMenuItem
           destructive={true}
@@ -528,6 +545,7 @@ export const StyleSourceInput = (
                 onEdit: props.onEditItem,
                 onRemove: props.onRemoveItem,
                 onDelete: props.onDeleteItem,
+                onPasteStyles: props.onPasteStyles,
                 onClearStyles: props.onClearStyles,
               })
             }

packages/feature-flags/src/flags.ts

@@ -8,3 +8,4 @@ export const cssVars = false;
 export const filters = false;
 export const xmlElement = false;
 export const staticExport = false;
+export const pasteStyles = false;