@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/src/components/link.ws.tsx

@@ -1,24 +1,26 @@
-import type { Style } from "@webstudio-is/css-data";
 import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./link";
 import { props } from "./__generated__/link.props";
 
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 },
     },
-    display: {
-      type: "keyword",
-      value: "inline-block",
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",
@@ -27,7 +29,7 @@ export const meta: WsComponentMeta = {
   Icon: LinkIcon,
   presetStyle,
   states: [{ selector: "[aria-current=page]", label: "Current page" }],
-  children: ["Link text you can edit"],
+  children: [{ type: "text", value: "Link text you can edit" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/list-item.ws.tsx

@@ -1,20 +1,23 @@
-import type { Style } from "@webstudio-is/css-data";
 import { ListItemIcon } from "@webstudio-is/icons";
 import { li } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./list-item";
 import { props } from "./__generated__/list-item.props";
 
 const presetStyle = {
   li,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle,
 };
 

package/src/components/list.ws.tsx

@@ -1,42 +1,45 @@
 import { ListIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/list.props";
 import type { ListTag } from "./list";
-import type { Style } from "@webstudio-is/css-data";
 import { ol, ul } from "../css/normalize";
 
 const presetStyle = {
-  ol: {
+  ol: [
     ...ol,
-    marginTop: {
-      type: "keyword",
-      value: "0",
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" },
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px",
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" },
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px",
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" },
     },
-  },
-  ul: {
+  ],
+  ul: [
     ...ul,
-    marginTop: {
-      type: "keyword",
-      value: "0",
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" },
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px",
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" },
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px",
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" },
     },
-  },
-} as const satisfies Record<ListTag, Style>;
+  ],
+} satisfies PresetStyle<ListTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",

package/src/components/paragraph.ws.tsx

@@ -1,20 +1,23 @@
-import type { Style } from "@webstudio-is/css-data";
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
 import { p } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./paragraph";
 import { props } from "./__generated__/paragraph.props";
 
 const presetStyle = {
   p,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle,
 };
 

package/src/components/separator.ws.tsx

@@ -1,42 +1,43 @@
 import { DashIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/separator.props";
 import type { defaultTag } from "./separator";
-import type { Style } from "@webstudio-is/css-data";
 import { hr } from "../css/normalize";
 
 const presetStyle = {
-  hr: {
+  hr: [
     ...hr,
 
-    height: {
-      type: "keyword",
-      value: "1px",
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" },
     },
-
-    backgroundColor: {
-      type: "keyword",
-      value: "gray",
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" },
     },
-
-    borderTopStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",

package/src/components/span.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { PaintBrushIcon } from "@webstudio-is/icons";
 import { span } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./span";
 import { props } from "./__generated__/span.props";
 
 const presetStyle = {
   span,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/subscript.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { SubscriptIcon } from "@webstudio-is/icons";
 import { sub } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./subscript";
 import { props } from "./__generated__/subscript.props";
 
 const presetStyle = {
   sub,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/superscript.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { SuperscriptIcon } from "@webstudio-is/icons";
 import { sup } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./superscript";
 import { props } from "./__generated__/superscript.props";
 
 const presetStyle = {
   sup,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/text-block.ws.tsx

@@ -1,21 +1,22 @@
 import { TextBlockIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/text-block.props";
 import type { defaultTag } from "./text-block";
-import type { Style } from "@webstudio-is/css-data";
 import { div } from "../css/normalize";
 
 const presetStyle = {
-  div: {
+  div: [
     ...div,
-
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
@@ -23,7 +24,7 @@ export const meta: WsComponentMeta = {
   label: "Text Block",
   Icon: TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"],
+  children: [{ type: "text", value: "Block of text you can edit" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/css/css.ts

@@ -3,9 +3,9 @@ import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
 import { getComponentNames } from "../components/components-utils";
 import { getComponentMeta } from "../components";
-import { componentAttribute, idAttribute } from "../tree";
+import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
-import { getStyleRules } from "./style-rules";
+import { getPresetStyleRules, getStyleRules } from "./style-rules";
 
 type Data = {
   assets: Asset[];
@@ -64,15 +64,12 @@ export const generateCssText = (data: Data, options: CssOptions) => {
   for (const component of getComponentNames()) {
     const meta = getComponentMeta(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== undefined) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${componentAttribute}=${component}])`,
-          {
-            style,
-          }
-        );
-      }
+    if (presetStyle === undefined) {
+      continue;
+    }
+    const rules = getPresetStyleRules(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }