@webstudio-is/react-sdk 0.59.0 → 0.61.0

package/lib/cjs/components/paragraph.ws.js

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

package/lib/cjs/components/separator.ws.js

@@ -26,33 +26,33 @@ var import_icons = require("@webstudio-is/icons");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  hr: {
+  hr: [
     ...import_normalize.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/cjs/components/text-block.ws.js

@@ -26,14 +26,13 @@ var import_icons = require("@webstudio-is/icons");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  div: {
+  div: [
     ...import_normalize.div,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -41,7 +40,7 @@ const meta = {
   label: "Text Block",
   Icon: import_icons.TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props: import_text_block.props

package/lib/cjs/css/css.js

@@ -64,15 +64,12 @@ const generateCssText = (data, options) => {
   for (const component of (0, import_components_utils.getComponentNames)()) {
     const meta = (0, import_components.getComponentMeta)(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${import_tree.componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = (0, import_style_rules.getPresetStyleRules)(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);

package/lib/cjs/css/normalize.js

@@ -68,13 +68,10 @@ __export(normalize_exports, {
 module.exports = __toCommonJS(normalize_exports);
 var import_presets = require("./presets");
 const boxSizing = {
-  type: "keyword",
-  value: "border-box"
-};
-const baseStyle = {
-  boxSizing,
-  ...import_presets.borders
+  property: "boxSizing",
+  value: { type: "keyword", value: "border-box" }
 };
+const baseStyle = [boxSizing, ...import_presets.borders];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
@@ -100,259 +97,243 @@ 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,
   ...import_presets.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,
   ...import_presets.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,
   ...import_presets.borders
-};
-const b = {
-  fontWeight: {
-    type: "keyword",
-    value: "bolder"
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: "700" }
   },
   boxSizing,
   ...import_presets.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,
   ...import_presets.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,
   ...import_presets.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,
   ...import_presets.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" }
   },
   ...import_presets.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,
   ...import_presets.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,
   ...import_presets.borders
-};
-const progress = {
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+];
+const progress = [
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const summary = {
-  display: {
-    type: "keyword",
-    value: "list-item"
+];
+const summary = [
+  {
+    property: "display",
+    value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];

package/lib/cjs/css/presets.js

@@ -21,41 +21,21 @@ __export(presets_exports, {
   borders: () => borders
 });
 module.exports = __toCommonJS(presets_exports);
-const borders = {
-  borderTopColor: {
-    type: "keyword",
-    value: "currentColor"
+const borders = [
+  {
+    property: "borderTopWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "currentColor"
-  },
-  borderTopWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderRightWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderBottomWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderLeftWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   }
-};
+];

package/lib/cjs/css/style-rules.js

@@ -18,9 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_rules_exports = {};
 __export(style_rules_exports, {
+  getPresetStyleRules: () => getPresetStyleRules,
   getStyleRules: () => getStyleRules
 });
 module.exports = __toCommonJS(style_rules_exports);
+var import_tree = require("../tree");
 const getStyleRules = (styles, styleSourceSelections) => {
   if (styles === void 0 || styleSourceSelections === void 0) {
     return [];
@@ -67,3 +69,18 @@ const getStyleRules = (styles, styleSourceSelections) => {
   }
   return styleRules;
 };
+const getPresetStyleRules = (component, presetStyle) => {
+  const presetStyleRules = /* @__PURE__ */ new Map();
+  for (const [tag, styles] of Object.entries(presetStyle)) {
+    for (const styleDecl of styles) {
+      const selector = `${tag}:where([${import_tree.componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      let rule = presetStyleRules.get(selector);
+      if (rule === void 0) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};