@webstudio-is/css-data 0.66.0 → 0.67.0

package/lib/property-parsers/background.js

@@ -0,0 +1,75 @@
+import * as csstree from "css-tree";
+import { parseCssValue } from "../parse-css-value";
+const gradientNames = [
+  "conic-gradient",
+  "linear-gradient",
+  "radial-gradient",
+  "repeating-conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient"
+];
+const parseBackground = (background) => {
+  const { backgroundImage, backgroundColor: backgroundColorRaw } = backgroundToLonghand(background);
+  const backgroundColor = backgroundColorRaw ? parseCssValue("backgroundColor", backgroundColorRaw) : void 0;
+  return {
+    backgroundImage: parseBackgroundImage(backgroundImage),
+    backgroundColor: backgroundColor && backgroundColor.type === "rgb" ? backgroundColor : void 0
+  };
+};
+const backgroundToLonghand = (background) => {
+  const layers = [];
+  let tokenStream = background.trim();
+  tokenStream = tokenStream.endsWith(";") ? tokenStream.slice(0, -1) : tokenStream;
+  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;
+  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 (item.next === null && nestingLevel === 0) {
+          backgroundColorRaw = csstree.generate(node);
+        }
+        nestingLevel++;
+      }
+      if (node.type === "Hash" && item.next === null && nestingLevel === 0) {
+        backgroundColorRaw = csstree.generate(node);
+      }
+    },
+    leave: (node, item, list) => {
+      if (node.type === "Function") {
+        nestingLevel--;
+      }
+    }
+  });
+  return {
+    backgroundImage: layers,
+    backgroundColor: backgroundColorRaw
+  };
+};
+const parseBackgroundImage = (layers) => {
+  const backgroundImages = [];
+  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(",") };
+};
+export {
+  backgroundToLonghand,
+  gradientNames,
+  parseBackground,
+  parseBackgroundImage
+};

package/lib/property-parsers/index.js

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

package/lib/property-parsers/parsers.js

@@ -0,0 +1,4 @@
+import { parseBackgroundImage } from "./background";
+export {
+  parseBackgroundImage as backgroundImage
+};

package/lib/property-parsers/to-longhand.js

@@ -0,0 +1,4 @@
+import { backgroundToLonghand } from "./background";
+export {
+  backgroundToLonghand as background
+};

package/lib/types/src/index.d.ts

@@ -3,6 +3,9 @@ export declare const html: Html;
 export * from "./__generated__/keyword-values";
 export * from "./__generated__/units";
 export * from "./schema";
+export * from "./property-parsers/index";
+export * from "./parse-css-value";
+export * from "./parse-css";
 export declare const properties: import("type-fest/source/writable-deep").WritableObjectDeep<{
     readonly accentColor: {
         readonly unitGroups: readonly [];

package/lib/types/src/parse-css-value.d.ts

@@ -0,0 +1,3 @@
+import type { StyleProperty, StyleValue } from "./schema";
+export declare const isValidDeclaration: (property: string, value: string) => boolean;
+export declare const parseCssValue: (property: StyleProperty, input: string) => StyleValue;

package/lib/types/src/parse-css-value.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/src/parse-css.d.ts

@@ -0,0 +1,9 @@
+import { StyleValue, type StyleProperty } from "./schema";
+type Selector = string;
+type Style = {
+    property: StyleProperty;
+    value: StyleValue;
+};
+export type Styles = Record<Selector, Style[]>;
+export declare const parseCss: (css: string) => Styles;
+export {};

package/lib/types/src/parse-css.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/src/property-parsers/background.d.ts

@@ -0,0 +1,11 @@
+import type { InvalidValue, LayersValue, RgbValue } from "../schema";
+export declare const gradientNames: string[];
+export declare const parseBackground: (background: string) => {
+    backgroundImage: LayersValue | InvalidValue;
+    backgroundColor: RgbValue | undefined;
+};
+export declare const backgroundToLonghand: (background: string) => {
+    backgroundImage: string[];
+    backgroundColor: string | undefined;
+};
+export declare const parseBackgroundImage: (layers: string[]) => LayersValue | InvalidValue;

package/lib/types/src/property-parsers/background.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/src/property-parsers/index.d.ts

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

package/lib/types/src/property-parsers/parsers.d.ts

@@ -0,0 +1 @@
+export { parseBackgroundImage as backgroundImage } from "./background";

package/lib/types/src/property-parsers/to-longhand.d.ts

@@ -0,0 +1 @@
+export { backgroundToLonghand as background } from "./background";

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@webstudio-is/css-data",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "description": "CSS Data",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@types/css-tree": "^2.0.0",
+    "@types/css-tree": "^2.3.1",
     "camelcase": "^6.3.0",
-    "css-tree": "^2.3.1",
     "html-tags": "^3.2.0",
+    "jest": "^29.3.1",
     "mdn-data": "2.0.30",
     "tsx": "^3.12.6",
     "type-fest": "^3.7.1",
     "typescript": "5.0.3",
     "zod": "^3.19.1",
     "@webstudio-is/scripts": "^0.0.0",
+    "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/tsconfig": "^1.0.6"
   },
   "peerDependencies": {
@@ -35,6 +36,12 @@
   "license": "MIT",
   "private": false,
   "sideEffects": false,
+  "dependencies": {
+    "colord": "^2.9.3",
+    "hyphenate-style-name": "^1.0.4",
+    "warn-once": "^0.1.1",
+    "css-tree": "^2.3.1"
+  },
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "checks": "pnpm typecheck && pnpm lint",
@@ -42,6 +49,7 @@
     "build": "build-package",
     "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/__generated__ &&  prettier --write \"./src/__generated__/**/*.ts\"",
     "dts": "tsc --declarationDir lib/types",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0"
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   }
 }

package/src/index.ts

@@ -7,6 +7,12 @@ export * from "./__generated__/keyword-values";
 export * from "./__generated__/units";
 export * from "./schema";
 
+// longhand property parsers
+export * from "./property-parsers/index";
+// shorthand property parsers
+export * from "./parse-css-value";
+export * from "./parse-css";
+
 import { properties as generatedProperties } from "./__generated__/properties";
 
 // convert to writable to avoid conflicts with schema type

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

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

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