@webstudio-is/css-engine 0.0.0-c575b54 → 0.0.0-ca00e2a

package/lib/index.js

@@ -14,6 +14,9 @@ var prefixStyles = (styleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
+    if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
+      newStyleMap.set(`--${property}`, value);
+    }
     newStyleMap.set(property, value);
   }
   return newStyleMap;
@@ -23,7 +26,6 @@ var prefixStyles = (styleMap) => {
 import { z } from "zod";
 
 // src/core/to-value.ts
-import { captureError } from "@webstudio-is/error-utils";
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 var fallbackTransform = (styleValue) => {
   if (styleValue.type !== "fontFamily") {
@@ -106,6 +108,22 @@ var toValue = (styleValue, transformValue) => {
     }
     return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
   }
+  if (value.type === "shadow") {
+    let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
+    if (value.blur) {
+      shadow += ` ${toValue(value.blur)}`;
+    }
+    if (value.spread) {
+      shadow += ` ${toValue(value.spread)}`;
+    }
+    if (value.color) {
+      shadow += ` ${toValue(value.color)}`;
+    }
+    if (value.position === "inset") {
+      shadow += ` inset`;
+    }
+    return shadow;
+  }
   if (value.type === "function") {
     if (value.hidden === true) {
       return "";
@@ -115,7 +133,8 @@ var toValue = (styleValue, transformValue) => {
   if (value.type === "guaranteedInvalid") {
     return "";
   }
-  return captureError(new Error("Unknown value type"), value);
+  value;
+  return "";
 };
 
 // src/schema.ts
@@ -215,12 +234,23 @@ var TupleValue = z.object({
   value: z.array(TupleValueItem),
   hidden: z.boolean().optional()
 });
+var ShadowValue = z.object({
+  type: z.literal("shadow"),
+  hidden: z.boolean().optional(),
+  position: z.union([z.literal("inset"), z.literal("outset")]),
+  offsetX: z.union([UnitValue, VarValue]),
+  offsetY: z.union([UnitValue, VarValue]),
+  blur: z.union([UnitValue, VarValue]).optional(),
+  spread: z.union([UnitValue, VarValue]).optional(),
+  color: z.union([RgbValue, KeywordValue, VarValue]).optional()
+});
 var LayerValueItem = z.union([
   UnitValue,
   KeywordValue,
   UnparsedValue,
   ImageValue,
   TupleValue,
+  ShadowValue,
   RgbValue,
   InvalidValue,
   FunctionValue,
@@ -244,9 +274,9 @@ var StyleValue = z.union([
   GuaranteedInvalidValue,
   InvalidValue,
   UnsetValue,
-  VarValue
+  VarValue,
+  ShadowValue
 ]);
-var Style = z.record(z.string(), StyleValue);
 
 // src/css.ts
 var cssWideKeywords = /* @__PURE__ */ new Set([
@@ -377,7 +407,10 @@ var mergeStyles = (styleMap) => {
 };
 
 // src/core/to-property.ts
-var hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+var hyphenateProperty = (property) => property.replace(
+  /[A-Z]/g,
+  (match) => "-" + match.toLowerCase()
+);
 
 // src/core/rules.ts
 var mapGroupBy = (array, getKey) => {
@@ -417,11 +450,10 @@ var mergeDeclarations = (declarations) => {
   }
   return newDeclarations;
 };
-var generateStyleMap = ({
-  style,
+var generateStyleMap = (style, {
   indent = 0,
   transformValue
-}) => {
+} = {}) => {
   const spaces = " ".repeat(indent);
   let lines = "";
   for (const [property, value] of style) {
@@ -565,8 +597,7 @@ var NestingRule = class {
     const generated = Array.from(styleBySelector).sort(
       ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
     ).map(([selector, style]) => {
-      const content = generateStyleMap({
-        style: prefixStyles(style),
+      const content = generateStyleMap(prefixStyles(style), {
         indent: indent + 2,
         transformValue
       });
@@ -931,6 +962,7 @@ export {
   InvalidValue,
   KeywordValue,
   LayersValue,
+  ShadowValue,
   StyleValue,
   TupleValue,
   TupleValueItem,

package/lib/runtime.js

@@ -0,0 +1,114 @@
+// src/core/to-value.ts
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
+var fallbackTransform = (styleValue) => {
+  if (styleValue.type !== "fontFamily") {
+    return;
+  }
+  let { value } = styleValue;
+  if (value.length === 0) {
+    value = [DEFAULT_FONT_FALLBACK];
+  }
+  if (value.length === 1) {
+    const stack = SYSTEM_FONTS.get(value[0])?.stack;
+    value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
+  }
+  return {
+    type: "fontFamily",
+    value: Array.from(new Set(value))
+  };
+};
+var sanitizeCssUrl = (str) => JSON.stringify(str);
+var toValue = (styleValue, transformValue) => {
+  if (styleValue === void 0) {
+    return "";
+  }
+  const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    const families = [];
+    for (const family of value.value) {
+      families.push(family.includes(" ") ? `"${family}"` : family);
+    }
+    return families.join(", ");
+  }
+  if (value.type === "var") {
+    if (value.hidden) {
+      return "";
+    }
+    let fallbacksString = "";
+    if (value.fallback) {
+      fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
+    }
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  if (value.type === "keyword") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return value.value;
+  }
+  if (value.type === "invalid") {
+    return value.value;
+  }
+  if (value.type === "unset") {
+    return value.value;
+  }
+  if (value.type === "rgb") {
+    return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
+  }
+  if (value.type === "image") {
+    if (value.hidden || value.value.type !== "url") {
+      return "none";
+    }
+    return `url(${sanitizeCssUrl(value.value.url)})`;
+  }
+  if (value.type === "unparsed") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value;
+  }
+  if (value.type === "layers") {
+    const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
+    return valueString === "" ? "none" : valueString;
+  }
+  if (value.type === "tuple") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
+  }
+  if (value.type === "shadow") {
+    let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
+    if (value.blur) {
+      shadow += ` ${toValue(value.blur)}`;
+    }
+    if (value.spread) {
+      shadow += ` ${toValue(value.spread)}`;
+    }
+    if (value.color) {
+      shadow += ` ${toValue(value.color)}`;
+    }
+    if (value.position === "inset") {
+      shadow += ` inset`;
+    }
+    return shadow;
+  }
+  if (value.type === "function") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return `${value.name}(${toValue(value.args, transformValue)})`;
+  }
+  if (value.type === "guaranteedInvalid") {
+    return "";
+  }
+  value;
+  return "";
+};
+export {
+  toValue
+};

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

@@ -1,2 +1,3 @@
-export type Property = "WebkitFontSmoothing" | "MozOsxFontSmoothing" | "-webkit-box-orient" | "-webkit-line-clamp" | "-webkit-overflow-scrolling" | "-webkit-tap-highlight-color" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "color" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "fieldSizing" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom";
+export type CamelCasedProperty = "WebkitFontSmoothing" | "MozOsxFontSmoothing" | "-webkit-box-orient" | "viewTimelineName" | "scrollTimelineName" | "viewTimelineInset" | "-webkit-line-clamp" | "-webkit-overflow-scrolling" | "-webkit-tap-highlight-color" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "color" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "fieldSizing" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom";
+export type HyphenatedProperty = "-webkit-font-smoothing" | "-moz-osx-font-smoothing" | "-webkit-box-orient" | "view-timeline-name" | "scroll-timeline-name" | "view-timeline-inset" | "-webkit-line-clamp" | "-webkit-overflow-scrolling" | "-webkit-tap-highlight-color" | "accent-color" | "align-content" | "align-items" | "align-self" | "animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timing-function" | "appearance" | "aspect-ratio" | "backdrop-filter" | "backface-visibility" | "background-attachment" | "background-blend-mode" | "background-clip" | "background-color" | "background-image" | "background-origin" | "background-position-x" | "background-position-y" | "background-repeat" | "background-size" | "block-size" | "border-block-color" | "border-block-style" | "border-block-width" | "border-block-end-color" | "border-block-end-style" | "border-block-end-width" | "border-block-start-color" | "border-block-start-style" | "border-block-start-width" | "border-bottom-color" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-bottom-style" | "border-bottom-width" | "border-collapse" | "border-end-end-radius" | "border-end-start-radius" | "border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width" | "border-inline-color" | "border-inline-style" | "border-inline-width" | "border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width" | "border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width" | "border-left-color" | "border-left-style" | "border-left-width" | "border-right-color" | "border-right-style" | "border-right-width" | "border-spacing" | "border-start-end-radius" | "border-start-start-radius" | "border-top-color" | "border-top-left-radius" | "border-top-right-radius" | "border-top-style" | "border-top-width" | "bottom" | "box-decoration-break" | "box-shadow" | "box-sizing" | "break-after" | "break-before" | "break-inside" | "caption-side" | "caret-color" | "clear" | "clip" | "clip-path" | "color" | "color-scheme" | "column-count" | "column-fill" | "column-gap" | "column-rule-color" | "column-rule-style" | "column-rule-width" | "column-span" | "column-width" | "contain" | "contain-intrinsic-block-size" | "contain-intrinsic-height" | "contain-intrinsic-inline-size" | "contain-intrinsic-width" | "container-name" | "container-type" | "content" | "content-visibility" | "counter-increment" | "counter-reset" | "counter-set" | "cursor" | "direction" | "display" | "empty-cells" | "field-sizing" | "filter" | "flex-basis" | "flex-direction" | "flex-grow" | "flex-shrink" | "flex-wrap" | "float" | "font-family" | "font-feature-settings" | "font-kerning" | "font-language-override" | "font-optical-sizing" | "font-variation-settings" | "font-size" | "font-size-adjust" | "font-stretch" | "font-style" | "font-synthesis-small-caps" | "font-synthesis-style" | "font-synthesis-weight" | "font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position" | "font-weight" | "grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "hanging-punctuation" | "height" | "hyphenate-character" | "hyphenate-limit-chars" | "hyphens" | "image-orientation" | "image-rendering" | "inline-size" | "inset-block-end" | "inset-block-start" | "inset-inline-end" | "inset-inline-start" | "isolation" | "justify-content" | "justify-items" | "justify-self" | "left" | "letter-spacing" | "line-break" | "line-height" | "list-style-image" | "list-style-position" | "list-style-type" | "margin-block-end" | "margin-block-start" | "margin-bottom" | "margin-inline-end" | "margin-inline-start" | "margin-left" | "margin-right" | "margin-top" | "mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width" | "mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type" | "math-depth" | "math-shift" | "math-style" | "max-block-size" | "max-height" | "max-inline-size" | "max-width" | "min-block-size" | "min-height" | "min-inline-size" | "min-width" | "mix-blend-mode" | "object-fit" | "object-position" | "offset-anchor" | "offset-distance" | "offset-path" | "offset-position" | "offset-rotate" | "opacity" | "order" | "orphans" | "outline-color" | "outline-offset" | "outline-style" | "outline-width" | "overflow-wrap" | "overflow-x" | "overflow-y" | "overscroll-behavior" | "overscroll-behavior-block" | "overscroll-behavior-inline" | "overscroll-behavior-x" | "overscroll-behavior-y" | "padding-block-end" | "padding-block-start" | "padding-bottom" | "padding-inline-end" | "padding-inline-start" | "padding-left" | "padding-right" | "padding-top" | "page" | "page-break-after" | "page-break-before" | "page-break-inside" | "paint-order" | "perspective" | "perspective-origin" | "pointer-events" | "position" | "print-color-adjust" | "quotes" | "resize" | "right" | "rotate" | "row-gap" | "scale" | "scrollbar-color" | "scrollbar-gutter" | "scrollbar-width" | "scroll-behavior" | "scroll-margin-block-start" | "scroll-margin-block-end" | "scroll-margin-bottom" | "scroll-margin-inline-start" | "scroll-margin-inline-end" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top" | "scroll-padding-block-start" | "scroll-padding-block-end" | "scroll-padding-bottom" | "scroll-padding-inline-start" | "scroll-padding-inline-end" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-snap-type" | "shape-image-threshold" | "shape-margin" | "shape-outside" | "tab-size" | "table-layout" | "text-align" | "text-align-last" | "text-combine-upright" | "text-decoration-color" | "text-decoration-line" | "text-decoration-skip-ink" | "text-decoration-style" | "text-decoration-thickness" | "text-emphasis-color" | "text-emphasis-position" | "text-emphasis-style" | "text-indent" | "text-justify" | "text-orientation" | "text-overflow" | "text-rendering" | "text-shadow" | "text-size-adjust" | "text-transform" | "text-underline-offset" | "text-underline-position" | "text-wrap-mode" | "text-wrap-style" | "top" | "touch-action" | "transform" | "transform-box" | "transform-origin" | "transform-style" | "transition-behavior" | "transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function" | "translate" | "unicode-bidi" | "user-select" | "vertical-align" | "visibility" | "white-space-collapse" | "widows" | "width" | "will-change" | "word-break" | "word-spacing" | "word-wrap" | "writing-mode" | "z-index" | "zoom";
 export type Unit = "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";