@webstudio-is/react-sdk 0.59.0 → 0.61.0

package/lib/components/link.ws.js

@@ -2,18 +2,17 @@ import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
 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" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -22,7 +21,7 @@ const meta = {
   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" }]
 };
 const propsMeta = {
   props: {

package/lib/components/list-item.ws.js

@@ -9,7 +9,7 @@ const meta = {
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/list.ws.js

@@ -2,36 +2,36 @@ import { ListIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list.props";
 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" }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",

package/lib/components/paragraph.ws.js

@@ -9,7 +9,7 @@ const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/separator.ws.js

@@ -2,33 +2,33 @@ import { DashIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/separator.props";
 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" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/components/text-block.ws.js

@@ -2,14 +2,13 @@ import { TextBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/text-block.props";
 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 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -17,7 +16,7 @@ const meta = {
   label: "Text Block",
   Icon: TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props

package/lib/css/css.js

@@ -1,9 +1,9 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
 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";
 const createImageValueTransformer = (assets, options) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -40,15 +40,12 @@ const generateCssText = (data, options) => {
   for (const component of getComponentNames()) {
     const meta = getComponentMeta(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = getPresetStyleRules(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);

package/lib/css/normalize.js

@@ -1,12 +1,9 @@
 import { borders } from "./presets";
 const boxSizing = {
-  type: "keyword",
-  value: "border-box"
-};
-const baseStyle = {
-  boxSizing,
-  ...borders
+  property: "boxSizing",
+  value: { type: "keyword", value: "border-box" }
 };
+const baseStyle = [boxSizing, ...borders];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
@@ -32,262 +29,246 @@ const ul = baseStyle;
 const ol = baseStyle;
 const p = baseStyle;
 const span = baseStyle;
-const html = {
+const html = [
   /* 1 */
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  textSizeAdjust: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "textSizeAdjust",
+    value: { type: "unit", value: 100, unit: "%" }
   },
   /* 3 */
-  tabSize: {
-    type: "unit",
-    value: 4,
-    unit: "number"
+  {
+    property: "tabSize",
+    value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
   ...borders
-};
-const body = {
+];
+const body = [
   /* 1 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  fontFamily: {
-    type: "keyword",
-    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+    }
   },
   boxSizing,
   ...borders
-};
-const hr = {
+];
+const hr = [
   /* 1 */
-  height: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "height",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  color: { type: "keyword", value: "inherit" },
+  {
+    property: "color",
+    value: { type: "keyword", value: "inherit" }
+  },
   boxSizing,
   ...borders
-};
-const b = {
-  fontWeight: {
-    type: "keyword",
-    value: "bolder"
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: "700" }
   },
   boxSizing,
   ...borders
-};
+];
 const strong = b;
-const code = {
+const code = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+    }
   },
   /* 2 */
-  fontSize: {
-    type: "unit",
-    value: 1,
-    unit: "em"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
   ...borders
-};
+];
 const kbd = code;
 const samp = code;
 const pre = code;
-const small = {
-  fontSize: {
-    type: "unit",
-    value: 80,
-    unit: "%"
+const small = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
   ...borders
-};
-const subSupBase = {
-  fontSize: {
-    type: "unit",
-    value: 75,
-    unit: "%"
+];
+const subSupBase = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 75, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 0, unit: "number" }
   },
-  position: {
-    type: "keyword",
-    value: "relative"
+  {
+    property: "position",
+    value: { type: "keyword", value: "relative" }
   },
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...borders
-};
-const sub = {
+];
+const sub = [
   ...subSupBase,
-  bottom: {
-    type: "unit",
-    value: -0.25,
-    unit: "em"
+  {
+    property: "bottom",
+    value: { type: "unit", value: -0.25, unit: "em" }
   }
-};
-const sup = {
+];
+const sup = [
   ...subSupBase,
-  top: {
-    type: "unit",
-    value: -0.5,
-    unit: "em"
+  {
+    property: "top",
+    value: { type: "unit", value: -0.5, unit: "em" }
   }
-};
-const table = {
+];
+const table = [
   /* 1 */
-  textIndent: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "textIndent",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   ...borders,
   /* 2 */
-  borderTopColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderTopColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderRightColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderBottomColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderLeftColor",
+    value: { type: "keyword", value: "inherit" }
   },
   boxSizing
-};
-const buttonBase = {
+];
+const buttonBase = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "fontFamily",
+    value: { type: "keyword", value: "inherit" }
   },
-  fontSize: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 100, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...borders
-};
+];
 const input = buttonBase;
 const optgroup = buttonBase;
 const textarea = buttonBase;
-const button = {
+const button = [
   ...buttonBase,
-  textTransform: {
-    type: "keyword",
-    value: "none"
+  {
+    property: "textTransform",
+    value: { type: "keyword", value: "none" }
   }
-};
+];
 const select = button;
-const legend = {
-  paddingTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+const legend = [
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...borders
-};
-const progress = {
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+];
+const progress = [
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...borders
-};
-const summary = {
-  display: {
-    type: "keyword",
-    value: "list-item"
+];
+const summary = [
+  {
+    property: "display",
+    value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
   ...borders
-};
+];
 export {
   a,
   address,