@webstudio-is/css-data 0.65.0 → 0.67.0

package/lib/__generated__/keyword-values.js

@@ -3835,8 +3835,8 @@ const keywordValues = {
     "unset"
   ],
   fontWeight: [
-    "400",
-    "700",
+    "normal",
+    "bold",
     "bolder",
     "lighter",
     "initial",

package/lib/__generated__/properties.js

@@ -1444,7 +1444,7 @@ const properties = {
     inherited: true,
     initial: {
       type: "keyword",
-      value: "400"
+      value: "normal"
     },
     popularity: 0.88598106,
     appliesTo: "allElements"
@@ -2364,7 +2364,7 @@ const properties = {
     inherited: false,
     initial: {
       type: "keyword",
-      value: "invertOrCurrentColor"
+      value: "currentColor"
     },
     popularity: 0.09538741,
     appliesTo: "allElements"

package/lib/cjs/__generated__/keyword-values.js

@@ -3858,8 +3858,8 @@ const keywordValues = {
     "unset"
   ],
   fontWeight: [
-    "400",
-    "700",
+    "normal",
+    "bold",
     "bolder",
     "lighter",
     "initial",

package/lib/cjs/__generated__/properties.js

@@ -1467,7 +1467,7 @@ const properties = {
     inherited: true,
     initial: {
       type: "keyword",
-      value: "400"
+      value: "normal"
     },
     popularity: 0.88598106,
     appliesTo: "allElements"
@@ -2387,7 +2387,7 @@ const properties = {
     inherited: false,
     initial: {
       type: "keyword",
-      value: "invertOrCurrentColor"
+      value: "currentColor"
     },
     popularity: 0.09538741,
     appliesTo: "allElements"

package/lib/cjs/html.js

@@ -107,9 +107,7 @@ const pl40px = {
 };
 const fontWeightBold = {
   property: "fontWeight",
-  // in browsers defined as bold
-  // though builder accepts only numeric values
-  value: { type: "keyword", value: "700" }
+  value: { type: "keyword", value: "bold" }
 };
 const fontStyleItalic = {
   property: "fontStyle",

package/lib/cjs/index.js

@@ -37,6 +37,9 @@ var exportedHtml = __toESM(require("./html"), 1);
 __reExport(src_exports, require("./__generated__/keyword-values"), module.exports);
 __reExport(src_exports, require("./__generated__/units"), module.exports);
 __reExport(src_exports, require("./schema"), module.exports);
+__reExport(src_exports, require("./property-parsers/index"), module.exports);
+__reExport(src_exports, require("./parse-css-value"), module.exports);
+__reExport(src_exports, require("./parse-css"), module.exports);
 var import_properties = require("./__generated__/properties");
 const html = exportedHtml;
 const properties = import_properties.properties;

package/lib/cjs/parse-css-value.js

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var parse_css_value_exports = {};
+__export(parse_css_value_exports, {
+  isValidDeclaration: () => isValidDeclaration,
+  parseCssValue: () => parseCssValue
+});
+module.exports = __toCommonJS(parse_css_value_exports);
+var import_colord = require("colord");
+var csstree = __toESM(require("css-tree"), 1);
+var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
+var import_warn_once = __toESM(require("warn-once"), 1);
+var import_keyword_values = require("./__generated__/keyword-values");
+var import_units = require("./__generated__/units");
+const cssTryParseValue = (input) => {
+  try {
+    const ast = csstree.parse(input, { context: "value" });
+    return ast;
+  } catch {
+    return void 0;
+  }
+};
+const isValidDeclaration = (property, value) => {
+  const ast = cssTryParseValue(value);
+  if (ast == null) {
+    return false;
+  }
+  const cssPropertyName = (0, import_hyphenate_style_name.default)(property);
+  const matchResult = csstree.lexer.matchProperty(cssPropertyName, ast);
+  const isValidDeclaration2 = matchResult.matched != null;
+  if (isValidDeclaration2 && typeof CSSStyleValue !== "undefined") {
+    try {
+      CSSStyleValue.parse(cssPropertyName, value);
+    } catch {
+      (0, import_warn_once.default)(
+        true,
+        `Css property "${property}" with value "${value}" is invalid according to CSSStyleValue.parse
+          but valid according to csstree.lexer.matchProperty.`
+      );
+      return false;
+    }
+  }
+  return isValidDeclaration2;
+};
+const parseCssValue = (property, input) => {
+  const invalidValue = {
+    type: "invalid",
+    value: input
+  };
+  if (input.length === 0) {
+    return invalidValue;
+  }
+  if (!isValidDeclaration(property, input)) {
+    return invalidValue;
+  }
+  const ast = cssTryParseValue(input);
+  if (ast == null) {
+    (0, import_warn_once.default)(
+      true,
+      `Can't parse css property "${property}" with value "${input}"`
+    );
+    return invalidValue;
+  }
+  if (ast != null && ast.type === "Value" && ast.children.first === ast.children.last) {
+    const first = ast.children.first;
+    if (first?.type === "Number") {
+      return {
+        type: "unit",
+        unit: "number",
+        value: Number(first.value)
+      };
+    }
+    if (first?.type === "Dimension") {
+      const unit = first.unit;
+      for (const unitGroup of Object.values(import_units.units)) {
+        if (unitGroup.includes(unit)) {
+          return {
+            type: "unit",
+            unit,
+            value: Number(first.value)
+          };
+        }
+      }
+      return invalidValue;
+    }
+    if (first?.type === "Percentage") {
+      return {
+        type: "unit",
+        unit: "%",
+        value: Number(first.value)
+      };
+    }
+    if (first?.type === "Identifier") {
+      const values = import_keyword_values.keywordValues[property];
+      const lettersRegex = /[^a-zA-Z]+/g;
+      const searchValues = values.map(
+        (value) => value.replace(lettersRegex, "").toLowerCase()
+      );
+      const keywordInput = input.replace(lettersRegex, "").toLowerCase();
+      const index = searchValues.indexOf(keywordInput);
+      if (index > -1) {
+        return {
+          type: "keyword",
+          value: values[index]
+        };
+      }
+    }
+  }
+  if (property.toLocaleLowerCase().includes("color")) {
+    const mayBeColor = (0, import_colord.colord)(input);
+    if (mayBeColor.isValid()) {
+      const rgb = mayBeColor.toRgb();
+      return {
+        type: "rgb",
+        alpha: rgb.a,
+        r: rgb.r,
+        g: rgb.g,
+        b: rgb.b
+      };
+    }
+  }
+  return {
+    type: "unparsed",
+    value: input
+  };
+};

package/lib/cjs/parse-css.js

@@ -0,0 +1,125 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var parse_css_exports = {};
+__export(parse_css_exports, {
+  parseCss: () => parseCss
+});
+module.exports = __toCommonJS(parse_css_exports);
+var csstree = __toESM(require("css-tree"), 1);
+var import_parse_css_value = require("./parse-css-value");
+var parsers = __toESM(require("./property-parsers/parsers"), 1);
+var toLonghand = __toESM(require("./property-parsers/to-longhand"), 1);
+var import_schema = require("./schema");
+const parseCssValue = function parseCssValue2(property, value) {
+  const unwrap = toLonghand[property];
+  if (typeof unwrap === "function") {
+    const longhands = unwrap(value);
+    return Object.fromEntries(
+      Object.entries(longhands).map(([property2, value2]) => {
+        const valueParser = parsers[property2];
+        if (typeof valueParser === "function") {
+          return [property2, valueParser(value2)];
+        }
+        if (Array.isArray(value2)) {
+          return [
+            property2,
+            {
+              type: "invalid",
+              value: value2.join("")
+            }
+          ];
+        }
+        if (!value2) {
+          return [property2, { type: "invalid", value: "" }];
+        }
+        return [
+          property2,
+          (0, import_parse_css_value.parseCssValue)(property2, value2)
+        ];
+      })
+    );
+  }
+  return {
+    [property]: (0, import_parse_css_value.parseCssValue)(property, value)
+  };
+};
+const parseCss = function cssToWS(css) {
+  const ast = csstree.parse(css);
+  let selectors = [];
+  const styles = {};
+  csstree.walk(ast, (node, item) => {
+    if (node.type === "SelectorList") {
+      selectors = [];
+    }
+    if (node.type === "ClassSelector") {
+      if (!item.prev && !item.next) {
+        selectors.push(node.name);
+      }
+      return;
+    }
+    if (node.type === "Declaration") {
+      const stringValue = csstree.generate(node.value);
+      const parsedCss = parseCssValue(
+        node.property,
+        stringValue
+      );
+      Object.entries(parsedCss).forEach(
+        ([property, value]) => {
+          try {
+            import_schema.StyleValue.parse(value);
+            selectors.forEach((selector) => {
+              if (Array.isArray(styles[selector])) {
+                styles[selector].push({
+                  property,
+                  value
+                });
+              } else {
+                styles[selector] = [{ property, value }];
+              }
+            });
+          } catch (error) {
+            if (true) {
+              console.warn(
+                true,
+                `Declaration parsing for \`${selectors.join(", ")}.${node.property}: ${stringValue}\` failed:
+
+${JSON.stringify(
+                  parsedCss,
+                  null,
+                  2
+                )}`
+              );
+            }
+          }
+        }
+      );
+    }
+  });
+  return styles;
+};

package/lib/cjs/property-parsers/background.js

@@ -0,0 +1,105 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var background_exports = {};
+__export(background_exports, {
+  backgroundToLonghand: () => backgroundToLonghand,
+  gradientNames: () => gradientNames,
+  parseBackground: () => parseBackground,
+  parseBackgroundImage: () => parseBackgroundImage
+});
+module.exports = __toCommonJS(background_exports);
+var csstree = __toESM(require("css-tree"), 1);
+var import_parse_css_value = require("../parse-css-value");
+const gradientNames = [
+  "conic-gradient",
+  "linear-gradient",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient"
+];
+const parseBackground = (background) => {
+  const { backgroundImage, backgroundColor: backgroundColorRaw } = backgroundToLonghand(background);
+  const backgroundColor = backgroundColorRaw ? (0, import_parse_css_value.parseCssValue)("backgroundColor", backgroundColorRaw) : void 0;
+  return {
+    backgroundImage: parseBackgroundImage(backgroundImage),
+    backgroundColor: backgroundColor && backgroundColor.type === "rgb" ? backgroundColor : void 0
+  };
+};
+const backgroundToLonghand = (background) => {
+  const layers = [];
+  let tokenStream = background.trim();
+  tokenStream = tokenStream.endsWith(";") ? tokenStream.slice(0, -1) : tokenStream;
+  const cleanupKeywords = ["background:", "background-image:"];
+  for (const cleanupKeyword of cleanupKeywords) {
+    tokenStream = tokenStream.startsWith(cleanupKeyword) ? tokenStream.slice(cleanupKeyword.length).trim() : tokenStream;
+  }
+  const cssAst = csstree.parse(tokenStream, { context: "value" });
+  let backgroundColorRaw;
+  let nestingLevel = 0;
+  csstree.walk(cssAst, {
+    enter: (node, item, list) => {
+      if (node.type === "Function") {
+        if (gradientNames.includes(node.name)) {
+          layers.push(csstree.generate(node));
+        }
+        if (item.next === null && nestingLevel === 0) {
+          backgroundColorRaw = csstree.generate(node);
+        }
+        nestingLevel++;
+      }
+      if (node.type === "Hash" && item.next === null && nestingLevel === 0) {
+        backgroundColorRaw = csstree.generate(node);
+      }
+    },
+    leave: (node, item, list) => {
+      if (node.type === "Function") {
+        nestingLevel--;
+      }
+    }
+  });
+  return {
+    backgroundImage: layers,
+    backgroundColor: backgroundColorRaw
+  };
+};
+const parseBackgroundImage = (layers) => {
+  const backgroundImages = [];
+  for (const layer of layers) {
+    if (gradientNames.some((gradientName) => layer.startsWith(gradientName)) === false) {
+      break;
+    }
+    const layerStyle = (0, import_parse_css_value.parseCssValue)("backgroundImage", layer);
+    if (layerStyle.type !== "unparsed") {
+      break;
+    }
+    backgroundImages.push(layerStyle);
+  }
+  return backgroundImages.length > 0 ? { type: "layers", value: backgroundImages } : { type: "invalid", value: layers.join(",") };
+};

package/lib/cjs/property-parsers/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var property_parsers_exports = {};
+module.exports = __toCommonJS(property_parsers_exports);
+__reExport(property_parsers_exports, require("./background"), module.exports);

package/lib/cjs/property-parsers/parsers.js

@@ -0,0 +1,24 @@
+"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 parsers_exports = {};
+__export(parsers_exports, {
+  backgroundImage: () => import_background.parseBackgroundImage
+});
+module.exports = __toCommonJS(parsers_exports);
+var import_background = require("./background");

package/lib/cjs/property-parsers/to-longhand.js

@@ -0,0 +1,24 @@
+"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 to_longhand_exports = {};
+__export(to_longhand_exports, {
+  background: () => import_background.backgroundToLonghand
+});
+module.exports = __toCommonJS(to_longhand_exports);
+var import_background = require("./background");

package/lib/html.js

@@ -24,9 +24,7 @@ const pl40px = {
 };
 const fontWeightBold = {
   property: "fontWeight",
-  // in browsers defined as bold
-  // though builder accepts only numeric values
-  value: { type: "keyword", value: "700" }
+  value: { type: "keyword", value: "bold" }
 };
 const fontStyleItalic = {
   property: "fontStyle",

package/lib/index.js

@@ -3,6 +3,9 @@ const html = exportedHtml;
 export * from "./__generated__/keyword-values";
 export * from "./__generated__/units";
 export * from "./schema";
+export * from "./property-parsers/index";
+export * from "./parse-css-value";
+export * from "./parse-css";
 import { properties as generatedProperties } from "./__generated__/properties";
 const properties = generatedProperties;
 export {

package/lib/parse-css-value.js

@@ -0,0 +1,122 @@
+import { colord } from "colord";
+import * as csstree from "css-tree";
+import hyphenate from "hyphenate-style-name";
+import warnOnce from "warn-once";
+import { keywordValues } from "./__generated__/keyword-values";
+import { units } from "./__generated__/units";
+const cssTryParseValue = (input) => {
+  try {
+    const ast = csstree.parse(input, { context: "value" });
+    return ast;
+  } catch {
+    return void 0;
+  }
+};
+const isValidDeclaration = (property, value) => {
+  const ast = cssTryParseValue(value);
+  if (ast == null) {
+    return false;
+  }
+  const cssPropertyName = hyphenate(property);
+  const matchResult = csstree.lexer.matchProperty(cssPropertyName, ast);
+  const isValidDeclaration2 = matchResult.matched != null;
+  if (isValidDeclaration2 && typeof CSSStyleValue !== "undefined") {
+    try {
+      CSSStyleValue.parse(cssPropertyName, value);
+    } catch {
+      warnOnce(
+        true,
+        `Css property "${property}" with value "${value}" is invalid according to CSSStyleValue.parse
+          but valid according to csstree.lexer.matchProperty.`
+      );
+      return false;
+    }
+  }
+  return isValidDeclaration2;
+};
+const parseCssValue = (property, input) => {
+  const invalidValue = {
+    type: "invalid",
+    value: input
+  };
+  if (input.length === 0) {
+    return invalidValue;
+  }
+  if (!isValidDeclaration(property, input)) {
+    return invalidValue;
+  }
+  const ast = cssTryParseValue(input);
+  if (ast == null) {
+    warnOnce(
+      true,
+      `Can't parse css property "${property}" with value "${input}"`
+    );
+    return invalidValue;
+  }
+  if (ast != null && ast.type === "Value" && ast.children.first === ast.children.last) {
+    const first = ast.children.first;
+    if (first?.type === "Number") {
+      return {
+        type: "unit",
+        unit: "number",
+        value: Number(first.value)
+      };
+    }
+    if (first?.type === "Dimension") {
+      const unit = first.unit;
+      for (const unitGroup of Object.values(units)) {
+        if (unitGroup.includes(unit)) {
+          return {
+            type: "unit",
+            unit,
+            value: Number(first.value)
+          };
+        }
+      }
+      return invalidValue;
+    }
+    if (first?.type === "Percentage") {
+      return {
+        type: "unit",
+        unit: "%",
+        value: Number(first.value)
+      };
+    }
+    if (first?.type === "Identifier") {
+      const values = keywordValues[property];
+      const lettersRegex = /[^a-zA-Z]+/g;
+      const searchValues = values.map(
+        (value) => value.replace(lettersRegex, "").toLowerCase()
+      );
+      const keywordInput = input.replace(lettersRegex, "").toLowerCase();
+      const index = searchValues.indexOf(keywordInput);
+      if (index > -1) {
+        return {
+          type: "keyword",
+          value: values[index]
+        };
+      }
+    }
+  }
+  if (property.toLocaleLowerCase().includes("color")) {
+    const mayBeColor = colord(input);
+    if (mayBeColor.isValid()) {
+      const rgb = mayBeColor.toRgb();
+      return {
+        type: "rgb",
+        alpha: rgb.a,
+        r: rgb.r,
+        g: rgb.g,
+        b: rgb.b
+      };
+    }
+  }
+  return {
+    type: "unparsed",
+    value: input
+  };
+};
+export {
+  isValidDeclaration,
+  parseCssValue
+};