@webstudio-is/css-data 0.65.0 → 0.67.0

package/src/parse-css-value.ts

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,124 @@
+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),
+  };
+};
+
+export const parseCss = function cssToWS(css: string) {
+  const ast = csstree.parse(css);
+
+  let selectors: Selector[] = [];
+  const styles: 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;
+};

package/src/property-parsers/README.md

@@ -0,0 +1,11 @@
+## Properties Parsers
+
+This folder contains:
+
+- `parsers.ts` individual properties parses
+- `to-longhand.ts` shorthand forms unwrappers
+
+The idea is that these two modules export a number of utilities whose name match the property that they parse or unwrap e.g.:
+
+- `backgroundImage` is a property parser
+- `background` is a "to-longhand" unwrapper

package/src/property-parsers/background.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, test } from "@jest/globals";
+
+import { parseBackground } from "./background";
+
+describe("parseBackground", () => {
+  test("parse background from figma", () => {
+    expect(
+      parseBackground(
+        "linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), none, linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #EBFFFC;"
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": {
+          "alpha": 1,
+          "b": 252,
+          "g": 255,
+          "r": 235,
+          "type": "rgb",
+        },
+        "backgroundImage": {
+          "type": "layers",
+          "value": [
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,#11181C 0%,rgba(17,24,28,0) 36.09%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,rgba(230,60,254,0.33) 0%,rgba(255,174,60,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(54.1% 95.83%at 100% 100%,#FFFFFF 0%,rgba(255,255,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(122.33deg,rgba(74,78,250,0.2) 0%,rgba(0,0,0,0) 69.38%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(92.26% 201.29%at 98.6% 10.65%,rgba(255,174,60,0.3) 0%,rgba(227,53,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(84.64% 267.51%at 10.07% 81.45%,rgba(53,255,182,0.2) 0%,rgba(74,78,250,0.2) 100%)",
+            },
+          ],
+        },
+      }
+    `);
+  });
+
+  test("parse background from figma without backgroundColor", () => {
+    expect(
+      parseBackground(
+        "linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */"
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": undefined,
+        "backgroundImage": {
+          "type": "layers",
+          "value": [
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,#11181C 0%,rgba(17,24,28,0) 36.09%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,rgba(230,60,254,0.33) 0%,rgba(255,174,60,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(54.1% 95.83%at 100% 100%,#FFFFFF 0%,rgba(255,255,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(122.33deg,rgba(74,78,250,0.2) 0%,rgba(0,0,0,0) 69.38%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(92.26% 201.29%at 98.6% 10.65%,rgba(255,174,60,0.3) 0%,rgba(227,53,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(84.64% 267.51%at 10.07% 81.45%,rgba(53,255,182,0.2) 0%,rgba(74,78,250,0.2) 100%)",
+            },
+          ],
+        },
+      }
+    `);
+  });
+
+  test("parse background and skips url background", () => {
+    expect(
+      parseBackground(
+        "url(https://hello.world/some-image), linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */"
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": undefined,
+        "backgroundImage": {
+          "type": "layers",
+          "value": [
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,rgba(230,60,254,0.33) 0%,rgba(255,174,60,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(54.1% 95.83%at 100% 100%,#FFFFFF 0%,rgba(255,255,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(122.33deg,rgba(74,78,250,0.2) 0%,rgba(0,0,0,0) 69.38%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(92.26% 201.29%at 98.6% 10.65%,rgba(255,174,60,0.3) 0%,rgba(227,53,255,0) 100%)",
+            },
+            {
+              "type": "unparsed",
+              "value": "radial-gradient(84.64% 267.51%at 10.07% 81.45%,rgba(53,255,182,0.2) 0%,rgba(74,78,250,0.2) 100%)",
+            },
+          ],
+        },
+      }
+    `);
+  });
+
+  test("parse background partially copied background", () => {
+    expect(
+      parseBackground(
+        "linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), linear-gradient(180deg, "
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": undefined,
+        "backgroundImage": {
+          "type": "layers",
+          "value": [
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,#11181C 0%,rgba(17,24,28,0) 36.09%)",
+            },
+          ],
+        },
+      }
+    `);
+  });
+
+  test("parse background partially commented", () => {
+    expect(
+      parseBackground(
+        "linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), /* radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) */"
+      )
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": undefined,
+        "backgroundImage": {
+          "type": "layers",
+          "value": [
+            {
+              "type": "unparsed",
+              "value": "linear-gradient(180deg,rgba(230,60,254,0.33) 0%,rgba(255,174,60,0) 100%)",
+            },
+          ],
+        },
+      }
+    `);
+  });
+
+  test("parse bad background", () => {
+    expect(parseBackground("linear-gradient(180deg,")).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": undefined,
+        "backgroundImage": {
+          "type": "invalid",
+          "value": "linear-gradient(180deg,)",
+        },
+      }
+    `);
+  });
+});