@webstudio-is/css-data 0.66.0 → 0.67.0

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,)",
+        },
+      }
+    `);
+  });
+});

package/src/property-parsers/background.ts

@@ -0,0 +1,132 @@
+import * as csstree from "css-tree";
+import { parseCssValue } from "../parse-css-value";
+import type {
+  InvalidValue,
+  LayersValue,
+  RgbValue,
+  UnparsedValue,
+} from "../schema";
+
+export const gradientNames = [
+  "conic-gradient",
+  "linear-gradient",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+];
+
+export const parseBackground = (
+  background: string
+): {
+  backgroundImage: LayersValue | InvalidValue;
+  backgroundColor: RgbValue | undefined;
+} => {
+  const { backgroundImage, backgroundColor: backgroundColorRaw } =
+    backgroundToLonghand(background);
+
+  const backgroundColor = backgroundColorRaw
+    ? (parseCssValue("backgroundColor", backgroundColorRaw) as RgbValue)
+    : undefined;
+
+  return {
+    backgroundImage: parseBackgroundImage(backgroundImage),
+    backgroundColor:
+      backgroundColor && backgroundColor.type === "rgb"
+        ? backgroundColor
+        : undefined,
+  };
+};
+
+export const backgroundToLonghand = (
+  background: string
+): {
+  backgroundImage: string[];
+  backgroundColor: string | undefined;
+} => {
+  const layers: string[] = [];
+
+  let tokenStream = background.trim();
+
+  tokenStream = tokenStream.endsWith(";")
+    ? tokenStream.slice(0, -1)
+    : tokenStream;
+
+  // The user can copy the whole style together with the name of the property from figma or any other tool.
+  // We need to remove the property name from the string.
+  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: string | undefined;
+
+  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 the depth is at level 0 and the next item is null, it's likely that the backgroundColor
+        // is written as rgba(x,y,z,a) or similar format.
+        // nestingLevel is used as a fast way to check existance of parent Function node
+        if (item.next === null && nestingLevel === 0) {
+          backgroundColorRaw = csstree.generate(node);
+        }
+
+        nestingLevel++;
+      }
+
+      if (node.type === "Hash" && item.next === null && nestingLevel === 0) {
+        // If the depth is at level 0 and the next item is null, it's likely that the backgroundColor
+        // is written as hex #XYZFGH
+        backgroundColorRaw = csstree.generate(node);
+      }
+    },
+    leave: (node, item, list) => {
+      if (node.type === "Function") {
+        nestingLevel--;
+      }
+    },
+  });
+
+  return {
+    backgroundImage: layers,
+    backgroundColor: backgroundColorRaw,
+  };
+};
+
+export const parseBackgroundImage = (
+  layers: string[]
+): LayersValue | InvalidValue => {
+  const backgroundImages: UnparsedValue[] = [];
+
+  for (const layer of layers) {
+    if (
+      gradientNames.some((gradientName) => layer.startsWith(gradientName)) ===
+      false
+    ) {
+      break;
+    }
+
+    const layerStyle = 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/src/property-parsers/index.ts

@@ -0,0 +1 @@
+export * from "./background";

package/src/property-parsers/parsers.ts

@@ -0,0 +1,4 @@
+/*
+  Longhand properties parsers. Each named export should match a property name.
+*/
+export { parseBackgroundImage as backgroundImage } from "./background";

package/src/property-parsers/to-longhand.ts

@@ -0,0 +1,4 @@
+/*
+  Shorthand properties unwrappers. Each named export should match a property name.
+*/
+export { backgroundToLonghand as background } from "./background";