@webstudio-is/css-data 0.74.0 → 0.76.0

package/src/property-parsers/background.ts

@@ -54,7 +54,6 @@ export const backgroundToLonghand = (
   backgroundColor: string | undefined;
 } => {
   const layers: string[] = [];
-
   let tokenStream = background.trim();
 
   tokenStream = tokenStream.endsWith(";")

package/src/property-parsers/box-shadow.test.ts

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

package/src/property-parsers/box-shadow.ts

@@ -0,0 +1,134 @@
+import * as csstree from "css-tree";
+import { LayersValue, TupleValue } from "@webstudio-is/css-data";
+import type {
+  InvalidValue,
+  TupleValueItem,
+  Unit,
+} from "@webstudio-is/css-data";
+import { colord } from "colord";
+
+const cssTreeTryParseValue = (input: string) => {
+  try {
+    const ast = csstree.parse(input, { context: "value" });
+    return ast;
+  } catch {
+    return undefined;
+  }
+};
+
+export const parseBoxShadow = (
+  boxShadow: string
+): LayersValue | InvalidValue => {
+  let tokenStream = boxShadow.trim();
+  tokenStream = tokenStream.endsWith(";")
+    ? tokenStream.slice(0, -1)
+    : tokenStream;
+
+  const cleanupKeywords = ["box-shadow:"];
+
+  for (const cleanupKeyword of cleanupKeywords) {
+    tokenStream = tokenStream.startsWith(cleanupKeyword)
+      ? tokenStream.slice(cleanupKeyword.length).trim()
+      : tokenStream;
+  }
+
+  const cssAst = cssTreeTryParseValue(tokenStream);
+
+  if (cssAst === undefined) {
+    return {
+      type: "invalid",
+      value: boxShadow,
+    };
+  }
+
+  const parsed = csstree.lexer.matchProperty("box-shadow", cssAst);
+  if (parsed.error) {
+    return {
+      type: "invalid",
+      value: boxShadow,
+    };
+  }
+
+  const layers: TupleValue[] = [];
+
+  csstree.walk(cssAst, (node) => {
+    if (node.type === "Value") {
+      const children = node.children;
+      let layer: csstree.CssNode[] = [];
+
+      for (const child of children) {
+        if (children.last === child) {
+          layer.push(child);
+        }
+
+        if (child.type === "Operator" || children.last === child) {
+          const shadow: TupleValueItem[] = [];
+
+          /**
+           * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntax
+           * `inset` and color can be at the start or end and their sequence can be anywhere.
+           * The rest need to foolow the sequence all the time
+           */
+
+          for (let index = 0; index < layer.length; index++) {
+            const item = layer[index];
+
+            if (item.type === "Identifier") {
+              shadow.push({
+                type: "keyword",
+                value: item.name,
+              });
+            }
+
+            if (item.type === "Function" || item.type === "Hash") {
+              const colorValue = colord(csstree.generate(item));
+              if (!colorValue.isValid()) {
+                return;
+              }
+              const rgb = colorValue.toRgb();
+              shadow.push({
+                type: "rgb",
+                alpha: rgb.a,
+                r: rgb.r,
+                g: rgb.g,
+                b: rgb.b,
+              });
+            }
+
+            if (item.type === "Dimension") {
+              shadow.push({
+                type: "unit",
+                value: Number(item.value),
+                unit: item.unit as Unit,
+              });
+            }
+
+            if (item.type === "Number") {
+              shadow.push({
+                type: "unit",
+                value: Number(item.value),
+                unit: "number",
+              });
+            }
+          }
+
+          layers.push({
+            type: "tuple",
+            value: shadow,
+          });
+          layer = [];
+          continue;
+        }
+
+        layer.push(child);
+      }
+    }
+  });
+
+  return layers.length > 0
+    ? {
+        type: "layers",
+        value: layers,
+      }
+    : { type: "invalid", value: boxShadow };
+};

package/src/property-parsers/index.ts

@@ -1 +1,2 @@
 export * from "./background";
+export * from "./box-shadow";

package/src/property-parsers/parsers.ts

@@ -2,3 +2,4 @@
   Longhand properties parsers. Each named export should match a property name.
 */
 export { parseBackgroundImage as backgroundImage } from "./background";
+export { parseBoxShadow as boxShadow } from "./box-shadow";

package/src/schema.ts

@@ -99,31 +99,38 @@ const UnsetValue = z.object({
 });
 export type UnsetValue = z.infer<typeof UnsetValue>;
 
-export const TupleValueItem = z.union([UnitValue, KeywordValue, UnparsedValue]);
+export const TupleValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  RgbValue,
+]);
 export type TupleValueItem = z.infer<typeof TupleValueItem>;
 
 export const TupleValue = z.object({
   type: z.literal("tuple"),
   value: z.array(TupleValueItem),
+  hidden: z.boolean().optional(),
 });
 
 export type TupleValue = z.infer<typeof TupleValue>;
 
+const LayerValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  TupleValue,
+  InvalidValue,
+]);
+
+export type LayerValueItem = z.infer<typeof LayerValueItem>;
 // To support background layers https://developer.mozilla.org/en-US/docs/Web/CSS/background
 // and similar comma separated css properties
 // InvalidValue used in case of asset not found
 export const LayersValue = z.object({
   type: z.literal("layers"),
-  value: z.array(
-    z.union([
-      UnitValue,
-      KeywordValue,
-      UnparsedValue,
-      ImageValue,
-      TupleValue,
-      InvalidValue,
-    ])
-  ),
+  value: z.array(LayerValueItem),
 });
 
 export type LayersValue = z.infer<typeof LayersValue>;

package/lib/types/bin/property-value-descriptions.d.ts

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