@webstudio-is/react-sdk 0.82.0 → 0.84.0

package/lib/cjs/css/get-browser-style.js

@@ -1,83 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_browser_style_exports = {};
-__export(get_browser_style_exports, {
-  getBrowserStyle: () => getBrowserStyle
-});
-module.exports = __toCommonJS(get_browser_style_exports);
-var import_detect_font = require("detect-font");
-var import_css_data = require("@webstudio-is/css-data");
-var import_css_data2 = require("@webstudio-is/css-data");
-const unitsList = Object.values(import_css_data2.units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-const parseValue = (property, value) => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = import_css_data.keywordValues[property];
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value
-      };
-    }
-    return {
-      type: "unparsed",
-      value
-    };
-  }
-  if (number === 0 && property in import_css_data2.properties) {
-    return import_css_data2.properties[property].initial;
-  }
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number
-    };
-  }
-  return {
-    type: "unit",
-    unit: parsedUnit[0],
-    value: number
-  };
-};
-const getBrowserStyle = (element) => {
-  const browserStyle = {};
-  if (element === void 0) {
-    return browserStyle;
-  }
-  let knownProperty;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in import_css_data2.properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    const computedValue = computedStyle[knownProperty];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [(0, import_detect_font.detectFont)(element)]
-  };
-  return browserStyle;
-};

package/lib/css/get-browser-style.js

@@ -1,65 +0,0 @@
-import { detectFont } from "detect-font";
-import {
-  keywordValues
-} from "@webstudio-is/css-data";
-import { properties, units } from "@webstudio-is/css-data";
-const unitsList = Object.values(units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-const parseValue = (property, value) => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = keywordValues[property];
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value
-      };
-    }
-    return {
-      type: "unparsed",
-      value
-    };
-  }
-  if (number === 0 && property in properties) {
-    return properties[property].initial;
-  }
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number
-    };
-  }
-  return {
-    type: "unit",
-    unit: parsedUnit[0],
-    value: number
-  };
-};
-const getBrowserStyle = (element) => {
-  const browserStyle = {};
-  if (element === void 0) {
-    return browserStyle;
-  }
-  let knownProperty;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    const computedValue = computedStyle[knownProperty];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [detectFont(element)]
-  };
-  return browserStyle;
-};
-export {
-  getBrowserStyle
-};

package/lib/types/css/get-browser-style.d.ts

@@ -1,2 +0,0 @@
-import { type Style } from "@webstudio-is/css-data";
-export declare const getBrowserStyle: (element?: Element) => Style;

package/src/css/get-browser-style.ts

@@ -1,81 +0,0 @@
-import { detectFont } from "detect-font";
-import {
-  type Style,
-  type StyleValue,
-  type Unit,
-  keywordValues,
-} from "@webstudio-is/css-data";
-import { properties, units } from "@webstudio-is/css-data";
-
-const unitsList = Object.values(units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-
-// @todo use a parser
-const parseValue = (
-  property: keyof typeof properties,
-  value: string
-): StyleValue => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = keywordValues[
-      property as keyof typeof keywordValues
-    ] as ReadonlyArray<string>;
-
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value: value,
-      };
-    }
-
-    return {
-      type: "unparsed",
-      value: value,
-    };
-  }
-
-  if (number === 0 && property in properties) {
-    return properties[property].initial;
-  }
-
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number,
-    };
-  }
-
-  return {
-    type: "unit",
-    unit: parsedUnit[0] as Unit,
-    value: number,
-  };
-};
-
-export const getBrowserStyle = (element?: Element): Style => {
-  const browserStyle: Style = {};
-  if (element === undefined) {
-    return browserStyle;
-  }
-  let knownProperty: keyof typeof properties;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
-    const computedValue = computedStyle[knownProperty as unknown as number];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [detectFont(element)],
-  };
-  return browserStyle;
-};