@webstudio-is/css-data 0.91.0 → 0.266.0

package/src/property-parsers/README.md

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

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

@@ -1,147 +0,0 @@
-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,
-  };
-};
-
-const cssTreeTryParseValue = (input: string) => {
-  try {
-    const ast = csstree.parse(input, { context: "value" });
-    return ast;
-  } catch {
-    return 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 = cssTreeTryParseValue(tokenStream);
-
-  if (cssAst === undefined) {
-    return {
-      backgroundImage: [],
-      backgroundColor: undefined,
-    };
-  }
-
-  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/box-shadow.test.ts

@@ -1,294 +0,0 @@
-import { describe, expect, test } from "@jest/globals";
-
-import { parseBoxShadow } from "./box-shadow";
-
-describe("parseBoxShadow", () => {
-  test("parses value and returns invalid when used a invalid color", () => {
-    expect(parseBoxShadow(`10px 10px 5px foo`)).toMatchInlineSnapshot(`
-      {
-        "type": "invalid",
-        "value": "10px 10px 5px foo",
-      }
-    `);
-  });
-
-  test("throws error when passed a value without a unit", () => {
-    expect(parseBoxShadow(`10 10px 5px red`)).toMatchInlineSnapshot(`
-      {
-        "type": "invalid",
-        "value": "10 10px 5px red",
-      }
-    `);
-  });
-
-  test("inset and color values can be interchanged", () => {
-    expect(parseBoxShadow(`inset 10px 10px 5px black;`)).toMatchInlineSnapshot(`
-      {
-        "type": "layers",
-        "value": [
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "keyword",
-                "value": "inset",
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 10,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 10,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 5,
-              },
-              {
-                "type": "keyword",
-                "value": "black",
-              },
-            ],
-          },
-        ],
-      }
-    `);
-  });
-
-  test("parses value when inset is used but missing blur-radius", () => {
-    expect(parseBoxShadow(`box-shadow: inset 5em 1em gold`))
-      .toMatchInlineSnapshot(`
-      {
-        "type": "layers",
-        "value": [
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "keyword",
-                "value": "inset",
-              },
-              {
-                "type": "unit",
-                "unit": "em",
-                "value": 5,
-              },
-              {
-                "type": "unit",
-                "unit": "em",
-                "value": 1,
-              },
-              {
-                "type": "keyword",
-                "value": "gold",
-              },
-            ],
-          },
-        ],
-      }
-    `);
-  });
-
-  test("parses value when offsetX and offsetY are used", () => {
-    expect(parseBoxShadow(`box-shadow: 60px -16px teal;`))
-      .toMatchInlineSnapshot(`
-      {
-        "type": "layers",
-        "value": [
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 60,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": -16,
-              },
-              {
-                "type": "keyword",
-                "value": "teal",
-              },
-            ],
-          },
-        ],
-      }
-    `);
-  });
-
-  test("parses value from figma", () => {
-    expect(
-      parseBoxShadow(
-        "box-shadow: 0 60px 80px rgba(0,0,0,0.60), 0 45px 26px rgba(0,0,0,0.14);"
-      )
-    ).toMatchInlineSnapshot(`
-      {
-        "type": "layers",
-        "value": [
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 60,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 80,
-              },
-              {
-                "alpha": 0.6,
-                "b": 0,
-                "g": 0,
-                "r": 0,
-                "type": "rgb",
-              },
-            ],
-          },
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 45,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 26,
-              },
-              {
-                "alpha": 0.14,
-                "b": 0,
-                "g": 0,
-                "r": 0,
-                "type": "rgb",
-              },
-            ],
-          },
-        ],
-      }
-    `);
-  });
-
-  test(`parses multiple layers of box-shadow property`, () => {
-    expect(
-      parseBoxShadow(`box-shadow:
-    0 0 5px rgba(0, 0, 0, 0.2),
-    inset 0 0 10px rgba(0, 0, 0, 0.3),
-    0 0 15px rgba(0, 0, 0, 0.4);
-  `)
-    ).toMatchInlineSnapshot(`
-      {
-        "type": "layers",
-        "value": [
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 5,
-              },
-              {
-                "alpha": 0.2,
-                "b": 0,
-                "g": 0,
-                "r": 0,
-                "type": "rgb",
-              },
-            ],
-          },
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "keyword",
-                "value": "inset",
-              },
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 10,
-              },
-              {
-                "alpha": 0.3,
-                "b": 0,
-                "g": 0,
-                "r": 0,
-                "type": "rgb",
-              },
-            ],
-          },
-          {
-            "type": "tuple",
-            "value": [
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "number",
-                "value": 0,
-              },
-              {
-                "type": "unit",
-                "unit": "px",
-                "value": 15,
-              },
-              {
-                "alpha": 0.4,
-                "b": 0,
-                "g": 0,
-                "r": 0,
-                "type": "rgb",
-              },
-            ],
-          },
-        ],
-      }
-    `);
-  });
-});