@webstudio-is/css-data 0.90.0 → 0.266.0

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

@@ -1,130 +0,0 @@
-import * as csstree from "css-tree";
-import { LayersValue, TupleValue } from "../schema";
-import type { InvalidValue, TupleValueItem, Unit } from "../schema";
-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,2 +0,0 @@
-export * from "./background";
-export * from "./box-shadow";

package/src/property-parsers/parsers.ts

@@ -1,5 +0,0 @@
-/*
-  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/property-parsers/to-longhand.ts

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

package/src/schema.ts

@@ -1,193 +0,0 @@
-import { units } from "./__generated__/units";
-import type { properties } from "./__generated__/properties";
-import { z } from "zod";
-
-type Properties = typeof properties & {
-  [custom: CustomProperty]: {
-    appliesTo: "allElements";
-    initial: string;
-    inherited: boolean;
-  };
-};
-
-export type StyleProperty = keyof Properties;
-
-type CustomProperty = `--${string}`;
-
-export type AppliesTo = Properties[StyleProperty]["appliesTo"];
-
-export type UnitGroup = keyof typeof units;
-
-type UnitEnum = (typeof units)[UnitGroup][number];
-
-const Unit = z.union([
-  // expected tuple with at least single element
-  // so cast to tuple with single union element to get correct inference
-  z.enum(Object.values(units).flat() as [UnitEnum]),
-  z.literal("number"),
-]);
-
-export type Unit = z.infer<typeof Unit>;
-
-export const UnitValue = z.object({
-  type: z.literal("unit"),
-  unit: Unit,
-  value: z.number(),
-});
-
-export type UnitValue = z.infer<typeof UnitValue>;
-
-export const KeywordValue = z.object({
-  type: z.literal("keyword"),
-  // @todo use exact type
-  value: z.string(),
-});
-export type KeywordValue = z.infer<typeof KeywordValue>;
-
-/**
- * Valid unparsed css value
- **/
-export const UnparsedValue = z.object({
-  type: z.literal("unparsed"),
-  value: z.string(),
-  // For the builder we want to be able to hide background-image
-  hidden: z.boolean().optional(),
-});
-
-export type UnparsedValue = z.infer<typeof UnparsedValue>;
-
-const FontFamilyValue = z.object({
-  type: z.literal("fontFamily"),
-  value: z.array(z.string()),
-});
-export type FontFamilyValue = z.infer<typeof FontFamilyValue>;
-
-const RgbValue = z.object({
-  type: z.literal("rgb"),
-  r: z.number(),
-  g: z.number(),
-  b: z.number(),
-  alpha: z.number(),
-});
-export type RgbValue = z.infer<typeof RgbValue>;
-
-export const ImageValue = z.object({
-  type: z.literal("image"),
-  value: z.union([
-    z.object({ type: z.literal("asset"), value: z.string() }),
-    // url is not stored in db and only used by css-engine transformValue
-    // to prepare image value for rendering
-    z.object({ type: z.literal("url"), url: z.string() }),
-  ]),
-  // For the builder we want to be able to hide images
-  hidden: z.boolean().optional(),
-});
-
-export type ImageValue = z.infer<typeof ImageValue>;
-
-// We want to be able to render the invalid value
-// and show it is invalid visually, without saving it to the db
-export const InvalidValue = z.object({
-  type: z.literal("invalid"),
-  value: z.string(),
-});
-export type InvalidValue = z.infer<typeof InvalidValue>;
-
-const UnsetValue = z.object({
-  type: z.literal("unset"),
-  value: z.literal(""),
-});
-export type UnsetValue = z.infer<typeof UnsetValue>;
-
-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(LayerValueItem),
-});
-
-export type LayersValue = z.infer<typeof LayersValue>;
-
-const ValidStaticStyleValue = z.union([
-  ImageValue,
-  LayersValue,
-  UnitValue,
-  KeywordValue,
-  FontFamilyValue,
-  RgbValue,
-  UnparsedValue,
-  TupleValue,
-]);
-
-export type ValidStaticStyleValue = z.infer<typeof ValidStaticStyleValue>;
-
-/**
- * All StyleValue types that going to need wrapping into a CSS variable when rendered
- * on canvas inside builder.
- * Values like InvalidValue, UnsetValue, VarValue don't need to be wrapped
- */
-export const isValidStaticStyleValue = (
-  styleValue: StyleValue
-): styleValue is ValidStaticStyleValue => {
-  // guard against invalid checks
-  const staticStyleValue = styleValue as ValidStaticStyleValue;
-  return (
-    staticStyleValue.type === "image" ||
-    staticStyleValue.type === "layers" ||
-    staticStyleValue.type === "unit" ||
-    staticStyleValue.type === "keyword" ||
-    staticStyleValue.type === "fontFamily" ||
-    staticStyleValue.type === "rgb" ||
-    staticStyleValue.type === "unparsed" ||
-    staticStyleValue.type === "tuple"
-  );
-};
-
-const VarValue = z.object({
-  type: z.literal("var"),
-  value: z.string(),
-  fallbacks: z.array(ValidStaticStyleValue),
-});
-export type VarValue = z.infer<typeof VarValue>;
-
-export const StyleValue = z.union([
-  ValidStaticStyleValue,
-  InvalidValue,
-  UnsetValue,
-  VarValue,
-]);
-
-export type StyleValue = z.infer<typeof StyleValue>;
-
-const Style = z.record(z.string(), StyleValue);
-
-export type Style = {
-  [property in StyleProperty]?: StyleValue;
-} & { [property: CustomProperty]: StyleValue };