@webstudio-is/css-data 0.65.0 → 0.67.0

package/lib/parse-css.js

@@ -0,0 +1,95 @@
+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 } from "./schema";
+const parseCssValue = function parseCssValue2(property, value) {
+  const unwrap = toLonghand[property];
+  if (typeof unwrap === "function") {
+    const longhands = unwrap(value);
+    return Object.fromEntries(
+      Object.entries(longhands).map(([property2, value2]) => {
+        const valueParser = parsers[property2];
+        if (typeof valueParser === "function") {
+          return [property2, valueParser(value2)];
+        }
+        if (Array.isArray(value2)) {
+          return [
+            property2,
+            {
+              type: "invalid",
+              value: value2.join("")
+            }
+          ];
+        }
+        if (!value2) {
+          return [property2, { type: "invalid", value: "" }];
+        }
+        return [
+          property2,
+          parseCssValueLonghand(property2, value2)
+        ];
+      })
+    );
+  }
+  return {
+    [property]: parseCssValueLonghand(property, value)
+  };
+};
+const parseCss = function cssToWS(css) {
+  const ast = csstree.parse(css);
+  let selectors = [];
+  const 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,
+        stringValue
+      );
+      Object.entries(parsedCss).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 (true) {
+              console.warn(
+                true,
+                `Declaration parsing for \`${selectors.join(", ")}.${node.property}: ${stringValue}\` failed:
+
+${JSON.stringify(
+                  parsedCss,
+                  null,
+                  2
+                )}`
+              );
+            }
+          }
+        }
+      );
+    }
+  });
+  return styles;
+};
+export {
+  parseCss
+};

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/__generated__/keyword-values.d.ts

@@ -139,7 +139,7 @@ export declare const keywordValues: {
     readonly fontVariantLigatures: readonly ["normal", "none", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures", "contextual", "no-contextual", "initial", "inherit", "unset"];
     readonly fontVariantNumeric: readonly ["normal", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions", "ordinal", "slashed-zero", "initial", "inherit", "unset"];
     readonly fontVariantPosition: readonly ["normal", "sub", "super", "initial", "inherit", "unset"];
-    readonly fontWeight: readonly ["400", "700", "bolder", "lighter", "initial", "inherit", "unset"];
+    readonly fontWeight: readonly ["normal", "bold", "bolder", "lighter", "initial", "inherit", "unset"];
     readonly forcedColorAdjust: readonly ["auto", "none", "initial", "inherit", "unset"];
     readonly gridAutoColumns: readonly ["min-content", "max-content", "auto", "initial", "inherit", "unset"];
     readonly gridAutoFlow: readonly ["row", "column", "dense", "initial", "inherit", "unset"];

package/lib/types/src/__generated__/properties.d.ts

@@ -1438,7 +1438,7 @@ export declare const properties: {
         readonly inherited: true;
         readonly initial: {
             readonly type: "keyword";
-            readonly value: "400";
+            readonly value: "normal";
         };
         readonly popularity: 0.88598106;
         readonly appliesTo: "allElements";
@@ -2355,7 +2355,7 @@ export declare const properties: {
         readonly inherited: false;
         readonly initial: {
             readonly type: "keyword";
-            readonly value: "invertOrCurrentColor";
+            readonly value: "currentColor";
         };
         readonly popularity: 0.09538741;
         readonly appliesTo: "allElements";

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 [];
@@ -1443,7 +1446,7 @@ export declare const properties: import("type-fest/source/writable-deep").Writab
         readonly inherited: true;
         readonly initial: {
             readonly type: "keyword";
-            readonly value: "400";
+            readonly value: "normal";
         };
         readonly popularity: 0.88598106;
         readonly appliesTo: "allElements";
@@ -2360,7 +2363,7 @@ export declare const properties: import("type-fest/source/writable-deep").Writab
         readonly inherited: false;
         readonly initial: {
             readonly type: "keyword";
-            readonly value: "invertOrCurrentColor";
+            readonly value: "currentColor";
         };
         readonly popularity: 0.09538741;
         readonly appliesTo: "allElements";

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.65.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/__generated__/keyword-values.ts

@@ -3836,8 +3836,8 @@ export const keywordValues = {
     "unset",
   ],
   fontWeight: [
-    "400",
-    "700",
+    "normal",
+    "bold",
     "bolder",
     "lighter",
     "initial",

package/src/__generated__/properties.ts

@@ -1445,7 +1445,7 @@ export const properties = {
     inherited: true,
     initial: {
       type: "keyword",
-      value: "400",
+      value: "normal",
     },
     popularity: 0.88598106,
     appliesTo: "allElements",
@@ -2365,7 +2365,7 @@ export const properties = {
     inherited: false,
     initial: {
       type: "keyword",
-      value: "invertOrCurrentColor",
+      value: "currentColor",
     },
     popularity: 0.09538741,
     appliesTo: "allElements",

package/src/html.ts

@@ -48,9 +48,7 @@ const pl40px: Styles[number] = {
 
 const fontWeightBold: Styles[number] = {
   property: "fontWeight",
-  // in browsers defined as bold
-  // though builder accepts only numeric values
-  value: { type: "keyword", value: "700" },
+  value: { type: "keyword", value: "bold" },
 };
 
 const fontStyleItalic: Styles[number] = {

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