@webstudio-is/react-sdk 0.59.0 → 0.61.0

package/src/components/heading.ws.tsx

@@ -1,8 +1,11 @@
-import type { Style } from "@webstudio-is/css-data";
 import { HeadingIcon } from "@webstudio-is/icons";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { Heading } from "./heading";
 import { props } from "./__generated__/heading.props";
 
@@ -15,14 +18,14 @@ const presetStyle = {
   h4,
   h5,
   h6,
-} as const satisfies Record<HeadingTags, Style>;
+} satisfies PresetStyle<HeadingTags>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"],
+  children: [{ type: "text", value: "Heading you can edit" }],
   presetStyle,
 };
 

package/src/components/image.ws.tsx

@@ -1,28 +1,30 @@
-import type { Style } from "@webstudio-is/css-data";
 import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./image";
 import { props } from "./__generated__/image.props";
 
 const presetStyle = {
-  img: {
+  img: [
     ...img,
 
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    maxWidth: {
-      type: "unit",
-      unit: "%",
-      value: 100,
+    {
+      property: "maxWidth",
+      value: { type: "unit", unit: "%", value: 100 },
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
     // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-    display: {
-      type: "keyword",
-      value: "block",
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "media",

package/src/components/input.ws.tsx

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

package/src/components/italic.ws.tsx

@@ -1,19 +1,22 @@
-import type { Style } from "@webstudio-is/css-data";
 import { TextItalicIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./italic";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/italic.props";
 import { i } from "../css/normalize";
 
 const presetStyle = {
-  i: {
+  i: [
     ...i,
-    fontStyle: {
-      type: "keyword",
-      value: "italic",
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

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

@@ -1,20 +1,23 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import type { defaultTag } from "./link-block";
-import type { Style } from "@webstudio-is/css-data";
 import { a } from "../css/normalize";
 
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    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",

package/src/components/link.tsx

@@ -23,7 +23,7 @@ export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
 
   switch (href?.type) {
     case "page":
-      url = href.page.path;
+      url = href.page.path === "" ? "/" : href.page.path;
       if (href.hash !== undefined) {
         url += `#${href.hash}`;
       }

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 });
     }
   }