react-native-css 3.0.0-nightly.4723140 → 3.0.0-nightly.61014be

package/src/compiler/declarations.ts

@@ -1,259 +1,244 @@
-/* eslint-disable */
 // cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto
 
+import Color from "colorjs.io";
 import type {
-  AlignContent,
-  AlignItems,
-  AlignSelf,
   Angle,
+  BorderBlockColor,
   BorderSideWidth,
   BorderStyle,
-  BoxShadow,
   ColorOrAuto,
   CssColor,
   Declaration,
   DimensionPercentageFor_LengthValue,
-  Display,
   EnvironmentVariable,
-  FontFamily,
   FontSize,
   FontStyle,
   FontVariantCaps,
   FontWeight,
-  GapValue,
-  JustifyContent,
+  Gradient,
+  GradientItemFor_DimensionPercentageFor_LengthValue,
   Length,
   LengthPercentageOrAuto,
   LengthValue,
+  LineDirection,
   LineHeight,
   LineStyle,
   MaxSize,
   NumberOrPercentage,
-  OverflowKeyword,
-  PropertyId,
   Scale,
   Size,
-  SVGPaint,
-  TextAlign,
-  TextDecorationLine,
-  TextDecorationStyle,
-  TextShadow,
+  Size2DFor_DimensionPercentageFor_LengthValue,
   Time,
   Token,
   TokenOrValue,
   Translate,
   UnresolvedColor,
-  UserSelect,
-  VerticalAlign,
 } from "lightningcss";
 
-import { emVariableName } from "../runtime/native/styles/constants";
-import { isStyleDescriptorArray } from "../runtime/utils/style-value";
-import type { AddFn } from "./add";
 import type {
-  FeatureFlagRecord,
   StyleDescriptor,
   StyleFunction,
+  StyleRule,
 } from "./compiler.types";
 import { parseEasingFunction, parseIterationCount } from "./keyframes";
 import { toRNProperty } from "./selectors";
+import type { StylesheetBuilder } from "./stylesheet";
+
+const CommaSeparator = Symbol("CommaSeparator");
+
+type DeclarationType<P extends Declaration["property"]> = Extract<
+  Declaration,
+  { property: P }
+>;
+
+type Parser<T extends Declaration["property"] = Declaration["property"]> = (
+  declaration: Extract<Declaration, { property: T }>,
+  builder: StylesheetBuilder,
+  propertyName: string,
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+) => StyleDescriptor | void;
 
 const propertyRename: Record<string, string> = {
-  "margin-inline-start": "margin-start",
-  "margin-inline-end": "margin-end",
-  "padding-inline-start": "padding-start",
-  "padding-inline-end": "padding-end",
+  "background-image": "experimental_backgroundImage",
 };
 
-const validProperties = [
-  "align-content",
-  "align-items",
-  "align-self",
+const unparsedRuntimeParsing = new Set([
   "animation",
-  "animation-delay",
-  "animation-direction",
-  "animation-duration",
-  "animation-fill-mode",
-  "animation-iteration-count",
-  "animation-name",
-  "animation-play-state",
-  "animation-timing-function",
-  "aspect-ratio",
-  "background-color",
-  "block-size",
-  "border",
-  "border-block",
-  "border-block-color",
-  "border-block-end",
-  "border-block-end-color",
-  "border-block-end-width",
-  "border-block-start",
-  "border-block-start-color",
-  "border-block-start-width",
-  "border-block-width",
-  "border-bottom",
-  "border-bottom-color",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius",
-  "border-bottom-width",
-  "border-color",
-  "border-end-end-radius",
-  "border-end-start-radius",
-  "border-inline",
-  "border-inline-color",
-  "border-inline-end",
-  "border-inline-end-color",
-  "border-inline-end-width",
-  "border-inline-start",
-  "border-inline-start-color",
-  "border-inline-start-width",
-  "border-inline-width",
-  "border-left",
-  "border-left-color",
-  "border-left-width",
-  "border-radius",
-  "border-right",
-  "border-right-color",
-  "border-right-width",
-  "border-start-end-radius",
-  "border-start-start-radius",
-  "border-style",
-  "border-top",
-  "border-top-color",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-top-width",
-  "border-width",
-  "bottom",
-  "box-shadow",
-  "caret-color",
-  "color",
-  "column-gap",
-  "container",
-  "container-name",
-  "container-type",
-  "display",
-  "fill",
-  "flex",
-  "flex-basis",
-  "flex-direction",
-  "flex-flow",
-  "flex-grow",
-  "flex-shrink",
-  "flex-wrap",
-  "font",
-  "font-family",
-  "font-size",
-  "font-style",
-  "font-variant-caps",
-  "font-weight",
-  "gap",
-  "height",
-  "inline-size",
-  "inset",
-  "inset-block",
-  "inset-block-end",
-  "inset-block-start",
-  "inset-inline",
-  "inset-inline-end",
-  "inset-inline-start",
-  "justify-content",
-  "left",
-  "letter-spacing",
-  "line-height",
-  "margin",
-  "margin-block",
-  "margin-block-end",
-  "margin-block-start",
-  "margin-bottom",
-  "margin-inline",
-  "margin-inline-end",
-  "margin-inline-start",
-  "margin-left",
-  "margin-right",
-  "margin-top",
-  "max-block-size",
-  "max-height",
-  "max-inline-size",
-  "max-width",
-  "min-block-size",
-  "min-height",
-  "min-inline-size",
-  "min-width",
-  "opacity",
-  "overflow",
-  "padding",
-  "padding-block",
-  "padding-block-end",
-  "padding-block-start",
-  "padding-bottom",
-  "padding-inline",
-  "padding-inline-end",
-  "padding-inline-start",
-  "padding-left",
-  "padding-right",
-  "padding-top",
-  "pointer-events",
-  "position",
-  "right",
-  "rotate",
-  "row-gap",
-  "scale",
-  "stroke",
-  "stroke-width",
-  "text-align",
-  "text-decoration",
-  "text-decoration-color",
-  "text-decoration-line",
-  "text-decoration-style",
   "text-shadow",
-  "text-transform",
-  "top",
   "transform",
-  "transition",
-  "transition-delay",
-  "transition-duration",
-  "transition-property",
-  "transition-timing-function",
-  "translate",
-  "user-select",
-  "vertical-align",
-  "width",
-  "z-index",
-] as const;
-
-const validPropertiesLoose = new Set<string>(validProperties);
-
-export interface ParseDeclarationOptions {
-  inlineRem?: number | false;
-  features?: FeatureFlagRecord;
-  allowAuto?: boolean;
-}
-
-export interface ParserOptions extends ParseDeclarationOptions {
-  add: AddFn;
-  addWarning: AddWarningShort;
-}
-
-declare function AddWarning(type: "property", property: string): undefined;
-declare function AddWarning(type: "function", name: string): undefined;
-declare function AddWarning(
-  type: "value",
-  property: string,
-  value: any,
-): undefined;
-export type AddWarningFn = typeof AddWarning;
+  "box-shadow",
+  "border",
+]);
+
+const parsers: {
+  [K in Declaration["property"]]?: Parser<K>;
+} = {
+  "align-content": parseAlignContent,
+  "align-items": parseAlignItems,
+  "align-self": parseAlignSelf,
+  "animation": addAnimationValue,
+  "animation-delay": addAnimationValue,
+  "animation-direction": addAnimationValue,
+  "animation-duration": addAnimationValue,
+  "animation-fill-mode": addAnimationValue,
+  "animation-iteration-count": addAnimationValue,
+  "animation-name": addAnimationValue,
+  "animation-play-state": addAnimationValue,
+  "animation-timing-function": addAnimationValue,
+  "aspect-ratio": parseAspectRatio,
+  "background-color": parseColorDeclaration,
+  "background-image": parseBackgroundImage,
+  "block-size": parseSizeDeclaration,
+  "border": parseBorder,
+  "border-block": parseBorderBlock,
+  "border-block-color": parseBorderBlockColor,
+  "border-block-end": parseBorderBlockEnd,
+  "border-block-end-color": parseColorDeclaration,
+  "border-block-end-width": parseBorderSideWidthDeclaration,
+  "border-block-start": parseBorderBlockStart,
+  "border-block-start-color": parseColorDeclaration,
+  "border-block-start-width": parseBorderSideWidthDeclaration,
+  "border-block-width": parseBorderBlockWidth,
+  "border-bottom": parseBorderSide,
+  "border-bottom-color": parseColorDeclaration,
+  "border-bottom-left-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-bottom-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-bottom-width": parseBorderSideWidthDeclaration,
+  "border-color": parseBorderColor,
+  "border-end-end-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-end-start-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-inline": parseBorderInline,
+  "border-inline-color": parseBorderBlockColor,
+  "border-inline-end": parseBorderInlineEnd,
+  "border-inline-end-color": parseColorDeclaration,
+  "border-inline-end-width": parseBorderSideWidthDeclaration,
+  "border-inline-start": parseBorderInlineStart,
+  "border-inline-start-color": parseColorDeclaration,
+  "border-inline-start-width": parseBorderSideWidthDeclaration,
+  "border-inline-width": parseBorderBlockWidth,
+  "border-left": parseBorderSide,
+  "border-left-color": parseColorDeclaration,
+  "border-left-width": parseBorderSideWidthDeclaration,
+  "border-radius": parseBorderRadius,
+  "border-right": parseBorderSide,
+  "border-right-color": parseColorDeclaration,
+  "border-right-width": parseBorderSideWidthDeclaration,
+  "border-start-end-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-start-start-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-style": parseBorderStyleDeclaration,
+  "border-top": parseBorderSide,
+  "border-top-color": parseColorDeclaration,
+  "border-top-left-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-top-right-radius": parseSize2DDimensionPercentageDeclaration,
+  "border-top-width": parseBorderSideWidthDeclaration,
+  "border-width": parseBorderWidth,
+  "bottom": parseSizeDeclaration,
+  "box-shadow": parseBoxShadow,
+  "caret-color": parseColorOrAuto,
+  "color": parseFontColorDeclaration,
+  "column-gap": parseGap,
+  "container": parseContainer,
+  "container-name": parseContainerName,
+  "container-type": parseContainerType,
+  "display": parseDisplay,
+  "fill": parseSVGPaint,
+  "filter": parseFilter,
+  "flex": parseFlex,
+  "flex-basis": parseLengthPercentageOrAutoDeclaration,
+  "flex-direction": ({ value }) => value,
+  "flex-flow": parseFlexFlow,
+  "flex-grow": ({ value }) => value,
+  "flex-shrink": ({ value }) => value,
+  "flex-wrap": ({ value }) => value,
+  "font": parseFont,
+  "font-family": parseFontFamily,
+  "font-size": parseFontSizeDeclaration,
+  "font-style": parseFontStyleDeclaration,
+  "font-variant-caps": parseFontVariantCapsDeclaration,
+  "font-weight": parseFontWeightDeclaration,
+  "gap": parseGap,
+  "height": parseSizeDeclaration,
+  "inline-size": parseSizeDeclaration,
+  "inset": parseInset,
+  "inset-block": parseInsetBlock,
+  "inset-block-end": parseLengthPercentageOrAutoDeclaration,
+  "inset-block-start": parseLengthPercentageOrAutoDeclaration,
+  "inset-inline": parseInsetInline,
+  "inset-inline-end": parseLengthPercentageOrAutoDeclaration,
+  "inset-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "justify-content": parseJustifyContent,
+  "left": parseSizeDeclaration,
+  "letter-spacing": parseLetterSpacing,
+  "line-height": parseLineHeightDeclaration,
+  "margin": parseMargin,
+  "margin-block": parseMarginBlock,
+  "margin-block-end": parseLengthPercentageOrAutoDeclaration,
+  "margin-block-start": parseLengthPercentageOrAutoDeclaration,
+  "margin-bottom": parseSizeDeclaration,
+  "margin-inline": parseMarginInline,
+  "margin-inline-end": parseLengthPercentageOrAutoDeclaration,
+  "margin-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "margin-left": parseSizeDeclaration,
+  "margin-right": parseSizeDeclaration,
+  "margin-top": parseSizeDeclaration,
+  "max-block-size": parseSizeDeclaration,
+  "max-height": parseSizeDeclaration,
+  "max-inline-size": parseSizeDeclaration,
+  "max-width": parseSizeDeclaration,
+  "min-block-size": parseSizeDeclaration,
+  "min-height": parseSizeDeclaration,
+  "min-inline-size": parseSizeDeclaration,
+  "min-width": parseSizeDeclaration,
+  "opacity": ({ value }) => value,
+  "overflow": parseOverflow,
+  "padding": parsePadding,
+  "padding-block": parsePaddingBlock,
+  "padding-block-end": parseLengthPercentageOrAutoDeclaration,
+  "padding-block-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-bottom": parseSizeDeclaration,
+  "padding-inline": parsePaddingInline,
+  "padding-inline-end": parseLengthPercentageOrAutoDeclaration,
+  "padding-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-left": parseSizeDeclaration,
+  "padding-right": parseSizeDeclaration,
+  "padding-top": parseSizeDeclaration,
+  "position": parsePosition,
+  "right": parseSizeDeclaration,
+  "rotate": parseRotate,
+  "row-gap": parseGap,
+  "scale": parseScale,
+  "stroke": parseSVGPaint,
+  "stroke-width": parseLengthDeclaration,
+  "text-align": parseTextAlign,
+  "text-decoration": parseTextDecoration,
+  "text-decoration-color": parseColorDeclaration,
+  "text-decoration-line": parseTextDecorationLineDeclaration,
+  "text-decoration-style": parseTextDecorationStyle,
+  "text-shadow": parseTextShadow,
+  "text-transform": ({ value }) => value.case,
+  "top": parseSizeDeclaration,
+  "transform": parseTransform,
+  "transition": addTransitionValue,
+  "transition-delay": addTransitionValue,
+  "transition-duration": addTransitionValue,
+  "transition-property": addTransitionValue,
+  "transition-timing-function": addTransitionValue,
+  "translate": parseTranslate,
+  "user-select": parseUserSelect,
+  "vertical-align": parseVerticalAlign,
+  "width": parseSizeDeclaration,
+  "z-index": parseZIndex,
+};
+
+// This is missing LightningCSS types
+(parsers as Record<string, Parser>)["pointer-events"] =
+  parsePointerEvents as Parser;
 
-declare function AddWarningShort(type: "property", value: never): undefined;
-declare function AddWarningShort(type: "value", value: any): undefined;
-declare function AddWarningShort(type: "function", name: any): undefined;
-type AddWarningShort = typeof AddWarningShort;
+const validProperties = new Set(Object.keys(parsers));
 
 export function parseDeclaration(
   declaration: Declaration,
-  options: ParseDeclarationOptions,
-  add: AddFn,
-  addWarning: AddWarningFn,
+  builder: StylesheetBuilder,
 ) {
   if ("vendorPrefix" in declaration && declaration.vendorPrefix.length) {
     return;
@@ -270,1404 +255,680 @@ export function parseDeclaration(
   }
 
   if (declaration.property === "unparsed") {
-    return parseDeclarationUnparsed(declaration, options, add, addWarning);
+    parseDeclarationUnparsed(declaration, builder);
   } else if (declaration.property === "custom") {
-    return parseDeclarationCustom(declaration, options, add, addWarning);
+    parseDeclarationCustom(declaration, builder);
+  } else {
+    parseWithParser(declaration, builder);
   }
+}
 
-  if (!isValid(declaration)) {
-    return addWarning("property", declaration.property);
-  }
+function parseWithParser(declaration: Declaration, builder: StylesheetBuilder) {
+  if (declaration.property in parsers) {
+    const parser = parsers[declaration.property] as Parser;
 
-  const parseOptions: ParserOptions = {
-    ...options,
-    add,
-    addWarning(value: any) {
-      return addWarning("value", declaration.property, value);
-    },
-  };
+    builder.descriptorProperty = declaration.property;
 
-  function handleStyleShorthand(
-    name: string,
-    options: Record<string, StyleDescriptor>,
-  ) {
-    if (allEqual(...Object.values(options))) {
-      return add("style", name, Object.values(options)[0]);
-    } else {
-      for (const [name, value] of Object.entries(options)) {
-        add("style", name, value);
-      }
+    const value = parser(declaration, builder, declaration.property);
+
+    if (value !== undefined) {
+      builder.addDescriptor(
+        propertyRename[declaration.property] ?? declaration.property,
+        value,
+      );
     }
+  } else {
+    builder.addWarning("property", declaration.property);
   }
+}
 
-  switch (declaration.property) {
-    case "background-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "opacity":
-      return add("style", declaration.property, declaration.value);
-    case "color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "display":
-      return add(
-        "style",
-        declaration.property,
-        parseDisplay(declaration.value, parseOptions),
-      );
-    case "width":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "height":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "min-width":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "min-height":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "max-width":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "max-height":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "block-size":
-      return add("style", "width", parseSize(declaration.value, parseOptions));
-    case "inline-size":
-      return add("style", "height", parseSize(declaration.value, parseOptions));
-    case "min-block-size":
-      return add(
-        "style",
-        "min-width",
-        parseSize(declaration.value, parseOptions),
-      );
-    case "min-inline-size":
-      return add(
-        "style",
-        "min-height",
-        parseSize(declaration.value, parseOptions),
-      );
-    case "max-block-size":
-      return add(
-        "style",
-        "max-width",
-        parseSize(declaration.value, parseOptions),
-      );
-    case "max-inline-size":
-      return add(
-        "style",
-        "max-height",
-        parseSize(declaration.value, parseOptions),
-      );
-    case "overflow":
-      return add(
-        "style",
-        declaration.property,
-        parseOverflow(declaration.value.x, parseOptions),
-      );
-    case "position":
-      const value: any = (declaration as any).value.type;
-      if (value === "absolute" || value === "relative") {
-        return add("style", declaration.property, value);
-      } else {
-        parseOptions.addWarning("value", value);
-      }
-      return;
-    case "top":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "bottom":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "left":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "right":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "inset-block-start":
-      return add(
-        "style",
-        declaration.property,
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "inset-block-end":
-      return add(
-        "style",
-        declaration.property,
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "inset-inline-start":
-      return add(
-        "style",
-        declaration.property,
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "inset-inline-end":
-      return add(
-        "style",
-        declaration.property,
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "inset-block":
-      return handleStyleShorthand("inset-block", {
-        "inset-block-start": parseLengthPercentageOrAuto(
-          declaration.value.blockStart,
-          parseOptions,
-        ),
-        "inset-block-end": parseLengthPercentageOrAuto(
-          declaration.value.blockEnd,
-          parseOptions,
-        ),
-      });
-    case "inset-inline":
-      return handleStyleShorthand("inset-inline", {
-        "inset-block-start": parseLengthPercentageOrAuto(
-          declaration.value.inlineStart,
-          parseOptions,
-        ),
-        "inset-block-end": parseLengthPercentageOrAuto(
-          declaration.value.inlineEnd,
-          parseOptions,
-        ),
-      });
-    case "inset":
-      handleStyleShorthand("inset", {
-        top: parseLengthPercentageOrAuto(declaration.value.top, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "top"),
-        }),
-        bottom: parseLengthPercentageOrAuto(declaration.value.bottom, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "bottom"),
-        }),
-        left: parseLengthPercentageOrAuto(declaration.value.left, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "left"),
-        }),
-        right: parseLengthPercentageOrAuto(declaration.value.right, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "right"),
-        }),
-      });
-      return;
-    case "border-top-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-bottom-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-left-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-right-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-block-start-color":
-      return add(
-        "style",
-        "border-top-color",
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-block-end-color":
-      return add(
-        "style",
-        "border-bottom-color",
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-inline-start-color":
-      return add(
-        "style",
-        "border-left-color",
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-inline-end-color":
-      return add(
-        "style",
-        "border-right-color",
-        parseColor(declaration.value, parseOptions),
-      );
-    case "border-top-width":
-      return add(
-        "style",
-        declaration.property,
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-bottom-width":
-      return add(
-        "style",
-        declaration.property,
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-left-width":
-      return add(
-        "style",
-        declaration.property,
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-right-width":
-      return add(
-        "style",
-        declaration.property,
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-block-start-width":
-      return add(
-        "style",
-        "border-top-width",
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-block-end-width":
-      return add(
-        "style",
-        "border-bottom-width",
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-inline-start-width":
-      return add(
-        "style",
-        "border-left-width",
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-inline-end-width":
-      return add(
-        "style",
-        "border-right-width",
-        parseBorderSideWidth(declaration.value, parseOptions),
-      );
-    case "border-top-left-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-top-right-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-bottom-left-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-bottom-right-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-start-start-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-start-end-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-end-start-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-end-end-radius":
-      return add(
-        "style",
-        declaration.property,
-        parseLength(declaration.value[0], parseOptions),
-      );
-    case "border-radius":
-      handleStyleShorthand("border-radius", {
-        "border-bottom-left-radius": parseLength(
-          declaration.value.bottomLeft[0],
-          parseOptions,
-        ),
-        "border-bottom-right-radius": parseLength(
-          declaration.value.bottomRight[0],
-          parseOptions,
-        ),
-        "border-top-left-radius": parseLength(
-          declaration.value.topLeft[0],
-          parseOptions,
-        ),
-        "border-top-right-radius": parseLength(
-          declaration.value.topRight[0],
-          parseOptions,
-        ),
-      });
-      return;
-    case "border-color":
-      handleStyleShorthand("border-color", {
-        "border-top-color": parseColor(declaration.value.top, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "border-top-color"),
-        }),
-        "border-bottom-color": parseColor(declaration.value.bottom, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "border-bottom-color"),
-        }),
-        "border-left-color": parseColor(declaration.value.left, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "border-left-color"),
-        }),
-        "border-right-color": parseColor(declaration.value.right, {
-          ...parseOptions,
-          addWarning: buildAddWarning(addWarning, "border-right-color"),
-        }),
-      });
-      return;
-    case "border-style":
-      return add(
-        "style",
-        declaration.property,
-        parseBorderStyle(declaration.value, parseOptions),
-      );
-    case "border-width":
-      handleStyleShorthand("border-width", {
-        "border-top-width": parseBorderSideWidth(
-          declaration.value.top,
-          parseOptions,
-        ),
-        "border-bottom-width": parseBorderSideWidth(
-          declaration.value.bottom,
-          parseOptions,
-        ),
-        "border-left-width": parseBorderSideWidth(
-          declaration.value.left,
-          parseOptions,
-        ),
-        "border-right-width": parseBorderSideWidth(
-          declaration.value.right,
-          parseOptions,
-        ),
-      });
-      return;
-    case "border-block-color":
-      add(
-        "style",
-        "border-top-color",
-        parseColor(declaration.value.start, parseOptions),
-      );
-      add(
-        "style",
-        "border-bottom-color",
-        parseColor(declaration.value.end, parseOptions),
-      );
-      return;
-    case "border-block-width":
-      add(
-        "style",
-        "border-top-width",
-        parseBorderSideWidth(declaration.value.start, parseOptions),
-      );
-      add(
-        "style",
-        "border-bottom-width",
-        parseBorderSideWidth(declaration.value.end, parseOptions),
-      );
-      return;
-    case "border-inline-color":
-      add(
-        "style",
-        "border-left-color",
-        parseColor(declaration.value.start, parseOptions),
-      );
-      add(
-        "style",
-        "border-right-color",
-        parseColor(declaration.value.end, parseOptions),
-      );
-      return;
-    case "border-inline-width":
-      add(
-        "style",
-        "border-left-width",
-        parseBorderSideWidth(declaration.value.start, parseOptions),
-      );
-      add(
-        "style",
-        "border-right-width",
-        parseBorderSideWidth(declaration.value.end, parseOptions),
-      );
-      return;
-    case "border":
-      handleStyleShorthand("border", {
-        "border-width": parseBorderSideWidth(
-          declaration.value.width,
-          parseOptions,
-        ),
-        "border-style": parseBorderStyle(declaration.value.style, parseOptions),
-      });
-      return;
-    case "border-top":
-      add(
-        "style",
-        declaration.property + "-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-bottom":
-      add(
-        "style",
-        declaration.property + "-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-left":
-      add(
-        "style",
-        declaration.property + "-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-right":
-      add(
-        "style",
-        declaration.property + "-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-block":
-      add(
-        "style",
-        "border-top-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-bottom-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-top-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      add(
-        "style",
-        "border-bottom-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-block-start":
-      add(
-        "style",
-        "border-top-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-top-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-block-end":
-      add(
-        "style",
-        "border-bottom-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-bottom-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-inline":
-      add(
-        "style",
-        "border-left-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-right-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-left-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      add(
-        "style",
-        "border-right-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-inline-start":
-      add(
-        "style",
-        "border-left-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-left-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "border-inline-end":
-      add(
-        "style",
-        "border-right-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "border-right-width",
-        parseBorderSideWidth(declaration.value.width, parseOptions),
-      );
-      return;
-    case "flex-direction":
-      return add("style", declaration.property, declaration.value);
-    case "flex-wrap":
-      return add("style", declaration.property, declaration.value);
-    case "flex-flow":
-      add("style", "flexWrap", declaration.value.wrap);
-      add("style", "flexDirection", declaration.value.direction);
-      break;
-    case "flex-grow":
-      return add("style", declaration.property, declaration.value);
-    case "flex-shrink":
-      return add("style", declaration.property, declaration.value);
-    case "flex-basis":
-      return add(
-        "style",
-        declaration.property,
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "flex":
-      add("style", "flex-grow", declaration.value.grow);
-      add("style", "flex-shrink", declaration.value.shrink);
-      add(
-        "style",
-        "flex-basis",
-        parseLengthPercentageOrAuto(declaration.value.basis, parseOptions),
-      );
-      break;
-    case "align-content":
-      return add(
-        "style",
-        declaration.property,
-        parseAlignContent(declaration.value, parseOptions),
-      );
-    case "justify-content":
-      return add(
-        "style",
-        declaration.property,
-        parseJustifyContent(declaration.value, parseOptions),
-      );
-    case "align-self":
-      return add(
-        "style",
-        declaration.property,
-        parseAlignSelf(declaration.value, parseOptions),
-      );
-    case "align-items":
-      return add(
-        "style",
-        declaration.property,
-        parseAlignItems(declaration.value, parseOptions),
-      );
-    case "row-gap":
-      return add("style", "row-gap", parseGap(declaration.value, parseOptions));
-    case "column-gap":
-      return add(
-        "style",
-        "column-gap",
-        parseGap(declaration.value, parseOptions),
-      );
-    case "gap":
-      add("style", "row-gap", parseGap(declaration.value.row, parseOptions));
-      add(
-        "style",
-        "column-gap",
-        parseGap(declaration.value.column, parseOptions),
-      );
-      return;
-    case "margin":
-      handleStyleShorthand("margin", {
-        "margin-top": parseSize(declaration.value.top, parseOptions, {
-          allowAuto: true,
-        }),
-        "margin-bottom": parseSize(declaration.value.bottom, parseOptions, {
-          allowAuto: true,
-        }),
-        "margin-left": parseSize(declaration.value.left, parseOptions, {
-          allowAuto: true,
-        }),
-        "margin-right": parseSize(declaration.value.right, parseOptions, {
-          allowAuto: true,
-        }),
-      });
-      return;
-    case "margin-top":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-bottom":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-left":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-right":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-block-start":
-      return add(
-        "style",
-        "margin-start",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-block-end":
-      return add(
-        "style",
-        "margin-end",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-inline-start":
-      return add(
-        "style",
-        "margin-start",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-inline-end":
-      return add(
-        "style",
-        "margin-end",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions, {
-          allowAuto: true,
-        }),
-      );
-    case "margin-block":
-      handleStyleShorthand("margin-block", {
-        "margin-start": parseLengthPercentageOrAuto(
-          declaration.value.blockStart,
-          parseOptions,
-        ),
-        "margin-end": parseLengthPercentageOrAuto(
-          declaration.value.blockEnd,
-          parseOptions,
-        ),
-      });
-      return;
-    case "margin-inline":
-      handleStyleShorthand("margin-inline", {
-        "margin-start": parseLengthPercentageOrAuto(
-          declaration.value.inlineStart,
-          parseOptions,
-        ),
-        "margin-end": parseLengthPercentageOrAuto(
-          declaration.value.inlineEnd,
-          parseOptions,
-        ),
-      });
-      return;
-    case "padding":
-      handleStyleShorthand("padding", {
-        "padding-top": parseSize(declaration.value.top, parseOptions),
-        "padding-left": parseSize(declaration.value.left, parseOptions),
-        "padding-right": parseSize(declaration.value.right, parseOptions),
-        "padding-bottom": parseSize(declaration.value.bottom, parseOptions),
-      });
-      break;
-    case "padding-top":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "padding-bottom":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "padding-left":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "padding-right":
-      return add(
-        "style",
-        declaration.property,
-        parseSize(declaration.value, parseOptions),
-      );
-    case "padding-block-start":
-      return add(
-        "style",
-        "padding-start",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "padding-block-end":
-      return add(
-        "style",
-        "padding-end",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "padding-inline-start":
-      return add(
-        "style",
-        "padding-start",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "padding-inline-end":
-      return add(
-        "style",
-        "padding-end",
-        parseLengthPercentageOrAuto(declaration.value, parseOptions),
-      );
-    case "padding-block":
-      handleStyleShorthand("padding-block", {
-        "padding-start": parseLengthPercentageOrAuto(
-          declaration.value.blockStart,
-          parseOptions,
-        ),
-        "padding-end": parseLengthPercentageOrAuto(
-          declaration.value.blockEnd,
-          parseOptions,
-        ),
-      });
-      return;
-    case "padding-inline":
-      handleStyleShorthand("padding-inline", {
-        "padding-start": parseLengthPercentageOrAuto(
-          declaration.value.inlineStart,
-          parseOptions,
-        ),
-        "padding-end": parseLengthPercentageOrAuto(
-          declaration.value.inlineEnd,
-          parseOptions,
-        ),
-      });
-      return;
-    case "font-weight":
-      return add(
-        "style",
-        declaration.property,
-        parseFontWeight(declaration.value, parseOptions),
-      );
-    case "font-size": {
-      add(
-        "style",
-        declaration.property,
-        parseFontSize(declaration.value, parseOptions),
-      );
+function parseInsetBlock(
+  { value }: DeclarationType<"inset-block">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("inset-block", {
+    "inset-block-start": parseLengthPercentageOrAuto(value.blockStart, builder),
+    "inset-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder),
+  });
+}
 
-      add(
-        "style",
-        `--${emVariableName}`,
-        parseFontSize(declaration.value, parseOptions),
-      );
-      return;
-    }
-    case "font-family":
-      return add(
-        "style",
-        declaration.property,
-        parseFontFamily(declaration.value),
-      );
-    case "font-style":
-      return add(
-        "style",
-        declaration.property,
-        parseFontStyle(declaration.value, parseOptions),
-      );
-    case "font-variant-caps":
-      return add(
-        "style",
-        declaration.property,
-        parseFontVariantCaps(declaration.value, parseOptions),
-      );
-    case "line-height":
-      return add(
-        "style",
-        declaration.property,
-        parseLineHeight(declaration.value, parseOptions),
-      );
-    case "font":
-      add(
-        "style",
-        declaration.property + "-family",
-        parseFontFamily(declaration.value.family),
-      );
-      add(
-        "style",
-        "line-height",
-        parseLineHeight(declaration.value.lineHeight, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-size",
-        parseFontSize(declaration.value.size, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-style",
-        parseFontStyle(declaration.value.style, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-variant",
-        parseFontVariantCaps(declaration.value.variantCaps, parseOptions),
-      );
-      add(
-        "style",
-        declaration.property + "-weight",
-        parseFontWeight(declaration.value.weight, parseOptions),
-      );
-      return;
-    case "vertical-align":
-      return add(
-        "style",
-        declaration.property,
-        parseVerticalAlign(declaration.value, parseOptions),
-      );
-    case "transition-property":
-    case "transition-duration":
-    case "transition-delay":
-    case "transition-timing-function":
-    case "transition":
-      return addTransitionValue(declaration, parseOptions);
-    case "animation-duration":
-      return add(
-        "animation",
-        "animationDuration",
-        declaration.value.map((t) => parseTime(t)),
-      );
-    case "animation-timing-function":
-    case "animation-iteration-count":
-    case "animation-name":
-    case "animation-delay":
-    case "animation-direction":
-    case "animation-play-state":
-    case "animation-fill-mode":
-    case "animation":
-      return addAnimationValue(declaration, parseOptions);
-    case "transform": {
-      add("style", "transform", [
-        {},
-        "@transform",
-        declaration.value.flatMap((t): StyleDescriptor[] => {
-          switch (t.type) {
-            case "perspective":
-              return [
-                [{}, "@perspective", [parseLength(t.value, parseOptions)]],
-              ];
-            case "translate":
-              return [
-                [
-                  {},
-                  "@translateX",
-                  [
-                    parseLengthOrCoercePercentageToRuntime(
-                      t.value[0],
-                      parseOptions,
-                    ),
-                  ],
-                ],
-                [
-                  [
-                    {},
-                    "@translateY",
-                    [
-                      parseLengthOrCoercePercentageToRuntime(
-                        t.value[1],
-                        parseOptions,
-                      ),
-                    ],
-                  ],
-                ],
-              ];
-            case "translateX":
-              return [
-                [
-                  {},
-                  "@translateX",
-                  [
-                    parseLengthOrCoercePercentageToRuntime(
-                      t.value,
-                      parseOptions,
-                    ),
-                  ],
-                ],
-              ];
-            case "translateY":
-              return [
-                [
-                  {},
-                  "@translateY",
-                  [
-                    parseLengthOrCoercePercentageToRuntime(
-                      t.value,
-                      parseOptions,
-                    ),
-                  ],
-                ],
-              ];
-            case "rotate":
-              return [[{}, "@rotate", [parseAngle(t.value, parseOptions)]]];
-            case "rotateX":
-              return [[{}, "@rotateX", [parseAngle(t.value, parseOptions)]]];
-            case "rotateY":
-              return [[{}, "@rotateY", [parseAngle(t.value, parseOptions)]]];
-            case "rotateZ":
-              return [[{}, "@rotateZ", [parseAngle(t.value, parseOptions)]]];
-            case "scale":
-              return [
-                [{}, "@scaleX", [parseLength(t.value[0], parseOptions)]],
-                [{}, "@scaleY", [parseLength(t.value[0], parseOptions)]],
-              ];
-            case "scaleX":
-              return [[{}, "scaleX", [parseLength(t.value, parseOptions)]]];
-            case "scaleY":
-              return [[{}, "scaleY", [parseLength(t.value, parseOptions)]]];
-            case "skew":
-              return [
-                [{}, "skewX", [parseAngle(t.value[0], parseOptions)]],
-                [{}, "skewY", [parseAngle(t.value[0], parseOptions)]],
-              ];
-            case "skewX":
-              return [[{}, "skewX", [parseAngle(t.value, parseOptions)]]];
-            case "skewY":
-              return [[{}, "skewY", [parseAngle(t.value, parseOptions)]]];
-            case "translateZ":
-            case "translate3d":
-            case "scaleZ":
-            case "scale3d":
-            case "rotate3d":
-            case "matrix":
-            case "matrix3d":
-              return [[]];
-          }
-        }),
-      ]);
-      return;
-    }
-    case "translate":
-      add("style", "translateX", [
-        {},
-        "translateX",
-        [parseTranslate(declaration.value, "x", parseOptions)],
-      ]);
-      add("style", "translateY", [
-        {},
-        "translateX",
-        [parseTranslate(declaration.value, "y", parseOptions)],
-      ]);
-      return;
-    case "rotate":
-      add("style", "rotateX", [
-        {},
-        "rotateX",
-        [parseAngle(declaration.value.x, parseOptions)],
-      ]);
-      add("style", "rotateY", [
-        {},
-        "rotateY",
-        [parseAngle(declaration.value.y, parseOptions)],
-      ]);
-      add("style", "rotateZ", [
-        {},
-        "rotateZ",
-        [parseAngle(declaration.value.z, parseOptions)],
-      ]);
-      return;
-    case "scale":
-      add("style", "scaleX", [
-        {},
-        "scaleX",
-        [parseScale(declaration.value, "x", parseOptions)],
-      ]);
-      add("style", "scaleY", [
-        {},
-        "scaleY",
-        [parseScale(declaration.value, "y", parseOptions)],
-      ]);
-      return;
-    case "text-transform":
-      return add("style", declaration.property, declaration.value.case);
-    case "letter-spacing":
-      if (declaration.value.type !== "normal") {
-        return add(
-          "style",
-          declaration.property,
-          parseLength(declaration.value.value, parseOptions),
-        );
-      }
-      return;
-    case "text-decoration-line":
-      return add(
-        "style",
-        declaration.property,
-        parseTextDecorationLine(declaration.value, parseOptions),
-      );
-    case "text-decoration-color":
-      return add(
-        "style",
-        declaration.property,
-        parseColor(declaration.value, parseOptions),
-      );
-    case "text-decoration":
-      add(
-        "style",
-        "text-decoration-color",
-        parseColor(declaration.value.color, parseOptions),
-      );
-      add(
-        "style",
-        "text-decoration-line",
-        parseTextDecorationLine(declaration.value.line, parseOptions),
-      );
-      return;
-    case "text-shadow":
-      return parseTextShadow(add, declaration.value, parseOptions);
-    case "z-index":
-      if (declaration.value.type === "integer") {
-        add(
-          "style",
-          declaration.property,
-          parseLength(declaration.value.value, parseOptions),
-        );
-      } else {
-        parseOptions.addWarning("value", declaration.value.type);
+function parseInsetInline(
+  { value }: DeclarationType<"inset-inline">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("inset-inline", {
+    "inset-block-start": parseLengthPercentageOrAuto(
+      value.inlineStart,
+      builder,
+    ),
+    "inset-block-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+  });
+}
+
+function parseInset(
+  { value }: DeclarationType<"inset">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("inset", {
+    top: parseLengthPercentageOrAuto(value.top, builder),
+    bottom: parseLengthPercentageOrAuto(value.bottom, builder),
+    left: parseLengthPercentageOrAuto(value.left, builder),
+    right: parseLengthPercentageOrAuto(value.right, builder),
+  });
+}
+
+function parseBorderRadius(
+  { value }: DeclarationType<"border-radius">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("border-radius", {
+    "border-bottom-left-radius": parseSize2DDimensionPercentage(
+      value.bottomLeft,
+      builder,
+    ),
+    "border-bottom-right-radius": parseSize2DDimensionPercentage(
+      value.bottomRight,
+      builder,
+    ),
+    "border-top-left-radius": parseSize2DDimensionPercentage(
+      value.topLeft,
+      builder,
+    ),
+    "border-top-right-radius": parseSize2DDimensionPercentage(
+      value.topRight,
+      builder,
+    ),
+  });
+}
+
+function parseBorderColor(
+  { value }: DeclarationType<"border-color">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("border-color", {
+    "border-top-color": parseColor(value.top, builder),
+    "border-bottom-color": parseColor(value.bottom, builder),
+    "border-left-color": parseColor(value.left, builder),
+    "border-right-color": parseColor(value.right, builder),
+  });
+}
+
+function parseBorderWidth(
+  { value }: DeclarationType<"border-width">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("border-width", {
+    "border-top-width": parseBorderSideWidth(value.top, builder),
+    "border-bottom-width": parseBorderSideWidth(value.bottom, builder),
+    "border-left-width": parseBorderSideWidth(value.left, builder),
+    "border-right-width": parseBorderSideWidth(value.right, builder),
+  });
+}
+
+function parseBorder(
+  { value }: DeclarationType<"border">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("border", {
+    "border-width": parseBorderSideWidth(value.width, builder),
+    "border-style": parseBorderStyle(value.style, builder),
+    "border-color": parseColor(value.color, builder),
+  });
+}
+
+function parseBorderSide(
+  {
+    value,
+    property,
+  }: DeclarationType<
+    "border-top" | "border-bottom" | "border-left" | "border-right"
+  >,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(property + "-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    property + "-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderBlock(
+  { value }: DeclarationType<"border-block">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    "border-bottom-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-top-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+  builder.addDescriptor(
+    "border-bottom-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderBlockStart(
+  { value }: DeclarationType<"border-block-start">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    "border-top-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderBlockEnd(
+  { value }: DeclarationType<"border-block-end">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "border-bottom-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-bottom-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderInline(
+  { value }: DeclarationType<"border-inline">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    "border-left-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+  builder.addDescriptor(
+    "border-right-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderInlineStart(
+  { value }: DeclarationType<"border-inline-start">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    "border-left-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseBorderInlineEnd(
+  { value }: DeclarationType<"border-inline-end">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
+  builder.addDescriptor(
+    "border-right-width",
+    parseBorderSideWidth(value.width, builder),
+  );
+}
+
+function parseFlexFlow(
+  { value }: DeclarationType<"flex-flow">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("flexWrap", value.wrap);
+  builder.addDescriptor("flexDirection", value.direction);
+}
+
+function parseFlex(
+  { value }: DeclarationType<"flex">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("flex-grow", value.grow);
+  builder.addDescriptor("flex-shrink", value.shrink);
+  builder.addDescriptor(
+    "flex-basis",
+    parseLengthPercentageOrAuto(value.basis, builder),
+  );
+}
+
+function parseMargin(
+  { value }: DeclarationType<"margin">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("margin", {
+    "margin-top": parseSize(value.top, builder, { allowAuto: true }),
+    "margin-bottom": parseSize(value.bottom, builder, { allowAuto: true }),
+    "margin-left": parseSize(value.left, builder, { allowAuto: true }),
+    "margin-right": parseSize(value.right, builder, { allowAuto: true }),
+  });
+}
+
+function parseMarginBlock(
+  { value }: DeclarationType<"margin-block">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("margin-block", {
+    "margin-block-start": parseLengthPercentageOrAuto(
+      value.blockStart,
+      builder,
+    ),
+    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder),
+  });
+}
+
+function parseMarginInline(
+  { value }: DeclarationType<"margin-inline">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("margin-inline", {
+    "margin-inline-start": parseLengthPercentageOrAuto(
+      value.inlineStart,
+      builder,
+    ),
+    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+  });
+}
+
+function parsePadding(
+  { value }: DeclarationType<"padding">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("padding", {
+    "padding-top": parseSize(value.top, builder),
+    "padding-bottom": parseSize(value.bottom, builder),
+    "padding-left": parseSize(value.left, builder),
+    "padding-right": parseSize(value.right, builder),
+  });
+}
+
+function parsePaddingBlock(
+  { value }: DeclarationType<"padding-block">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("padding-block", {
+    "padding-block-start": parseLengthPercentageOrAuto(
+      value.blockStart,
+      builder,
+    ),
+    "padding-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder),
+  });
+}
+
+function parsePaddingInline(
+  { value }: DeclarationType<"padding-inline">,
+  builder: StylesheetBuilder,
+) {
+  builder.addShorthand("padding-inline", {
+    "padding-inline-start": parseLengthPercentageOrAuto(
+      value.inlineStart,
+      builder,
+    ),
+    "padding-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+  });
+}
+
+function parseFont(
+  { value }: DeclarationType<"font">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("font-family", value.family[0]);
+  builder.addDescriptor(
+    "line-height",
+    parseLineHeight(value.lineHeight, builder),
+  );
+  builder.addDescriptor("font-size", parseFontSize(value.size, builder));
+  builder.addDescriptor("font-style", parseFontStyle(value.style, builder));
+  builder.addDescriptor(
+    "font-variant-caps",
+    parseFontVariantCaps(value.variantCaps, builder),
+  );
+  builder.addDescriptor("font-weight", parseFontWeight(value.weight, builder));
+}
+
+function parseTransform(
+  { value }: DeclarationType<"transform">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("transform", [
+    {},
+    "@transform",
+    value.flatMap((t): StyleDescriptor[] => {
+      switch (t.type) {
+        case "perspective":
+          return [[{}, "@perspective", parseLength(t.value, builder)]];
+        case "translate":
+          return [
+            [
+              {},
+              "@translateX",
+              parseLengthOrCoercePercentageToRuntime(t.value[0], builder),
+            ],
+            [
+              [
+                {},
+                "@translateY",
+                parseLengthOrCoercePercentageToRuntime(t.value[1], builder),
+              ],
+            ],
+          ];
+        case "translateX":
+          return [
+            [
+              {},
+              "@translateX",
+              parseLengthOrCoercePercentageToRuntime(t.value, builder),
+            ],
+          ];
+        case "translateY":
+          return [
+            [
+              {},
+              "@translateY",
+              parseLengthOrCoercePercentageToRuntime(t.value, builder),
+            ],
+          ];
+        case "rotate":
+          return [[{}, "@rotate", parseAngle(t.value, builder)]];
+        case "rotateX":
+          return [[{}, "@rotateX", parseAngle(t.value, builder)]];
+        case "rotateY":
+          return [[{}, "@rotateY", parseAngle(t.value, builder)]];
+        case "rotateZ":
+          return [[{}, "@rotateZ", parseAngle(t.value, builder)]];
+        case "scale":
+          return [
+            [{}, "@scaleX", parseLength(t.value[0], builder)],
+            [{}, "@scaleY", parseLength(t.value[1], builder)],
+          ];
+        case "scaleX":
+          return [[{}, "scaleX", parseLength(t.value, builder)]];
+        case "scaleY":
+          return [[{}, "scaleY", parseLength(t.value, builder)]];
+        case "skew":
+          return [
+            [{}, "skewX", parseAngle(t.value[0], builder)],
+            [{}, "skewY", parseAngle(t.value[1], builder)],
+          ];
+        case "skewX":
+          return [[{}, "skewX", parseAngle(t.value, builder)]];
+        case "skewY":
+          return [[{}, "skewY", parseAngle(t.value, builder)]];
+        case "translateZ":
+        case "translate3d":
+        case "scaleZ":
+        case "scale3d":
+        case "rotate3d":
+        case "matrix":
+        case "matrix3d":
+          return [[]];
       }
-      return;
-    case "container-type":
-      return;
-    case "container-name":
-      return add(
-        "container",
-        declaration.property,
-        declaration.value.type === "none" ? false : declaration.value.value,
-      );
-    case "container":
-      return add(
-        "container",
-        "container-name",
-        declaration.value.name.type === "none"
-          ? false
-          : declaration.value.name.value,
-      );
-    case "text-decoration-style":
-      return add(
-        "style",
-        declaration.property,
-        parseTextDecorationStyle(declaration.value, parseOptions),
-      );
-    case "text-align":
-      return add(
-        "style",
-        declaration.property,
-        parseTextAlign(declaration.value, parseOptions),
-      );
-    case "box-shadow": {
-      return parseBoxShadow(declaration.value, parseOptions);
-    }
-    case "aspect-ratio": {
-      return add(
-        "style",
-        declaration.property,
-        parseAspectRatio(declaration.value),
-      );
-    }
-    case "user-select": {
-      return add(
-        "style",
-        declaration.property,
-        parseUserSelect(declaration.value, parseOptions),
-      );
-    }
-    case "fill": {
-      return add(
-        "style",
-        declaration.property,
-        parseSVGPaint(declaration.value, parseOptions),
-      );
-    }
-    case "stroke": {
-      return add(
-        "style",
-        declaration.property,
-        parseSVGPaint(declaration.value, parseOptions),
-      );
-    }
-    case "stroke-width": {
-      return add(
-        "style",
-        declaration.property,
-        parseDimensionPercentageFor_LengthValue(
-          declaration.value,
-          parseOptions,
-        ),
-      );
-    }
-    case "caret-color": {
-      return add(
-        "style",
-        declaration.property,
-        parseColorOrAuto(declaration.value, parseOptions),
-      );
-    }
-    default: {
-      /**
-       * This is used to know when lightningcss has added a new property and we need to add it to the
-       * switch.
-       *
-       * If your build fails here, its because you have a newer version of lightningcss installed.
-       */
-      declaration satisfies never;
-    }
+    }),
+  ]);
+  return;
+}
+
+function parseTranslate(
+  { value }: DeclarationType<"translate">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("translateX", [
+    {},
+    "translateX",
+    parseTranslateProp(value, "x", builder),
+  ]);
+  builder.addDescriptor("translateY", [
+    {},
+    "translateY",
+    parseTranslateProp(value, "y", builder),
+  ]);
+}
+
+function parseRotate(
+  { value }: DeclarationType<"rotate">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("rotateX", [
+    {},
+    "rotateX",
+    parseAngle(value.x, builder),
+  ]);
+  builder.addDescriptor("rotateY", [
+    {},
+    "rotateY",
+    parseAngle(value.y, builder),
+  ]);
+  builder.addDescriptor("rotateZ", [
+    {},
+    "rotateZ",
+    parseAngle(value.z, builder),
+  ]);
+}
+
+function parseScale(
+  { value }: DeclarationType<"scale">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("scaleX", [
+    {},
+    "scaleX",
+    parseScaleValue(value, "x", builder),
+  ]);
+  builder.addDescriptor("scaleY", [
+    {},
+    "scaleY",
+    parseScaleValue(value, "y", builder),
+  ]);
+}
+
+export function parseScaleValue(
+  translate: Scale,
+  prop: keyof Extract<Scale, object>,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  if (translate === "none") {
+    return 0;
   }
+
+  return parseLength(translate[prop], builder);
 }
 
-function buildAddWarning(
-  addWarning: AddWarningFn,
-  property: string,
-): AddWarningShort {
-  return function (type, value) {
-    if (type === "property") {
-      return addWarning(type, property);
-    } else if (type === "value") {
-      return addWarning(type, property, value);
-    }
-  };
+function parseLetterSpacing(
+  { value }: DeclarationType<"letter-spacing">,
+  builder: StylesheetBuilder,
+) {
+  if (value.type === "normal") {
+    return;
+  }
+  return parseLength(value.value, builder);
+}
+
+function parseTextDecoration(
+  { value }: DeclarationType<"text-decoration">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "text-decoration-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "text-decoration-line",
+    parseTextDecorationLine(value.line, builder),
+  );
+}
+
+function parseZIndex(
+  { value }: DeclarationType<"z-index">,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  if (value.type === "integer") {
+    return parseLength(value.value, builder);
+  } else {
+    builder.addWarning("value", value.type);
+    return;
+  }
+}
+
+function parseContainerType(_value: unknown, _builder: StylesheetBuilder) {
+  return;
+}
+
+function parseContainerName(
+  { value }: DeclarationType<"container-name">,
+  builder: StylesheetBuilder,
+) {
+  builder.addContainer(value.type === "none" ? false : value.value);
+  return;
+}
+
+function parseContainer(
+  { value }: DeclarationType<"container">,
+  builder: StylesheetBuilder,
+) {
+  builder.addContainer(value.name.type === "none" ? false : value.name.value);
+  return;
 }
 
-function parseDeclarationUnparsed(
+export function parseDeclarationUnparsed(
   declaration: Extract<Declaration, { property: "unparsed" }>,
-  options: ParseDeclarationOptions,
-  add: AddFn,
-  addWarning: AddWarningFn,
+  builder: StylesheetBuilder,
 ) {
   let property = declaration.value.propertyId.property;
 
-  if (!isValid(declaration.value.propertyId)) {
-    return addWarning("property", property);
+  if (!(property in parsers)) {
+    builder.addWarning("property", property);
+    return;
   }
 
-  const parseOptions: ParserOptions = {
-    ...options,
-    add,
-    addWarning: buildAddWarning(addWarning, property),
-  };
-
   /**
    * React Native doesn't support all the logical properties
    */
-  if (propertyRename[declaration.value.propertyId.property]) {
-    property = propertyRename[declaration.value.propertyId.property]!;
+  const rename = propertyRename[property];
+  if (rename) {
+    property = rename;
   }
 
   /**
    * Unparsed shorthand properties need to be parsed at runtime
    */
-  if (runtimeShorthands.has(property)) {
-    let args = parseUnparsed(declaration.value.value, parseOptions);
-    if (!isStyleDescriptorArray(args)) {
-      args = [args];
-    }
+  builder.descriptorProperty = property;
+
+  if (unparsedRuntimeParsing.has(property)) {
+    const args = parseUnparsed(declaration.value.value, builder);
 
     if (property === "animation") {
-      return add("style", "animation", [
+      builder.addDescriptor("animation", [
         {},
         `@${toRNProperty(property)}`,
         args,
       ]);
     } else {
-      return add("style", property, [
+      builder.addDescriptor(property, [
         {},
         `@${toRNProperty(property)}`,
         args,
         1,
       ]);
     }
-  }
+  } else {
+    const value = parseUnparsed(declaration.value.value, builder);
 
-  return add(
-    "style",
-    property,
-    parseUnparsed(declaration.value.value, parseOptions),
-  );
+    builder.addDescriptor(property, value);
+
+    if (property === "font-size") {
+      builder.addDescriptor("--__rn-css-em", value);
+    }
+
+    if (property === "color") {
+      builder.addDescriptor("--__rn-css-current-color", value);
+    }
+  }
 }
 
-function parseDeclarationCustom(
+export function parseDeclarationCustom(
   declaration: Extract<Declaration, { property: "custom" }>,
-  options: ParseDeclarationOptions,
-  add: AddFn,
-  addWarning: AddWarningFn,
-) {
-  const parseOptions: ParserOptions = {
-    ...options,
-    add,
-    addWarning(type, value) {
-      if (type === "property") {
-        return addWarning(type, property);
-      } else if (type === "value") {
-        return addWarning(type, property, value);
-      }
-    },
-  };
-
-  let property = declaration.value.name;
+  builder: StylesheetBuilder,
+) {
+  const property = declaration.value.name;
   if (
-    validPropertiesLoose.has(property) ||
+    validProperties.has(property) ||
     property.startsWith("--") ||
     property.startsWith("-rn-")
   ) {
-    return add(
-      "style",
+    builder.addDescriptor(
       property,
-      parseUnparsed(declaration.value.value, {
-        ...parseOptions,
-        allowAuto: allowAuto.has(property),
-      }),
+      parseUnparsed(declaration.value.value, builder, allowAuto.has(property)),
     );
   } else {
-    return addWarning("property", declaration.value.name);
+    builder.addWarning("property", declaration.value.name);
   }
 }
 
-function isValid<T extends Declaration | PropertyId>(
-  declaration: T,
-): declaration is Extract<T, { property: (typeof validProperties)[number] }> {
-  return validPropertiesLoose.has(declaration.property);
-}
-
-function reduceParseUnparsed(
+export function reduceParseUnparsed(
   tokenOrValues: TokenOrValue[],
-  options: ParserOptions,
-): StyleDescriptor[] | undefined {
+  builder: StylesheetBuilder,
+): StyleDescriptor {
   const result = tokenOrValues
-    .map((tokenOrValue) => parseUnparsed(tokenOrValue, options))
+    .map((tokenOrValue) => parseUnparsed(tokenOrValue, builder))
     .filter((v) => v !== undefined);
 
   if (result.length === 0) {
     return undefined;
-  } else {
-    return result;
   }
+
+  let currentGroup: StyleDescriptor = [];
+  let groups: StyleDescriptor[] = [currentGroup];
+
+  for (const value of result) {
+    if ((value as unknown) === CommaSeparator) {
+      currentGroup = [];
+      groups.push(currentGroup);
+    } else {
+      currentGroup.push(value);
+    }
+  }
+
+  groups = groups.flatMap((group): StyleDescriptor[] => {
+    if (!Array.isArray(group)) {
+      return [];
+    }
+
+    if (group.length === 0) {
+      return [];
+    } else if (group.length === 1) {
+      const first = group[0];
+
+      if (first === undefined) {
+        return [];
+      } else {
+        return [first];
+      }
+    } else {
+      return [group];
+    }
+  });
+
+  return groups.length === 1 ? groups[0] : groups;
 }
 
-function unparsedFunction(
+export function unparsedFunction(
   token: Extract<TokenOrValue, { type: "function" }>,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleFunction {
-  const args = reduceParseUnparsed(token.value.arguments, options);
-  return [{}, token.value.name, args];
+  return [
+    {},
+    token.value.name,
+    reduceParseUnparsed(token.value.arguments, builder),
+  ];
 }
 
 /**
  * When the CSS cannot be parsed (often due to a runtime condition like a CSS variable)
- * This function best efforts parsing it into a function that we can evaluate at runtime
+ * This export function best efforts parsing it into a export function that we can evaluate at runtime
  */
-function parseUnparsed(
+export function parseUnparsed(
   tokenOrValue:
     | TokenOrValue
     | TokenOrValue[]
@@ -1675,7 +936,8 @@ function parseUnparsed(
     | number
     | undefined
     | null,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
+  allowAuto = false,
 ): StyleDescriptor {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
@@ -1686,6 +948,8 @@ function parseUnparsed(
       return true;
     } else if (tokenOrValue === "false") {
       return false;
+    } else if (tokenOrValue === "currentcolor") {
+      return [{}, "var", "__rn-css-current-color"] as const;
     } else {
       return tokenOrValue;
     }
@@ -1696,21 +960,21 @@ function parseUnparsed(
   }
 
   if (Array.isArray(tokenOrValue)) {
-    const args = reduceParseUnparsed(tokenOrValue, options);
+    const args = reduceParseUnparsed(tokenOrValue, builder);
     if (!args) return;
-    if (args.length === 1) return args[0];
+    if (Array.isArray(args) && args.length === 1) return args[0];
     return args;
   }
 
   switch (tokenOrValue.type) {
     case "unresolved-color": {
-      return parseUnresolvedColor(tokenOrValue.value, options);
+      return parseUnresolvedColor(tokenOrValue.value, builder);
     }
     case "var": {
-      const args: StyleDescriptor[] = [tokenOrValue.value.name.ident.slice(2)];
-      const fallback = parseUnparsed(tokenOrValue.value.fallback, options);
+      let args: StyleDescriptor = tokenOrValue.value.name.ident.slice(2);
+      const fallback = parseUnparsed(tokenOrValue.value.fallback, builder);
       if (fallback !== undefined) {
-        args.push(fallback);
+        args = [args, fallback];
       }
 
       return [{}, "var", args, 1];
@@ -1729,28 +993,33 @@ function parseUnparsed(
         case "translateX":
         case "translateY":
           tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
-          return unparsedFunction(tokenOrValue, options);
-        case "platformColor":
-        case "getPixelSizeForLayoutSize":
-        case "roundToNearestPixel":
-        case "pixelScale":
+          return unparsedFunction(tokenOrValue, builder);
+        case "brightness":
+        case "contrast":
+        case "cubic-bezier":
+        case "drop-shadow":
         case "fontScale":
-        case "shadow":
-        case "rgb":
-        case "rgba":
+        case "grayscale":
         case "hsl":
         case "hsla":
-          return unparsedFunction(tokenOrValue, options);
+        case "hue-rotate":
+        case "invert":
+        case "linear-gradient":
+        case "opacity":
+        case "pixelScale":
+        case "pixelSizeForLayoutSize":
+        case "platformColor":
+        case "radial-gradient":
+        case "rgb":
+        case "rgba":
+        case "roundToNearestPixel":
+        case "saturate":
+        case "sepia":
+        case "shadow":
+        case "steps":
+          return unparsedFunction(tokenOrValue, builder);
         case "hairlineWidth":
           return [{}, tokenOrValue.value.name, []];
-        case "platformSelect":
-        case "fontScaleSelect":
-        case "pixelScaleSelect":
-          return parseRNRuntimeSpecificsFunction(
-            tokenOrValue.value.name,
-            tokenOrValue.value.arguments,
-            options,
-          );
         case "calc":
         case "max":
         case "min":
@@ -1758,51 +1027,55 @@ function parseUnparsed(
           return parseCalcFn(
             tokenOrValue.value.name,
             tokenOrValue.value.arguments,
-            options,
+            builder,
           );
         default: {
-          options.addWarning("function", tokenOrValue.value.name);
+          builder.addWarning("function", tokenOrValue.value.name);
           return;
         }
       }
     }
     case "length":
-      return parseLength(tokenOrValue.value, options);
+      return parseLength(tokenOrValue.value, builder);
     case "angle":
-      return parseAngle(tokenOrValue.value, options);
+      return parseAngle(tokenOrValue.value, builder);
     case "token":
       switch (tokenOrValue.value.type) {
         case "string":
-        case "number":
         case "ident": {
           const value = tokenOrValue.value.value;
-          if (typeof value === "string") {
-            if (!options.allowAuto && value === "auto") {
-              return options.addWarning("value", value);
-            }
+          if (!allowAuto && value === "auto") {
+            builder.addWarning("value", value);
+            return;
+          }
 
-            if (value === "inherit") {
-              return options.addWarning("value", value);
-            }
+          if (value === "inherit") {
+            builder.addWarning("value", value);
+            return;
+          } else if (value === "currentcolor") {
+            return [{}, "var", "__rn-css-current-color"] as const;
+          }
 
-            if (value === "true") {
-              return true;
-            } else if (value === "false") {
-              return false;
-            } else {
-              return value;
-            }
+          if (value === "true") {
+            return true;
+          } else if (value === "false") {
+            return false;
           } else {
             return value;
           }
         }
+        case "number": {
+          return round(tokenOrValue.value.value);
+        }
         case "function":
-          options.addWarning("value", tokenOrValue.value.value);
+          builder.addWarning("value", tokenOrValue.value.value);
           return;
         case "percentage":
           return `${round(tokenOrValue.value.value * 100)}%`;
         case "dimension":
-          return parseDimension(tokenOrValue.value, options);
+          return parseDimension(tokenOrValue.value, builder);
+        case "comma":
+          return CommaSeparator as unknown as StyleDescriptor;
         case "at-keyword":
         case "hash":
         case "id-hash":
@@ -1812,7 +1085,6 @@ function parseUnparsed(
         case "comment":
         case "colon":
         case "semicolon":
-        case "comma":
         case "include-match":
         case "dash-match":
         case "prefix-match":
@@ -1835,9 +1107,9 @@ function parseUnparsed(
         }
       }
     case "color":
-      return parseColor(tokenOrValue.value, options);
+      return parseColor(tokenOrValue.value, builder);
     case "env":
-      return parseEnv(tokenOrValue.value, options);
+      return parseEnv(tokenOrValue.value, builder);
     case "time":
       return parseTime(tokenOrValue.value);
     case "url":
@@ -1853,6 +1125,20 @@ function parseUnparsed(
   return;
 }
 
+export function parseLengthDeclaration(
+  declaration: {
+    value:
+      | number
+      | Length
+      | DimensionPercentageFor_LengthValue
+      | NumberOrPercentage
+      | LengthValue;
+  },
+  builder: StylesheetBuilder,
+) {
+  return parseLength(declaration.value, builder);
+}
+
 export function parseLength(
   length:
     | number
@@ -1860,9 +1146,9 @@ export function parseLength(
     | DimensionPercentageFor_LengthValue
     | NumberOrPercentage
     | LengthValue,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
-  const { inlineRem = 14 } = options;
+  const { inlineRem = 14 } = builder.getOptions();
 
   if (typeof length === "number") {
     return length;
@@ -1876,12 +1162,12 @@ export function parseLength(
         if (typeof inlineRem === "number") {
           return length.value * inlineRem;
         } else {
-          return [{}, "rem", [length.value]];
+          return [{}, "rem", length.value];
         }
       case "vw":
       case "vh":
       case "em":
-        return [{}, length.unit, [length.value], 1];
+        return [{}, length.unit, length.value, 1];
       case "in":
       case "cm":
       case "mm":
@@ -1926,7 +1212,7 @@ export function parseLength(
       case "lvmax":
       case "dvmax":
       case "cqmax":
-        options.addWarning("value", `${length.value}${length.unit}`);
+        builder.addWarning("value", `${length.value}${length.unit}`);
         return undefined;
       default: {
         length.unit satisfies never;
@@ -1946,7 +1232,7 @@ export function parseLength(
       }
       case "dimension":
       case "value": {
-        return parseLength(length.value, options);
+        return parseLength(length.value, builder);
       }
     }
   }
@@ -1954,7 +1240,7 @@ export function parseLength(
   return;
 }
 
-function parseAngle(angle: Angle | number, options: ParserOptions) {
+export function parseAngle(angle: Angle | number, builder: StylesheetBuilder) {
   if (typeof angle === "number") {
     return `${angle}deg`;
   }
@@ -1964,26 +1250,71 @@ function parseAngle(angle: Angle | number, options: ParserOptions) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      options.addWarning("value", angle.value);
+      builder.addWarning("value", angle.value);
       return undefined;
   }
 }
 
-function parseSize(
+export function parseSizeDeclaration(
+  declaration: { value: Size | MaxSize },
+  builder: StylesheetBuilder,
+) {
+  return parseSize(declaration.value, builder);
+}
+
+export function parsePointerEvents(
+  { value }: { value: string },
+  builder: StylesheetBuilder,
+) {
+  switch (value) {
+    case "none":
+    case "box-none":
+    case "box-only":
+    case "auto":
+      return value;
+    case "visible":
+    case "visiblePainted":
+    case "visibleFill":
+    case "visibleStroke":
+    case "painted":
+    case "fill":
+    case "stroke":
+      builder.addWarning("value", value);
+  }
+
+  return;
+}
+
+export function parseSize(
+  size: Size | MaxSize,
+  builder: StylesheetBuilder,
+  options?: { allowAuto?: boolean },
+): StyleDescriptor;
+export function parseSize(
   size: Size | MaxSize,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
+  property: string,
+  options?: { allowAuto?: boolean },
+): StyleDescriptor;
+export function parseSize(
+  size: Size | MaxSize,
+  builder: StylesheetBuilder,
+  options?: string | { allowAuto?: boolean },
   { allowAuto = false } = {},
 ) {
+  allowAuto =
+    (typeof options === "object" ? options.allowAuto : allowAuto) ?? false;
+
   switch (size.type) {
     case "length-percentage":
-      return parseLength(size.value, options);
+      return parseLength(size.value, builder);
     case "none":
       return size.type;
     case "auto":
       if (allowAuto) {
         return size.type;
       } else {
-        options.addWarning("value", size.type);
+        builder.addWarning("value", size.type);
         return undefined;
       }
     case "min-content":
@@ -1992,7 +1323,7 @@ function parseSize(
     case "fit-content-function":
     case "stretch":
     case "contain":
-      options.addWarning("value", size.type);
+      builder.addWarning("value", size.type);
       return undefined;
     default: {
       size satisfies never;
@@ -2002,72 +1333,197 @@ function parseSize(
   return;
 }
 
-function parseColorOrAuto(color: ColorOrAuto, options: ParserOptions) {
-  if (color.type === "auto") {
-    options.addWarning("value", `Invalid color value ${color.type}`);
+export function parseColorOrAuto(
+  { value }: { value: ColorOrAuto },
+  builder: StylesheetBuilder,
+) {
+  if (value.type === "auto") {
+    builder.addWarning("value", `Invalid color value ${value.type}`);
     return;
   } else {
-    return parseColor(color.value, options);
+    return parseColor(value.value, builder);
   }
 }
 
-function parseColor(color: CssColor, options: ParserOptions) {
-  if (typeof color === "string") {
-    // TODO: Could web system colors be mapped to native?
+export function parseFontColorDeclaration(
+  declaration: Extract<Declaration, { value: CssColor }>,
+  builder: StylesheetBuilder,
+) {
+  parseColorDeclaration(declaration, builder);
+
+  builder.addDescriptor(
+    "--__rn-css-color",
+    parseColor(declaration.value, builder),
+  );
+}
+
+export function parseColorDeclaration(
+  declaration: Extract<Declaration, { value: CssColor }>,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    declaration.property,
+    parseColor(declaration.value, builder),
+  );
+}
+
+export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
+  if (typeof cssColor === "string") {
+    if (namedColors.has(cssColor)) {
+      return cssColor;
+    }
     return;
   }
 
-  switch (color.type) {
-    case "rgb": {
-      // Hex is smaller than rgb, so we convert it
-      const hexValues: string[] = [
-        color.r.toString(16).padStart(2, "0"),
-        color.g.toString(16).padStart(2, "0"),
-        color.b.toString(16).padStart(2, "0"),
-      ];
+  let color: Color | undefined;
 
-      if (color.alpha !== 1) {
-        hexValues.push(
-          Math.round(color.alpha * 255)
-            .toString(16)
-            .padStart(2, "0"),
-        );
-      }
+  const { hexColors = true, colorPrecision } = builder.getOptions();
 
-      return `#${hexValues.join("")}`;
+  switch (cssColor.type) {
+    case "currentcolor":
+      return [{}, "var", "__rn-css-current-color"] as const;
+    case "light-dark": {
+      const extraRule: StyleRule = {
+        s: [],
+        m: [["=", "prefers-color-scheme", "dark"]],
+      };
+
+      builder.addUnnamedDescriptor(
+        parseColor(cssColor.dark, builder),
+        false,
+        extraRule,
+      );
+      builder.addExtraRule(extraRule);
+      return parseColor(cssColor.light, builder);
+    }
+    case "rgb": {
+      color = new Color({
+        space: "sRGB",
+        coords: [cssColor.r / 255, cssColor.g / 255, cssColor.b / 255],
+        alpha: cssColor.alpha,
+      });
+      break;
     }
     case "hsl":
-      return `hsla(${color.h}, ${color.s}, ${color.l}, ${color.alpha})`;
-    case "currentcolor":
-      options.addWarning("value", color.type);
-      return;
-    case "light-dark":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.h, cssColor.s, cssColor.l],
+        alpha: cssColor.alpha,
+      });
+      break;
+    case "hwb":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.h, cssColor.w, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "lab":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.a, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "lch":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.c, cssColor.h],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "oklab":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.a, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "oklch":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.c, cssColor.h],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "srgb":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "srgb-linear":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "display-p3":
+      color = new Color({
+        space: "p3",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "a98-rgb":
+      color = new Color({
+        space: "a98rgb",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "prophoto-rgb":
+      color = new Color({
+        space: "prophoto",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "rec2020":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "xyz-d50":
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.x, cssColor.y, cssColor.z],
+        alpha: cssColor.alpha,
+      });
+      break;
     case "xyz-d65":
-    case "hwb":
-      options.addWarning("value", `Invalid color unit ${color.type}`);
-      return undefined;
+      color = new Color({
+        space: cssColor.type,
+        coords: [cssColor.x, cssColor.y, cssColor.z],
+        alpha: cssColor.alpha,
+      });
+      break;
     default: {
-      color satisfies never;
+      cssColor satisfies never;
     }
   }
 
-  return;
+  if (!hexColors || colorPrecision) {
+    return color?.toString({ precision: colorPrecision ?? 3 });
+  } else {
+    return color?.toString({ format: "hex" });
+  }
+}
+
+export function parseLengthPercentageOrAutoDeclaration(
+  value: { value: LengthPercentageOrAuto },
+  builder: StylesheetBuilder,
+) {
+  return parseLengthPercentageOrAuto(value.value, builder);
 }
 
-function parseLengthPercentageOrAuto(
+export function parseLengthPercentageOrAuto(
   lengthPercentageOrAuto: LengthPercentageOrAuto,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
   { allowAuto = false } = {},
 ) {
   switch (lengthPercentageOrAuto.type) {
@@ -2075,11 +1531,11 @@ function parseLengthPercentageOrAuto(
       if (allowAuto) {
         return lengthPercentageOrAuto.type;
       } else {
-        options.addWarning("value", lengthPercentageOrAuto.type);
+        builder.addWarning("value", lengthPercentageOrAuto.type);
         return undefined;
       }
     case "length-percentage":
-      return parseLength(lengthPercentageOrAuto.value, options);
+      return parseLength(lengthPercentageOrAuto.value, builder);
     default: {
       lengthPercentageOrAuto satisfies never;
     }
@@ -2088,9 +1544,9 @@ function parseLengthPercentageOrAuto(
   return;
 }
 
-function parseJustifyContent(
-  justifyContent: JustifyContent,
-  options: ParserOptions,
+export function parseJustifyContent(
+  declaration: DeclarationType<"justify-content">,
+  builder: StylesheetBuilder,
 ) {
   const allowed = new Set([
     "flex-start",
@@ -2103,30 +1559,33 @@ function parseJustifyContent(
 
   let value: string | undefined;
 
-  switch (justifyContent.type) {
+  switch (declaration.value.type) {
     case "normal":
     case "left":
     case "right":
-      value = justifyContent.type;
+      value = declaration.value.type;
       break;
     case "content-distribution":
     case "content-position":
-      value = justifyContent.value;
+      value = declaration.value.value;
       break;
     default: {
-      justifyContent satisfies never;
+      declaration.value satisfies never;
     }
   }
 
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
 
   return value;
 }
 
-function parseAlignContent(alignContent: AlignContent, options: ParserOptions) {
+export function parseAlignContent(
+  declaration: DeclarationType<"align-content">,
+  builder: StylesheetBuilder,
+) {
   const allowed = new Set([
     "flex-start",
     "flex-end",
@@ -2138,29 +1597,32 @@ function parseAlignContent(alignContent: AlignContent, options: ParserOptions) {
 
   let value: string | undefined;
 
-  switch (alignContent.type) {
+  switch (declaration.value.type) {
     case "normal":
     case "baseline-position":
-      value = alignContent.type;
+      value = declaration.value.type;
       break;
     case "content-distribution":
     case "content-position":
-      value = alignContent.value;
+      value = declaration.value.value;
       break;
     default: {
-      alignContent satisfies never;
+      declaration.value satisfies never;
     }
   }
 
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
 
   return value;
 }
 
-function parseAlignItems(alignItems: AlignItems, options: ParserOptions) {
+export function parseAlignItems(
+  alignItems: DeclarationType<"align-items">,
+  builder: StylesheetBuilder,
+) {
   const allowed = new Set([
     "auto",
     "flex-start",
@@ -2172,33 +1634,36 @@ function parseAlignItems(alignItems: AlignItems, options: ParserOptions) {
 
   let value: string | undefined;
 
-  switch (alignItems.type) {
+  switch (alignItems.value.type) {
     case "normal":
       value = "auto";
       break;
     case "stretch":
-      value = alignItems.type;
+      value = alignItems.value.type;
       break;
     case "baseline-position":
       value = "baseline";
       break;
     case "self-position":
-      value = alignItems.value;
+      value = alignItems.value.value;
       break;
     default: {
-      alignItems satisfies never;
+      alignItems.value satisfies never;
     }
   }
 
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
 
   return value;
 }
 
-function parseAlignSelf(alignSelf: AlignSelf, options: ParserOptions) {
+export function parseAlignSelf(
+  alignSelf: DeclarationType<"align-self">,
+  builder: StylesheetBuilder,
+) {
   const allowed = new Set([
     "auto",
     "flex-start",
@@ -2210,34 +1675,44 @@ function parseAlignSelf(alignSelf: AlignSelf, options: ParserOptions) {
 
   let value: string | undefined;
 
-  switch (alignSelf.type) {
+  switch (alignSelf.value.type) {
     case "normal":
     case "auto":
       value = "auto";
       break;
     case "stretch":
-      value = alignSelf.type;
+      value = alignSelf.value.type;
       break;
     case "baseline-position":
       value = "baseline";
       break;
     case "self-position":
-      value = alignSelf.value;
+      value = alignSelf.value.value;
       break;
     default: {
-      alignSelf satisfies never;
+      alignSelf.value satisfies never;
     }
   }
 
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
 
   return value;
 }
 
-function parseFontWeight(fontWeight: FontWeight, options: ParserOptions) {
+export function parseFontWeightDeclaration(
+  declaration: DeclarationType<"font-weight">,
+  builder: StylesheetBuilder,
+) {
+  return parseFontWeight(declaration.value, builder);
+}
+
+export function parseFontWeight(
+  fontWeight: FontWeight,
+  builder: StylesheetBuilder,
+) {
   switch (fontWeight.type) {
     case "absolute":
       if (fontWeight.value.type === "weight") {
@@ -2247,7 +1722,7 @@ function parseFontWeight(fontWeight: FontWeight, options: ParserOptions) {
       }
     case "bolder":
     case "lighter":
-      options.addWarning("value", fontWeight.type);
+      builder.addWarning("value", fontWeight.type);
       return;
     default: {
       fontWeight satisfies never;
@@ -2257,55 +1732,67 @@ function parseFontWeight(fontWeight: FontWeight, options: ParserOptions) {
   return;
 }
 
-function parseTextShadow(
-  add: AddFn,
-  [textShadow]: TextShadow[],
-  options: ParserOptions,
+export function parseTextShadow(
+  declaration: DeclarationType<"text-shadow">,
+  builder: StylesheetBuilder,
 ) {
+  const [textShadow] = declaration.value;
+
   if (!textShadow) {
     return;
   }
-  add("style", "textShadowColor", parseColor(textShadow.color, options));
-  add(
-    "style",
+  builder.addDescriptor(
+    "textShadowColor",
+    parseColor(textShadow.color, builder),
+  );
+  builder.addDescriptor(
     "textShadowOffset.width",
-    parseLength(textShadow.xOffset, options),
+    parseLength(textShadow.xOffset, builder),
   );
-  add(
-    "style",
+  builder.addDescriptor(
     "textShadowOffset.height",
-    parseLength(textShadow.yOffset, options),
+    parseLength(textShadow.yOffset, builder),
+  );
+  builder.addDescriptor(
+    "textShadowRadius",
+    parseLength(textShadow.blur, builder),
   );
-  add("style", "textShadowRadius", parseLength(textShadow.blur, options));
 }
 
-function parseTextDecorationStyle(
-  textDecorationStyle: TextDecorationStyle,
-  options: ParserOptions,
+export function parseTextDecorationStyle(
+  declaration: DeclarationType<"text-decoration-style">,
+  builder: StylesheetBuilder,
 ) {
   const allowed = new Set(["solid", "double", "dotted", "dashed"]);
 
-  if (allowed.has(textDecorationStyle)) {
-    return textDecorationStyle;
+  if (allowed.has(declaration.value)) {
+    return declaration.value;
   }
 
-  options.addWarning("value", textDecorationStyle);
-  return undefined;
+  builder.addWarning("value", declaration.value);
+  return;
 }
 
-function parseTextDecorationLine(
-  textDecorationLine: TextDecorationLine,
-  options: ParserOptions,
+export function parseTextDecorationLineDeclaration(
+  declaration: DeclarationType<"text-decoration-line">,
+  builder: StylesheetBuilder,
 ) {
-  if (!Array.isArray(textDecorationLine)) {
-    if (textDecorationLine === "none") {
-      return textDecorationLine;
+  return parseTextDecorationLine(declaration.value, builder);
+}
+
+export function parseTextDecorationLine(
+  value: DeclarationType<"text-decoration-line">["value"],
+  builder: StylesheetBuilder,
+) {
+  if (!Array.isArray(value)) {
+    if (value === "none") {
+      return value;
     }
-    options.addWarning("value", textDecorationLine);
+    builder.addWarning("value", value);
     return;
   }
 
-  const set = new Set(textDecorationLine);
+  const set = new Set(value);
 
   if (set.has("underline")) {
     if (set.has("line-through")) {
@@ -2317,102 +1804,166 @@ function parseTextDecorationLine(
     return "line-through";
   }
 
-  options.addWarning("value", textDecorationLine.join(" "));
+  builder.addWarning("value", value.join(" "));
   return undefined;
 }
 
-function parseOverflow(overflow: OverflowKeyword, options: ParserOptions) {
+export function parsePosition(
+  { value }: DeclarationType<"position">,
+  builder: StylesheetBuilder,
+) {
+  if (value.type === "absolute" || value.type === "relative") {
+    return value.type;
+  }
+
+  builder.addWarning("value", value.type);
+  return;
+}
+
+export function parseOverflow(
+  { value }: DeclarationType<"overflow">,
+  builder: StylesheetBuilder,
+) {
   const allowed = new Set(["visible", "hidden"]);
 
-  if (allowed.has(overflow)) {
-    return overflow;
+  if (allowed.has(value.x)) {
+    return value.x;
   }
 
-  options.addWarning("value", overflow);
+  builder.addWarning("value", value.x);
   return undefined;
 }
 
-function parseBorderStyle(
-  borderStyle: BorderStyle | LineStyle,
-  options: ParserOptions,
+export function parseBorderStyleDeclaration(
+  declaration: DeclarationType<"border-style">,
+  builder: StylesheetBuilder,
+) {
+  return parseBorderStyle(declaration.value, builder);
+}
+
+export function parseBorderStyle(
+  value: BorderStyle | LineStyle,
+  builder: StylesheetBuilder,
 ) {
   const allowed = new Set(["solid", "dotted", "dashed"]);
 
-  if (typeof borderStyle === "string") {
-    if (allowed.has(borderStyle)) {
-      return borderStyle;
+  if (typeof value === "string") {
+    if (allowed.has(value)) {
+      return value;
     } else {
-      options.addWarning("value", borderStyle);
+      builder.addWarning("value", value);
       return undefined;
     }
   } else if (
-    borderStyle.top === borderStyle.bottom &&
-    borderStyle.top === borderStyle.left &&
-    borderStyle.top === borderStyle.right &&
-    allowed.has(borderStyle.top)
+    value.top === value.bottom &&
+    value.top === value.left &&
+    value.top === value.right &&
+    allowed.has(value.top)
   ) {
-    return borderStyle.top;
+    return value.top;
   }
 
-  options.addWarning("value", borderStyle.top);
+  builder.addWarning("value", value.top);
 
   return undefined;
 }
 
-function parseBorderSideWidth(
-  borderSideWidth: BorderSideWidth,
-  options: ParserOptions,
+export function parseBorderBlockColor(
+  { value }: { value: BorderBlockColor },
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
+  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
+  return;
+}
+
+export function parseBorderBlockWidth(
+  declaration: DeclarationType<"border-block-width" | "border-inline-width">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "border-top-width",
+    parseBorderSideWidth(declaration.value.start, builder),
+  );
+  builder.addDescriptor(
+    "border-bottom-width",
+    parseBorderSideWidth(declaration.value.end, builder),
+  );
+}
+
+export function parseBorderSideWidthDeclaration(
+  declaration: { value: BorderSideWidth },
+  builder: StylesheetBuilder,
 ) {
-  if (borderSideWidth.type === "length") {
-    return parseLength(borderSideWidth.value, options);
+  return parseBorderSideWidth(declaration.value, builder);
+}
+
+export function parseBorderSideWidth(
+  value: BorderSideWidth,
+  builder: StylesheetBuilder,
+) {
+  if (value.type === "length") {
+    return parseLength(value.value, builder);
   }
 
-  options.addWarning("value", borderSideWidth.type);
+  builder.addWarning("value", value.type);
   return undefined;
 }
 
-function parseVerticalAlign(
-  verticalAlign: VerticalAlign,
-  options: ParserOptions,
+export function parseVerticalAlign(
+  { value }: DeclarationType<"vertical-align">,
+  builder: StylesheetBuilder,
 ) {
-  if (verticalAlign.type === "length") {
+  if (value.type === "length") {
     return undefined;
   }
 
   const allowed = new Set(["auto", "top", "bottom", "middle"]);
 
-  if (allowed.has(verticalAlign.value)) {
-    return verticalAlign.value;
+  if (allowed.has(value.value)) {
+    return value.value;
   }
 
-  options.addWarning("value", verticalAlign.value);
+  builder.addWarning("value", value.value);
   return undefined;
 }
 
-function parseFontFamily(fontFamily: FontFamily[]) {
+function parseFontFamily({ value }: DeclarationType<"font-family">) {
   // React Native only allows one font family - better hope this is the right one :)
-  return fontFamily[0];
+  return value[0];
+}
+
+export function parseLineHeightDeclaration(
+  declaration: DeclarationType<"line-height">,
+  builder: StylesheetBuilder,
+) {
+  return parseLineHeight(declaration.value, builder);
 }
 
-function parseLineHeight(
-  lineHeight: LineHeight,
-  options: ParserOptions,
+export function parseLineHeight(
+  value: LineHeight,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
-  switch (lineHeight.type) {
+  switch (value.type) {
     case "normal":
       return undefined;
     case "number":
-      return [{}, "em", [lineHeight.value], 1];
+      return [{}, "em", [value.value], 1];
     case "length": {
-      const length = lineHeight.value;
+      const length = value.value;
 
       switch (length.type) {
         case "dimension":
-          return parseLength(length, options);
+          return parseLength(length, builder);
         case "percentage":
         case "calc":
-          options.addWarning("value", length.value);
-          return undefined;
+          builder.addWarning(
+            "value",
+            typeof length.value === "number"
+              ? length.value
+              : JSON.stringify(length.value),
+          );
+          return;
         default: {
           length satisfies never;
         }
@@ -2421,48 +1972,71 @@ function parseLineHeight(
       return;
     }
     default: {
-      lineHeight satisfies never;
+      value satisfies never;
     }
   }
 
   return;
 }
 
-function parseFontSize(fontSize: FontSize, options: ParserOptions) {
-  switch (fontSize.type) {
+export function parseFontSizeDeclaration(
+  declaration: DeclarationType<"font-size">,
+  builder: StylesheetBuilder,
+) {
+  const fontSize = parseFontSize(declaration.value, builder);
+  builder.addDescriptor("fontSize", fontSize);
+  builder.addDescriptor("--__rn-css-em", fontSize);
+}
+
+export function parseFontSize(value: FontSize, builder: StylesheetBuilder) {
+  switch (value.type) {
     case "length":
-      return parseLength(fontSize.value, options);
+      return parseLength(value.value, builder);
     case "absolute":
     case "relative":
-      options.addWarning("value", fontSize.value);
+      builder.addWarning("value", value.value);
       return undefined;
     default: {
-      fontSize satisfies never;
+      value satisfies never;
     }
   }
 
   return;
 }
 
-function parseFontStyle(fontStyle: FontStyle, options: ParserOptions) {
-  switch (fontStyle.type) {
+export function parseFontStyleDeclaration(
+  declaration: DeclarationType<"font-style">,
+  builder: StylesheetBuilder,
+) {
+  return parseFontStyle(declaration.value, builder);
+}
+
+export function parseFontStyle(value: FontStyle, builder: StylesheetBuilder) {
+  switch (value.type) {
     case "normal":
     case "italic":
-      return fontStyle.type;
+      return value.type;
     case "oblique":
-      options.addWarning("value", fontStyle.type);
+      builder.addWarning("value", value.type);
       return undefined;
     default: {
-      fontStyle satisfies never;
+      value satisfies never;
     }
   }
 
   return;
 }
 
-function parseFontVariantCaps(
-  fontVariantCaps: FontVariantCaps,
-  options: ParserOptions,
+export function parseFontVariantCapsDeclaration(
+  declaration: DeclarationType<"font-variant-caps">,
+  builder: StylesheetBuilder,
+) {
+  return parseFontVariantCaps(declaration.value, builder);
+}
+
+export function parseFontVariantCaps(
+  value: FontVariantCaps,
+  builder: StylesheetBuilder,
 ) {
   const allowed = new Set([
     "small-caps",
@@ -2471,207 +2045,162 @@ function parseFontVariantCaps(
     "tabular-nums",
     "proportional-nums",
   ]);
-  if (allowed.has(fontVariantCaps)) {
-    return fontVariantCaps;
+  if (allowed.has(value)) {
+    return value;
   }
 
-  options.addWarning("value", fontVariantCaps);
+  builder.addWarning("value", value);
   return undefined;
 }
 
-function parseLengthOrCoercePercentageToRuntime(
+export function parseLengthOrCoercePercentageToRuntime(
   value: Length | DimensionPercentageFor_LengthValue | NumberOrPercentage,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
-  return parseLength(value, options);
-}
-
-function parseGap(value: GapValue, options: ParserOptions) {
-  if (value.type === "normal") {
-    options.addWarning("value", value.type);
-    return;
-  }
-
-  return parseLength(value.value, options);
+  return parseLength(value, builder);
 }
 
-function parseRNRuntimeSpecificsFunction(
-  name: string,
-  args: TokenOrValue[],
-  options: ParserOptions,
-): StyleDescriptor {
-  let key: string | undefined;
-  const runtimeArgs: Record<string, StyleDescriptor> = {};
+export function parseGap(
+  declaration: DeclarationType<"gap" | "column-gap" | "row-gap">,
+  builder: StylesheetBuilder,
+) {
+  if ("column" in declaration.value) {
+    builder.addDescriptor("row-gap", parseGap(declaration, builder));
+    builder.addDescriptor("column-gap", parseGap(declaration, builder));
 
-  for (const token of args) {
-    if (!key) {
-      if (
-        token.type === "token" &&
-        (token.value.type === "ident" || token.value.type === "number")
-      ) {
-        key = token.value.value.toString();
-        continue;
-      }
-    } else {
-      if (token.type !== "token") {
-        const value = parseUnparsed(token, options);
-        if (value === undefined) {
-          return;
-        }
-        runtimeArgs[key] = value;
-        key = undefined;
-      } else {
-        switch (token.value.type) {
-          case "string":
-          case "number":
-          case "ident": {
-            if (key) {
-              runtimeArgs[key] = parseUnparsed(token, options);
-              key = undefined;
-              continue;
-            } else {
-              return;
-            }
-          }
-          case "delim":
-          case "comma":
-            continue;
-          case "function":
-          case "at-keyword":
-          case "hash":
-          case "id-hash":
-          case "unquoted-url":
-          case "percentage":
-          case "dimension":
-          case "white-space":
-          case "comment":
-          case "colon":
-          case "semicolon":
-          case "include-match":
-          case "dash-match":
-          case "prefix-match":
-          case "suffix-match":
-          case "substring-match":
-          case "cdo":
-          case "cdc":
-          case "parenthesis-block":
-          case "square-bracket-block":
-          case "curly-bracket-block":
-          case "bad-url":
-          case "bad-string":
-          case "close-parenthesis":
-          case "close-square-bracket":
-          case "close-curly-bracket":
-            return undefined;
-        }
-      }
+    return;
+  } else {
+    if (declaration.value.type === "normal") {
+      builder.addWarning("value", declaration.value.type);
+      return;
     }
-  }
 
-  return [{}, name, Object.entries(runtimeArgs)];
+    return parseLength(declaration.value.value, builder);
+  }
 }
 
-function parseTextAlign(textAlign: TextAlign, options: ParserOptions) {
+export function parseTextAlign(
+  { value }: DeclarationType<"text-align">,
+  builder: StylesheetBuilder,
+) {
   const allowed = new Set(["auto", "left", "right", "center", "justify"]);
-  if (allowed.has(textAlign)) {
-    return textAlign;
+  if (allowed.has(value)) {
+    return value;
   }
 
-  options.addWarning("value", textAlign);
+  builder.addWarning("value", value);
   return undefined;
 }
 
-function parseBoxShadow(boxShadows: BoxShadow[], options: ParserOptions) {
-  if (boxShadows.length > 1) {
-    options.addWarning("value", "multiple box shadows");
-    return;
-  }
-
-  const boxShadow = boxShadows[0];
-
-  if (!boxShadow) {
-    return;
+export function parseBoxShadow(
+  { value }: DeclarationType<"box-shadow">,
+  builder: StylesheetBuilder,
+) {
+  for (const [index, shadow] of value.entries()) {
+    builder.addDescriptor(
+      `boxShadow.[${index}].color`,
+      parseColor(shadow.color, builder),
+    );
+    builder.addDescriptor(
+      `boxShadow.[${index}].offsetX`,
+      parseLength(shadow.xOffset, builder),
+    );
+    builder.addDescriptor(
+      `boxShadow.[${index}].offsetY`,
+      parseLength(shadow.yOffset, builder),
+    );
+    builder.addDescriptor(
+      `boxShadow.[${index}].blurRadius`,
+      parseLength(shadow.blur, builder),
+    );
+    builder.addDescriptor(
+      `boxShadow.[${index}].spreadDistance`,
+      parseLength(shadow.spread, builder),
+    );
+    builder.addDescriptor(
+      `boxShadow.[${index}].inset`,
+      shadow.inset ? true : undefined,
+    );
   }
-
-  options.add("style", "shadowColor", parseColor(boxShadow.color, options));
-  options.add("style", "shadowRadius", parseLength(boxShadow.spread, options));
-  // options.add("style",
-  //   ["shadowOffsetWidth"],
-  //   parseLength(boxShadow.xOffset, options, ["", ""),
-  // );
-  // options.add("style",
-  //   ["shadowOffset", "height"],
-  //   parseLength(boxShadow.yOffset, options),
-  // );
 }
 
-function parseDisplay(display: Display, options: ParserOptions) {
-  if (display.type === "keyword") {
-    if (display.value === "none") {
-      return display.value;
+export function parseDisplay(
+  { value }: DeclarationType<"display">,
+  builder: StylesheetBuilder,
+) {
+  if (value.type === "keyword") {
+    if (value.value === "none") {
+      return value.value;
     } else {
-      return options.addWarning("value", display.value);
+      builder.addWarning("value", value.value);
+      return;
     }
-  } else if (display.type === "pair") {
-    if (display.outside === "block") {
-      switch (display.inside.type) {
+  } else {
+    if (value.outside === "block") {
+      switch (value.inside.type) {
         case "flow":
-          if (display.isListItem) {
-            return options.addWarning("value", "list-item");
+          if (value.isListItem) {
+            builder.addWarning("value", "list-item");
           } else {
-            return options.addWarning("value", "block");
+            builder.addWarning("value", "block");
           }
+          return;
+        case "flex":
+          return value.inside.type;
         case "flow-root":
-          return options.addWarning("value", "flow-root");
         case "table":
-          return options.addWarning("value", display.inside.type);
-        case "flex":
-          return display.inside.type;
         case "box":
         case "grid":
         case "ruby":
-          return options.addWarning("value", display.inside.type);
+          builder.addWarning("value", value.inside.type);
+          return;
       }
     } else {
-      switch (display.inside.type) {
+      switch (value.inside.type) {
         case "flow":
-          return options.addWarning("value", "inline");
+          builder.addWarning("value", "inline");
+          return;
         case "flow-root":
-          return options.addWarning("value", "inline-block");
+          builder.addWarning("value", "inline-block");
+          return;
         case "table":
-          return options.addWarning("value", "inline-table");
+          builder.addWarning("value", "inline-table");
+          return;
         case "flex":
-          return options.addWarning("value", "inline-flex");
+          builder.addWarning("value", "inline-flex");
+          return;
         case "box":
         case "grid":
-          return options.addWarning("value", "inline-grid");
+          builder.addWarning("value", "inline-grid");
+          return;
         case "ruby":
-          return options.addWarning("value", display.inside.type);
+          builder.addWarning("value", value.inside.type);
+          return;
       }
     }
   }
-
-  return;
 }
 
-function parseAspectRatio(
-  // This is missing types
-  aspectRatio: any,
-): StyleDescriptor {
-  if (aspectRatio.auto) {
+export function parseAspectRatio({
+  value,
+}: DeclarationType<"aspect-ratio">): StyleDescriptor {
+  if (!value.ratio) {
+    return;
+  } else if (value.auto) {
     return "auto";
   } else {
-    if (aspectRatio.ratio[0] === aspectRatio.ratio[1]) {
+    const [width, height] = value.ratio;
+    if (width === height) {
       return 1;
     } else {
-      return aspectRatio.ratio.join(" / ");
+      return `${width}/${height}`;
     }
   }
 }
 
-function parseDimension(
+export function parseDimension(
   { unit, value }: Extract<Token, { type: "dimension" }>,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
   switch (unit) {
     case "px":
@@ -2682,52 +2211,60 @@ function parseDimension(
     case "rnw":
       return [{}, unit, [value / 100], 1];
     default: {
-      return options.addWarning("value", `${value}${unit}`);
+      builder.addWarning("value", `${value}${unit}`);
+      return;
     }
   }
 }
 
-function parseUserSelect(value: UserSelect, options: ParserOptions) {
+export function parseUserSelect(
+  { value }: DeclarationType<"user-select">,
+  builder: StylesheetBuilder,
+) {
   const allowed = ["auto", "text", "none", "contain", "all"];
   if (allowed.includes(value)) {
     return value;
   } else {
-    return options.addWarning("value", value);
+    builder.addWarning("value", value);
+    return;
   }
 }
 
-function parseSVGPaint(value: SVGPaint, options: ParserOptions) {
+export function parseSVGPaint(
+  { value }: DeclarationType<"fill" | "stroke">,
+  builder: StylesheetBuilder,
+) {
   if (value.type === "none") {
     return "transparent";
   } else if (value.type === "color") {
-    return parseColor(value.value, options);
+    return parseColor(value.value, builder);
   }
 
   return;
 }
 
-function round(number: number) {
+export function round(number: number) {
   return Math.round((number + Number.EPSILON) * 100) / 100;
 }
 
-function parseDimensionPercentageFor_LengthValue(
+export function parseDimensionPercentageFor_LengthValue(
   value: DimensionPercentageFor_LengthValue,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ) {
   if (value.type === "calc") {
     return undefined;
   } else if (value.type === "percentage") {
     return `${value.value}%`;
   } else {
-    return parseLength(value.value, options);
+    return parseLength(value.value, builder);
   }
 }
 
 const allowAuto = new Set(["pointer-events"]);
 
-function parseEnv(
+export function parseEnv(
   value: EnvironmentVariable,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleFunction | undefined {
   switch (value.name.type) {
     case "ua":
@@ -2741,7 +2278,7 @@ function parseEnv(
             "var",
             [
               `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, options),
+              parseUnparsed(value.fallback, builder),
             ],
             1,
           ];
@@ -2763,9 +2300,9 @@ function parseEnv(
 export function parseCalcFn(
   name: string,
   tokens: TokenOrValue[],
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
-  const args = parseCalcArguments(tokens, options);
+  const args = parseCalcArguments(tokens, builder);
   if (args) {
     return [{}, name, args];
   }
@@ -2773,7 +2310,10 @@ export function parseCalcFn(
   return;
 }
 
-function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
+export function parseCalcArguments(
+  [...args]: TokenOrValue[],
+  builder: StylesheetBuilder,
+) {
   const parsed: StyleDescriptor[] = [];
 
   let mode: "number" | "percentage" | undefined;
@@ -2781,13 +2321,13 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
   for (const [currentIndex, arg] of args.entries()) {
     switch (arg.type) {
       case "env": {
-        parsed.push(parseEnv(arg.value, options));
+        parsed.push(parseEnv(arg.value, builder));
         break;
       }
       case "var":
       case "function":
       case "unresolved-color": {
-        const value = parseUnparsed(arg, options);
+        const value = parseUnparsed(arg, builder);
 
         if (value === undefined) {
           return undefined;
@@ -2797,7 +2337,7 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
         break;
       }
       case "length": {
-        const value = parseLength(arg.value, options);
+        const value = parseLength(arg.value, builder);
 
         if (value !== undefined) {
           parsed.push(value);
@@ -2825,12 +2365,12 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
             }
             break;
           case "percentage":
-            if (!mode) mode = "percentage";
+            mode ??= "percentage";
             if (mode !== "percentage") return;
             parsed.push(`${arg.value.value * 100}%`);
             break;
           case "number": {
-            if (!mode) mode = "number";
+            mode ??= "number";
             if (mode !== "number") return;
             parsed.push(arg.value.value);
             break;
@@ -2842,6 +2382,7 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
              */
             let closeParenthesisIndex = -1;
             for (let index = args.length - 1; index > 0; index--) {
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               const value = args[index]!;
               if (
                 value.type === "token" &&
@@ -2862,7 +2403,7 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
               // Then drop the surrounding parenthesis
               .slice(1, -1);
 
-            parsed.push(parseCalcFn("calc", innerCalcArgs, options));
+            parsed.push(parseCalcFn("calc", innerCalcArgs, builder));
 
             break;
           }
@@ -2900,33 +2441,21 @@ function parseCalcArguments([...args]: TokenOrValue[], options: ParserOptions) {
   return parsed;
 }
 
-export function parseTranslate(
-  translate: Translate,
+export function parseTranslateProp(
+  value: Translate,
   prop: keyof Extract<Translate, object>,
-  options: ParserOptions,
-): StyleDescriptor {
-  if (translate === "none") {
-    return 0;
-  }
-
-  return parseLength(translate[prop], options);
-}
-
-export function parseScale(
-  translate: Scale,
-  prop: keyof Extract<Scale, object>,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
-  if (translate === "none") {
+  if (value === "none") {
     return 0;
   }
 
-  return parseLength(translate[prop], options);
+  return parseLength(value[prop], builder);
 }
 
 export function parseUnresolvedColor(
   color: UnresolvedColor,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
   switch (color.type) {
     case "rgb":
@@ -2937,17 +2466,27 @@ export function parseUnresolvedColor(
           round(color.r * 255),
           round(color.g * 255),
           round(color.b * 255),
-          parseUnparsed(color.alpha, options),
+          parseUnparsed(color.alpha, builder),
         ],
       ];
     case "hsl":
       return [
         {},
         color.type,
-        [color.h, color.s, color.l, parseUnparsed(color.alpha, options)],
+        [color.h, color.s, color.l, parseUnparsed(color.alpha, builder)],
       ];
-    case "light-dark":
-      return undefined;
+    case "light-dark": {
+      const extraRule = builder.extendRule({
+        m: [["=", "prefers-color-scheme", "dark"]],
+      });
+      builder.addUnnamedDescriptor(
+        reduceParseUnparsed(color.dark, builder),
+        false,
+        extraRule,
+      );
+      builder.addExtraRule(extraRule);
+      return reduceParseUnparsed(color.light, builder);
+    }
     default:
       color satisfies never;
   }
@@ -2955,12 +2494,12 @@ export function parseUnresolvedColor(
   return;
 }
 
-function allEqual(...params: unknown[]) {
+export function allEqual(...params: unknown[]) {
   return params.every((param, index, array) => {
     return index === 0 ? true : equal(array[0], param);
   });
 }
-function equal(a: unknown, b: unknown) {
+export function equal(a: unknown, b: unknown) {
   if (a === b) return true;
   if (typeof a !== typeof b) return false;
   if (a === null || b === null) return false;
@@ -2988,20 +2527,34 @@ function equal(a: unknown, b: unknown) {
   return false;
 }
 
-function parseTime(time: Time) {
+export function parseTime(time: Time) {
   return time.type === "milliseconds" ? time.value : time.value * 1000;
 }
 
-function addTransitionValue(
+export function parseSize2DDimensionPercentageDeclaration(
+  declaration: { value: Size2DFor_DimensionPercentageFor_LengthValue },
+  builder: StylesheetBuilder,
+) {
+  return parseSize2DDimensionPercentage(declaration.value, builder);
+}
+
+export function parseSize2DDimensionPercentage(
+  value: Size2DFor_DimensionPercentageFor_LengthValue,
+  builder: StylesheetBuilder,
+) {
+  return parseLength(value[0], builder);
+}
+
+export function addTransitionValue(
   declaration: Extract<
     Declaration,
     { property: `transition${string}` | "transition" }
   >,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ) {
   switch (declaration.property) {
-    case "transition":
-      const grouped: Record<string, any[]> = {};
+    case "transition": {
+      const grouped: Record<string, unknown[]> = {};
 
       for (const animation of declaration.value) {
         for (const [key, value] of Object.entries(animation)) {
@@ -3015,49 +2568,56 @@ function addTransitionValue(
           {
             property: `transition-${kebabCase(property)}`,
             value,
-          } as any,
-          options,
+          } as Extract<
+            Declaration,
+            { property: `transition${string}` | "transition" }
+          >,
+          builder,
         );
       }
       break;
+    }
     case "transition-property": {
-      return options.add(
-        "transition",
+      builder.addDescriptor(
         declaration.property,
-        declaration.value.map((v) => v.property),
+        declaration.value
+          .map((v) => v.property)
+          .filter((v) => v in parsers || v === "all" || v === "none")
+          .map((v) => toRNProperty(v)),
       );
+      return;
     }
     case "transition-duration":
-      return options.add(
-        "transition",
+      builder.addDescriptor(
         declaration.property,
         declaration.value.map((t) => parseTime(t)),
       );
+      return;
     case "transition-delay":
-      return options.add(
-        "transition",
+      builder.addDescriptor(
         declaration.property,
         declaration.value.map((t) => parseTime(t)),
       );
+      return;
     case "transition-timing-function":
-      return options.add(
-        "transition",
+      builder.addDescriptor(
         declaration.property,
-        parseEasingFunction(declaration.value) as any,
+        parseEasingFunction(declaration.value),
       );
+      return;
   }
 }
 
-function addAnimationValue(
+export function addAnimationValue(
   declaration: Extract<
     Declaration,
     { property: `animation${string}` | "animation" }
   >,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ) {
   switch (declaration.property) {
     case "animation": {
-      const grouped: Record<string, any[]> = {};
+      const grouped: Record<string, unknown[]> = {};
 
       for (const animation of declaration.value) {
         for (const [key, value] of Object.entries(animation)) {
@@ -3071,47 +2631,46 @@ function addAnimationValue(
           {
             property: `animation-${kebabCase(property)}`,
             value,
-          } as any,
-          options,
+          } as Extract<
+            Declaration,
+            { property: `animation${string}` | "animation" }
+          >,
+          builder,
         );
       }
       break;
     }
     case "animation-delay": {
-      options.add(
-        "animation",
+      builder.addDescriptor(
         declaration.property,
         declaration.value.map((t) => parseTime(t)),
       );
       break;
     }
     case "animation-direction": {
-      options.add("animation", declaration.property, declaration.value);
+      builder.addDescriptor(declaration.property, declaration.value);
       break;
     }
     case "animation-duration": {
-      options.add(
-        "animation",
+      builder.addDescriptor(
         declaration.property,
         declaration.value.map((t) => parseTime(t)),
       );
       break;
     }
     case "animation-fill-mode": {
-      options.add("animation", declaration.property, declaration.value);
+      builder.addDescriptor(declaration.property, declaration.value);
       break;
     }
     case "animation-iteration-count": {
-      options.add(
-        "animation",
+      builder.addDescriptor(
         declaration.property,
         parseIterationCount(declaration.value),
       );
       break;
     }
     case "animation-name": {
-      options.add(
-        "animation",
+      builder.addDescriptor(
         declaration.property,
         declaration.value.map((v) =>
           v.type === "none"
@@ -3122,25 +2681,284 @@ function addAnimationValue(
       break;
     }
     case "animation-play-state": {
-      options.add("animation", declaration.property, declaration.value);
+      builder.addDescriptor(declaration.property, declaration.value);
       break;
     }
     case "animation-timing-function": {
-      options.add(
-        "animation",
+      builder.addDescriptor(
         declaration.property,
-        parseEasingFunction(declaration.value) as any,
+        parseEasingFunction(declaration.value),
       );
       break;
     }
   }
 }
 
-function kebabCase(str: string) {
+export function kebabCase(str: string) {
   return str.replace(
     /[A-Z]+(?![a-z])|[A-Z]/g,
     ($, ofs) => (ofs ? "-" : "") + $.toLowerCase(),
   );
 }
 
-const runtimeShorthands = new Set(["animation", "text-shadow", "transform"]);
+function parseBackgroundImage(
+  declaration: DeclarationType<"background-image">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "experimental_backgroundImage",
+    declaration.value.flatMap((image): StyleDescriptor[] => {
+      switch (image.type) {
+        case "gradient": {
+          const gradient = parseGradient(image.value, builder);
+          return gradient ? [gradient] : [];
+        }
+        case "none":
+          return ["none"];
+      }
+
+      return [];
+    }),
+  );
+  return;
+}
+
+function parseGradient(
+  gradient: Gradient,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (gradient.type) {
+    case "linear": {
+      return [
+        {},
+        "@linear-gradient",
+        [
+          parseLineDirection(gradient.direction, builder),
+          ...gradient.items.map((item) => parseGradientItem(item, builder)),
+        ],
+      ];
+    }
+  }
+
+  return;
+}
+
+function parseLineDirection(
+  lineDirection: LineDirection,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (lineDirection.type) {
+    case "corner":
+      return `to ${lineDirection.horizontal} ${lineDirection.vertical}`;
+    case "horizontal":
+    case "vertical":
+      return `to ${lineDirection.value}`;
+    case "angle":
+      return parseAngle(lineDirection.value, builder);
+    default: {
+      lineDirection satisfies never;
+    }
+  }
+
+  return;
+}
+
+function parseGradientItem(
+  item: GradientItemFor_DimensionPercentageFor_LengthValue,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (item.type) {
+    case "color-stop": {
+      const args: StyleDescriptor[] = [parseColor(item.color, builder)];
+      if (item.position) {
+        args.push(parseLength(item.position, builder));
+      }
+
+      return [{}, "@colorStop", args, 1];
+    }
+    case "hint":
+      return parseLength(item.value, builder);
+  }
+}
+
+function parseFilter(
+  declaration: DeclarationType<"filter">,
+  builder: StylesheetBuilder,
+) {
+  if (declaration.value.type === "none") {
+    return "unset";
+  }
+
+  return declaration.value.value
+    .map((value) => {
+      switch (value.type) {
+        case "opacity":
+        case "blur":
+        case "brightness":
+        case "contrast":
+        case "grayscale":
+        case "invert":
+        case "saturate":
+        case "sepia":
+          return {
+            [value.type]: parseLength(value.value, builder),
+          } as unknown as StyleDescriptor;
+        case "hue-rotate":
+          return {
+            [value.type]: parseAngle(value.value, builder),
+          } as unknown as StyleDescriptor;
+        case "drop-shadow":
+        case "url":
+          return;
+      }
+    })
+    .filter((value) => value !== undefined);
+}
+
+const namedColors = new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen",
+]);