@webstudio-is/css-data 0.91.0 → 0.266.0

package/src/parse-css-value.test.ts

@@ -1,136 +0,0 @@
-import { describe, test, expect } from "@jest/globals";
-import { parseCssValue } from "./parse-css-value";
-
-describe("Parse CSS value", () => {
-  describe("number value", () => {
-    test("unitless", () => {
-      expect(parseCssValue("lineHeight", "10")).toEqual({
-        type: "unit",
-        unit: "number",
-        value: 10,
-      });
-    });
-  });
-
-  describe("unit value", () => {
-    test("with unit", () => {
-      expect(parseCssValue("width", "10px")).toEqual({
-        type: "unit",
-        unit: "px",
-        value: 10,
-      });
-    });
-
-    test("empty input", () => {
-      expect(parseCssValue("width", "")).toEqual({
-        type: "invalid",
-        value: "",
-      });
-    });
-  });
-
-  describe("keyword value", () => {
-    test("keyword", () => {
-      expect(parseCssValue("width", "auto")).toEqual({
-        type: "keyword",
-        value: "auto",
-      });
-    });
-
-    test("keyword display block", () => {
-      expect(parseCssValue("display", "block")).toEqual({
-        type: "keyword",
-        value: "block",
-      });
-    });
-
-    test("keyword with unit", () => {
-      expect(parseCssValue("width", "autopx")).toEqual({
-        type: "invalid",
-        value: "autopx",
-      });
-    });
-
-    test("invalid", () => {
-      // This will return px as a fallback unit, as number is not valid for width.
-      expect(parseCssValue("width", "10")).toEqual({
-        type: "invalid",
-        value: "10",
-      });
-
-      // This will return number unit, as number is valid for aspectRatio.
-      expect(parseCssValue("aspectRatio", "10")).toEqual({
-        type: "unit",
-        unit: "number",
-        value: 10,
-      });
-    });
-  });
-
-  describe("Unparesd valid values", () => {
-    test("Simple valid function values", () => {
-      expect(parseCssValue("filter", "blur(4px)")).toEqual({
-        type: "unparsed",
-        value: "blur(4px)",
-      });
-
-      expect(parseCssValue("width", "calc(4px + 16em)")).toEqual({
-        type: "unparsed",
-        value: "calc(4px + 16em)",
-      });
-    });
-
-    test("Multiple valid function values", () => {
-      expect(
-        parseCssValue(
-          "filter",
-          "blur(4px) drop-shadow(16px 16px 20px blue) opacity(25%)"
-        )
-      ).toEqual({
-        type: "unparsed",
-        value: "blur(4px) drop-shadow(16px 16px 20px blue) opacity(25%)",
-      });
-
-      expect(parseCssValue("filter", "blur(calc(4px + 16em))")).toEqual({
-        type: "unparsed",
-        value: "blur(calc(4px + 16em))",
-      });
-    });
-
-    test("Invalid function values", () => {
-      expect(parseCssValue("width", "blur(4)")).toEqual({
-        type: "invalid",
-        value: "blur(4)",
-      });
-    });
-  });
-
-  describe("Colors", () => {
-    test("Color rgba values", () => {
-      expect(parseCssValue("backgroundColor", "rgba(0,0,0,0)")).toEqual({
-        type: "rgb",
-        alpha: 0,
-        b: 0,
-        g: 0,
-        r: 0,
-      });
-    });
-
-    test("Color rgba values", () => {
-      expect(parseCssValue("backgroundColor", "#00220011")).toEqual({
-        type: "rgb",
-        alpha: 0.07,
-        b: 0,
-        g: 34,
-        r: 0,
-      });
-    });
-
-    test("Color rgba values", () => {
-      expect(parseCssValue("color", "red")).toEqual({
-        type: "keyword",
-        value: "red",
-      });
-    });
-  });
-});

package/src/parse-css-value.ts

@@ -1,157 +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";
-import type { StyleProperty, StyleValue, Unit } from "./schema";
-
-const cssTryParseValue = (input: string) => {
-  try {
-    const ast = csstree.parse(input, { context: "value" });
-    return ast;
-  } catch {
-    return undefined;
-  }
-};
-
-export const isValidDeclaration = (
-  property: string,
-  value: string
-): boolean => {
-  const ast = cssTryParseValue(value);
-
-  if (ast == null) {
-    return false;
-  }
-
-  const cssPropertyName = hyphenate(property);
-
-  const matchResult = csstree.lexer.matchProperty(cssPropertyName, ast);
-
-  const isValidDeclaration = matchResult.matched != null;
-
-  // @todo remove after fix https://github.com/csstree/csstree/issues/246
-  if (isValidDeclaration && 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 isValidDeclaration;
-};
-
-export const parseCssValue = (
-  property: StyleProperty, // Handles only long-hand values.
-  input: string
-): StyleValue => {
-  const invalidValue = {
-    type: "invalid",
-    value: input,
-  } as const;
-
-  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
-  ) {
-    // Try extract units from 1st children
-    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 as (typeof units)[keyof typeof units][number];
-
-      for (const unitGroup of Object.values(units)) {
-        if (unitGroup.includes(unit as never)) {
-          return {
-            type: "unit",
-            unit: unit as 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 as keyof typeof keywordValues
-      ] as ReadonlyArray<string>;
-      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],
-        };
-      }
-    }
-  }
-
-  // Probably a color (we can use csstree.lexer.matchProperty(cssPropertyName, ast) to extract the type but this looks much simpler)
-  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,
-  };
-};

package/src/parse-css.test.ts

@@ -1,101 +0,0 @@
-import { describe, expect, test } from "@jest/globals";
-import { parseCss } from "./parse-css";
-
-describe("Parse CSS", () => {
-  test("one class selector rules", () => {
-    expect(parseCss(`.test { color: #ff0000 }`)).toMatchInlineSnapshot(`
-      {
-        "test": [
-          {
-            "property": "color",
-            "value": {
-              "alpha": 1,
-              "b": 0,
-              "g": 0,
-              "r": 255,
-              "type": "rgb",
-            },
-          },
-        ],
-      }
-    `);
-  });
-
-  test("parses supported shorthand values", () => {
-    expect(
-      parseCss(
-        `.test { background: #ff0000 linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), #EBFFFC; }`
-      ).test
-    ).toMatchInlineSnapshot(`
-      [
-        {
-          "property": "backgroundImage",
-          "value": {
-            "type": "layers",
-            "value": [
-              {
-                "type": "unparsed",
-                "value": "linear-gradient(180deg,#11181C 0%,rgba(17,24,28,0) 36.09%)",
-              },
-            ],
-          },
-        },
-        {
-          "property": "backgroundColor",
-          "value": {
-            "alpha": 1,
-            "b": 252,
-            "g": 255,
-            "r": 235,
-            "type": "rgb",
-          },
-        },
-      ]
-    `);
-  });
-
-  test("parses unsupported shorthand values", () => {
-    expect(parseCss(`.test { padding: 4px }`).test[0]).toMatchInlineSnapshot(`
-      {
-        "property": "padding",
-        "value": {
-          "type": "unit",
-          "unit": "px",
-          "value": 4,
-        },
-      }
-    `);
-  });
-
-  test("complex selector rules", () => {
-    expect(parseCss(`.test, a, .test2, .test:hover { color: #ff0000 }`))
-      .toMatchInlineSnapshot(`
-      {
-        "test": [
-          {
-            "property": "color",
-            "value": {
-              "alpha": 1,
-              "b": 0,
-              "g": 0,
-              "r": 255,
-              "type": "rgb",
-            },
-          },
-        ],
-        "test2": [
-          {
-            "property": "color",
-            "value": {
-              "alpha": 1,
-              "b": 0,
-              "g": 0,
-              "r": 255,
-              "type": "rgb",
-            },
-          },
-        ],
-      }
-    `);
-  });
-});

package/src/parse-css.ts

@@ -1,137 +0,0 @@
-import * as csstree from "css-tree";
-import { parseCssValue as parseCssValueLonghand } from "./parse-css-value";
-import * as parsers from "./property-parsers/parsers";
-import * as toLonghand from "./property-parsers/to-longhand";
-import { StyleValue, type Style as S, type StyleProperty } from "./schema";
-
-type Selector = string;
-type Style = {
-  // @todo add support for states and media queries in addition to declarations
-  property: StyleProperty;
-  value: StyleValue;
-};
-
-export type Styles = Record<Selector, Style[]>;
-
-type Longhand = keyof typeof toLonghand;
-
-const parseCssValue = function parseCssValue(
-  property: Longhand | StyleProperty,
-  value: string
-): S {
-  const unwrap = toLonghand[property as Longhand];
-
-  if (typeof unwrap === "function") {
-    const longhands = unwrap(value);
-
-    return Object.fromEntries(
-      Object.entries(longhands).map(([property, value]) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore @todo remove this ignore: property is a `keyof typeof longhands` which is a key in parsers but TS can't infer the link
-        const valueParser = parsers[property];
-
-        if (typeof valueParser === "function") {
-          return [property, valueParser(value)];
-        }
-
-        if (Array.isArray(value)) {
-          return [
-            property,
-            {
-              type: "invalid",
-              value: value.join(""),
-            },
-          ];
-        }
-
-        if (!value) {
-          return [property, { type: "invalid", value: "" }];
-        }
-
-        return [
-          property,
-          parseCssValueLonghand(property as StyleProperty, value),
-        ];
-      })
-    );
-  }
-
-  return {
-    [property]: parseCssValueLonghand(property as StyleProperty, value),
-  };
-};
-
-const cssTreeTryParse = (input: string) => {
-  try {
-    const ast = csstree.parse(input);
-    return ast;
-  } catch {
-    return undefined;
-  }
-};
-
-export const parseCss = function cssToWS(css: string) {
-  const ast = cssTreeTryParse(css);
-
-  let selectors: Selector[] = [];
-  const styles: Styles = {};
-
-  if (ast === undefined) {
-    return 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 as Longhand | StyleProperty,
-        stringValue
-      );
-
-      (Object.entries(parsedCss) as [StyleProperty, StyleValue][]).forEach(
-        ([property, value]) => {
-          try {
-            StyleValue.parse(value);
-            selectors.forEach((selector) => {
-              if (Array.isArray(styles[selector])) {
-                styles[selector].push({
-                  property,
-                  value,
-                });
-              } else {
-                styles[selector] = [{ property, value }];
-              }
-            });
-          } catch (error) {
-            if (process.env.NODE_ENV !== "production") {
-              // eslint-disable-next-line no-console
-              console.warn(
-                true,
-                `Declaration parsing for \`${selectors.join(", ")}.${
-                  node.property
-                }: ${stringValue}\` failed:\n\n${JSON.stringify(
-                  parsedCss,
-                  null,
-                  2
-                )}`
-              );
-            }
-          }
-        }
-      );
-    }
-  });
-
-  return styles;
-};