@webstudio-is/css-data 0.91.0 → 0.266.0

package/lib/html.js

@@ -1,561 +0,0 @@
-const display = (value) => ({
-  property: "display",
-  value: { type: "keyword", value }
-});
-const marginTop = (value, unit) => ({
-  property: "marginTop",
-  value: { type: "unit", value, unit: unit ?? "number" }
-});
-const marginRight = (value, unit) => ({
-  property: "marginRight",
-  value: { type: "unit", value, unit: unit ?? "number" }
-});
-const marginBottom = (value, unit) => ({
-  property: "marginBottom",
-  value: { type: "unit", value, unit: unit ?? "number" }
-});
-const marginLeft = (value, unit) => ({
-  property: "marginLeft",
-  value: { type: "unit", value, unit: unit ?? "number" }
-});
-const paddingTop = (value, unit) => ({
-  property: "paddingTop",
-  value: { type: "unit", value, unit }
-});
-const paddingRight = (value, unit) => ({
-  property: "paddingRight",
-  value: { type: "unit", value, unit }
-});
-const paddingBottom = (value, unit) => ({
-  property: "paddingBottom",
-  value: { type: "unit", value, unit }
-});
-const paddingLeft = (value, unit) => ({
-  property: "paddingLeft",
-  value: { type: "unit", value, unit }
-});
-const color = (value) => ({
-  property: "color",
-  value: { type: "keyword", value }
-});
-const fontSize = (value, unit) => ({
-  property: "fontSize",
-  value: { type: "unit", value, unit }
-});
-const fontWeight = (value) => ({
-  property: "fontWeight",
-  value: { type: "keyword", value }
-});
-const fontStyle = (value) => ({
-  property: "fontStyle",
-  value: { type: "keyword", value }
-});
-const textAlign = (value) => ({
-  property: "textAlign",
-  value: { type: "keyword", value }
-});
-const verticalAlign = (value) => ({
-  property: "verticalAlign",
-  value: { type: "keyword", value }
-});
-const whiteSpace = (value) => ({
-  property: "whiteSpace",
-  value: { type: "keyword", value }
-});
-const cursor = (value) => ({
-  property: "cursor",
-  value: { type: "keyword", value }
-});
-const borderWidth = (value, unit) => [
-  {
-    property: "borderTopWidth",
-    value: { type: "unit", value, unit }
-  },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", value, unit }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", value, unit }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", value, unit }
-  }
-];
-const borderStyle = (value) => [
-  {
-    property: "borderTopStyle",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderRightStyle",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderBottomStyle",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderLeftStyle",
-    value: { type: "keyword", value }
-  }
-];
-const borderColor = (value) => [
-  {
-    property: "borderTopColor",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderRightColor",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderBottomColor",
-    value: { type: "keyword", value }
-  },
-  {
-    property: "borderLeftColor",
-    value: { type: "keyword", value }
-  }
-];
-const appearance = (value) => ({
-  property: "appearance",
-  value: { type: "keyword", value }
-});
-const userSelect = (value) => ({
-  property: "userSelect",
-  value: { type: "keyword", value }
-});
-const boxSizing = (value) => ({
-  property: "boxSizing",
-  value: { type: "keyword", value }
-});
-const article = [display("block")];
-const body = [
-  display("block"),
-  marginTop(8, "px"),
-  marginRight(8, "px"),
-  marginBottom(8, "px"),
-  marginLeft(8, "px")
-];
-const p = [
-  display("block"),
-  marginTop(1, "em"),
-  marginBottom(1, "em")
-];
-const dd = [display("block"), marginLeft(40, "px")];
-const blockquote = [
-  display("block"),
-  marginTop(1, "em"),
-  marginBottom(1, "em"),
-  marginLeft(40, "px"),
-  marginRight(40, "px")
-];
-const address = [display("block"), fontStyle("italic")];
-const h1 = [
-  display("block"),
-  fontWeight("bold"),
-  fontSize(2, "em"),
-  marginTop(0.67, "em"),
-  marginBottom(0.67, "em")
-];
-const h2 = [
-  display("block"),
-  fontWeight("bold"),
-  fontSize(1.5, "em"),
-  marginTop(0.83, "em"),
-  marginBottom(0.83, "em")
-];
-const h3 = [
-  display("block"),
-  fontWeight("bold"),
-  fontSize(1.17, "em"),
-  marginTop(1, "em"),
-  marginBottom(1, "em")
-];
-const h4 = [
-  display("block"),
-  fontWeight("bold"),
-  marginTop(1.33, "em"),
-  marginBottom(1.33, "em")
-];
-const h5 = [
-  display("block"),
-  fontWeight("bold"),
-  fontSize(0.83, "em"),
-  marginTop(1.67, "em"),
-  marginBottom(1.67, "em")
-];
-const h6 = [
-  display("block"),
-  fontWeight("bold"),
-  fontSize(0.67, "em"),
-  marginTop(2.33, "em"),
-  marginBottom(2.33, "em")
-];
-const pre = [
-  display("block"),
-  whiteSpace("pre"),
-  marginTop(1, "em"),
-  marginBottom(1, "em")
-];
-const table = [
-  display("table"),
-  {
-    property: "borderSpacing",
-    value: { type: "unit", value: 2, unit: "px" }
-  },
-  {
-    property: "borderCollapse",
-    value: { type: "keyword", value: "separate" }
-  },
-  boxSizing("border-box"),
-  {
-    property: "textIndent",
-    value: { type: "unit", value: 0, unit: "number" }
-  }
-];
-const caption = [display("table-caption"), textAlign("center")];
-const tr = [display("table-row"), verticalAlign("inherit")];
-const col = [display("table-column")];
-const colgroup = [display("table-column-group")];
-const tbody = [
-  display("table-row-group"),
-  verticalAlign("middle")
-];
-const thead = [
-  display("table-header-group"),
-  verticalAlign("middle")
-];
-const tfoot = [
-  display("table-footer-group"),
-  verticalAlign("middle")
-];
-const td = [
-  display("table-cell"),
-  verticalAlign("inherit"),
-  paddingTop(1, "px"),
-  paddingRight(1, "px"),
-  paddingBottom(1, "px"),
-  paddingLeft(1, "px")
-];
-const th = [
-  display("table-cell"),
-  verticalAlign("inherit"),
-  fontWeight("bold"),
-  paddingTop(1, "px"),
-  paddingRight(1, "px"),
-  paddingBottom(1, "px"),
-  paddingLeft(1, "px")
-];
-const b = [
-  // in firefox defined as bolder
-  fontWeight("bold")
-];
-const i = [fontStyle("italic")];
-const code = [
-  {
-    property: "fontFamily",
-    // in firefox defined as -moz-fixed
-    value: { type: "fontFamily", value: ["monospace"] }
-  }
-];
-const mark = [
-  {
-    property: "backgroundColor",
-    // in firefox defined as Mark
-    value: { type: "keyword", value: "yellow" }
-  },
-  // in firefox defined as MarkText
-  color("black")
-];
-const u = [
-  {
-    property: "textDecorationStyle",
-    value: { type: "keyword", value: "underline" }
-  }
-];
-const s = [
-  {
-    property: "textDecorationStyle",
-    value: { type: "keyword", value: "line-through" }
-  }
-];
-const sub = [
-  verticalAlign("sub"),
-  {
-    property: "fontSize",
-    value: { type: "keyword", value: "smaller" }
-  }
-];
-const sup = [
-  verticalAlign("super"),
-  {
-    property: "fontSize",
-    value: { type: "keyword", value: "smaller" }
-  }
-];
-const a = [
-  {
-    property: "textDecorationLine",
-    value: { type: "keyword", value: "underline" }
-  },
-  cursor("pointer"),
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  }
-  // active and visited states are not defined as usually overriden with stateless color
-  // and modeling var-like defaults is too complex
-];
-const ul = [
-  display("block"),
-  {
-    property: "listStyleType",
-    value: { type: "keyword", value: "disc" }
-  },
-  marginTop(1, "em"),
-  marginBottom(1, "em"),
-  paddingLeft(40, "px")
-];
-const ol = [
-  display("block"),
-  {
-    property: "listStyleType",
-    value: { type: "keyword", value: "decimal" }
-  },
-  marginTop(1, "em"),
-  marginBottom(1, "em"),
-  paddingLeft(40, "px")
-];
-const li = [display("list-item"), textAlign("match-parent")];
-const hr = [
-  color("gray"),
-  ...borderWidth(1, "px"),
-  ...borderStyle("inset"),
-  marginTop(0.5, "em"),
-  marginBottom(0.5, "em"),
-  {
-    property: "marginLeft",
-    value: { type: "keyword", value: "auto" }
-  },
-  {
-    property: "marginRight",
-    value: { type: "keyword", value: "auto" }
-  },
-  // firefox only
-  {
-    property: "overflow",
-    value: { type: "keyword", value: "hidden" }
-  },
-  /* This is not really per spec but all browsers define it */
-  display("block")
-];
-const formControlReset = [
-  // in firefox defined as FieldText
-  color("initial"),
-  { property: "letterSpacing", value: { type: "keyword", value: "normal" } },
-  { property: "wordSpacing", value: { type: "keyword", value: "normal" } },
-  { property: "lineHeight", value: { type: "keyword", value: "normal" } },
-  { property: "textTransform", value: { type: "keyword", value: "none" } },
-  { property: "textIndent", value: { type: "unit", value: 0, unit: "number" } },
-  { property: "textShadow", value: { type: "keyword", value: "none" } },
-  display("inline-block"),
-  textAlign("start")
-];
-const legend = [
-  display("block"),
-  paddingLeft(2, "px"),
-  paddingRight(2, "px")
-];
-const fieldset = [
-  display("block"),
-  marginLeft(2, "px"),
-  marginRight(2, "px"),
-  paddingTop(0.35, "em"),
-  paddingBottom(0.625, "em"),
-  paddingLeft(0.75, "em"),
-  paddingRight(0.75, "em"),
-  ...borderWidth(2, "px"),
-  // in browsers defined as groove
-  ...borderStyle("solid"),
-  ...borderColor("ThreeDFace"),
-  { property: "minWidth", value: { type: "keyword", value: "min-content" } }
-];
-const label = [cursor("default")];
-const input = [
-  appearance("auto"),
-  paddingTop(1, "px"),
-  paddingRight(1, "px"),
-  paddingBottom(1, "px"),
-  paddingLeft(1, "px"),
-  ...borderWidth(2, "px"),
-  // in browsers defined as inset
-  ...borderStyle("solid"),
-  // in firefox defined as Field
-  { property: "backgroundColor", value: { type: "keyword", value: "white" } },
-  cursor("text")
-];
-const textarea = [
-  ...formControlReset,
-  appearance("auto"),
-  marginTop(1, "px"),
-  marginBottom(1, "px"),
-  // in firefox 2px
-  ...borderWidth(1, "px"),
-  // in browsers defined as inset
-  ...borderStyle("solid"),
-  paddingTop(2, "px"),
-  paddingRight(2, "px"),
-  paddingBottom(2, "px"),
-  paddingLeft(2, "px"),
-  // in firefox defined as Field
-  { property: "backgroundColor", value: { type: "keyword", value: "white" } },
-  verticalAlign("text-bottom"),
-  cursor("text"),
-  { property: "resize", value: { type: "keyword", value: "both" } },
-  whiteSpace("pre-wrap"),
-  {
-    property: "wordWrap",
-    value: { type: "keyword", value: "break-word" }
-  }
-];
-const select = [
-  ...formControlReset,
-  display("inline-block"),
-  marginTop(0),
-  marginRight(0),
-  marginBottom(0),
-  marginLeft(0),
-  paddingTop(1, "px"),
-  paddingBottom(1, "px"),
-  paddingRight(4, "px"),
-  paddingLeft(4, "px"),
-  ...borderWidth(2, "px"),
-  // in browsers defined as inset
-  ...borderStyle("solid"),
-  whiteSpace("nowrap"),
-  {
-    property: "wordWrap",
-    value: { type: "keyword", value: "normal" }
-  },
-  cursor("default"),
-  boxSizing("border-box"),
-  userSelect("none"),
-  {
-    property: "overflow",
-    value: { type: "keyword", value: "clip" }
-  },
-  verticalAlign("baseline"),
-  appearance("auto")
-];
-const option = [
-  display("block"),
-  { property: "float", value: { type: "keyword", value: "none" } },
-  { property: "position", value: { type: "keyword", value: "static" } },
-  { property: "minHeight", value: { type: "unit", value: 1, unit: "em" } },
-  paddingTop(2, "px"),
-  paddingBottom(2, "px"),
-  paddingRight(2, "px"),
-  paddingLeft(4, "px"),
-  userSelect("none"),
-  whiteSpace("nowrap"),
-  {
-    property: "wordWrap",
-    value: { type: "keyword", value: "normal" }
-  }
-];
-const button = [
-  ...formControlReset,
-  appearance("auto"),
-  // in firefox defined as 1px 8px
-  paddingTop(2, "px"),
-  paddingBottom(3, "px"),
-  paddingLeft(6, "px"),
-  paddingRight(6, "px"),
-  ...borderWidth(2, "px"),
-  // in browsers defined as outset
-  ...borderStyle("solid"),
-  cursor("default"),
-  boxSizing("border-box"),
-  userSelect("none"),
-  textAlign("center"),
-  {
-    property: "backgroundColor",
-    // in browsers defined as ButtonFace
-    value: { type: "keyword", value: "lightgray" }
-  }
-];
-export {
-  a,
-  address,
-  article,
-  article as aside,
-  b,
-  blockquote,
-  body,
-  button,
-  caption,
-  i as cite,
-  code,
-  col,
-  colgroup,
-  dd,
-  s as del,
-  article as details,
-  i as dfn,
-  article as div,
-  p as dl,
-  article as dt,
-  i as em,
-  fieldset,
-  article as figcaption,
-  blockquote as figure,
-  article as footer,
-  article as form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  article as header,
-  article as hgroup,
-  hr,
-  article as html,
-  i,
-  input,
-  u as ins,
-  code as kbd,
-  label,
-  legend,
-  li,
-  article as main,
-  mark,
-  article as nav,
-  ol,
-  option,
-  p,
-  pre,
-  s,
-  code as samp,
-  article as section,
-  select,
-  b as strong,
-  sub,
-  article as summary,
-  sup,
-  table,
-  tbody,
-  td,
-  textarea,
-  tfoot,
-  th,
-  thead,
-  tr,
-  u,
-  ul,
-  i as var
-};

package/lib/parse-css-value.js

@@ -1,122 +0,0 @@
-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
-};