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

package/dist/commonjs/compiler/declarations.js

@@ -3,28 +3,261 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.addAnimationValue = addAnimationValue;
+exports.addTransitionValue = addTransitionValue;
+exports.allEqual = allEqual;
+exports.equal = equal;
+exports.kebabCase = kebabCase;
+exports.parseAlignContent = parseAlignContent;
+exports.parseAlignItems = parseAlignItems;
+exports.parseAlignSelf = parseAlignSelf;
+exports.parseAngle = parseAngle;
+exports.parseAspectRatio = parseAspectRatio;
+exports.parseBorderBlockColor = parseBorderBlockColor;
+exports.parseBorderBlockWidth = parseBorderBlockWidth;
+exports.parseBorderSideWidth = parseBorderSideWidth;
+exports.parseBorderSideWidthDeclaration = parseBorderSideWidthDeclaration;
+exports.parseBorderStyle = parseBorderStyle;
+exports.parseBorderStyleDeclaration = parseBorderStyleDeclaration;
+exports.parseBoxShadow = parseBoxShadow;
+exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
+exports.parseColor = parseColor;
+exports.parseColorDeclaration = parseColorDeclaration;
+exports.parseColorOrAuto = parseColorOrAuto;
 exports.parseDeclaration = parseDeclaration;
+exports.parseDeclarationCustom = parseDeclarationCustom;
+exports.parseDeclarationUnparsed = parseDeclarationUnparsed;
+exports.parseDimension = parseDimension;
+exports.parseDimensionPercentageFor_LengthValue = parseDimensionPercentageFor_LengthValue;
+exports.parseDisplay = parseDisplay;
+exports.parseEnv = parseEnv;
+exports.parseFontColorDeclaration = parseFontColorDeclaration;
+exports.parseFontSize = parseFontSize;
+exports.parseFontSizeDeclaration = parseFontSizeDeclaration;
+exports.parseFontStyle = parseFontStyle;
+exports.parseFontStyleDeclaration = parseFontStyleDeclaration;
+exports.parseFontVariantCaps = parseFontVariantCaps;
+exports.parseFontVariantCapsDeclaration = parseFontVariantCapsDeclaration;
+exports.parseFontWeight = parseFontWeight;
+exports.parseFontWeightDeclaration = parseFontWeightDeclaration;
+exports.parseGap = parseGap;
+exports.parseJustifyContent = parseJustifyContent;
 exports.parseLength = parseLength;
-exports.parseScale = parseScale;
-exports.parseTranslate = parseTranslate;
+exports.parseLengthDeclaration = parseLengthDeclaration;
+exports.parseLengthOrCoercePercentageToRuntime = parseLengthOrCoercePercentageToRuntime;
+exports.parseLengthPercentageOrAuto = parseLengthPercentageOrAuto;
+exports.parseLengthPercentageOrAutoDeclaration = parseLengthPercentageOrAutoDeclaration;
+exports.parseLineHeight = parseLineHeight;
+exports.parseLineHeightDeclaration = parseLineHeightDeclaration;
+exports.parseOverflow = parseOverflow;
+exports.parsePointerEvents = parsePointerEvents;
+exports.parsePosition = parsePosition;
+exports.parseSVGPaint = parseSVGPaint;
+exports.parseScaleValue = parseScaleValue;
+exports.parseSize = parseSize;
+exports.parseSize2DDimensionPercentage = parseSize2DDimensionPercentage;
+exports.parseSize2DDimensionPercentageDeclaration = parseSize2DDimensionPercentageDeclaration;
+exports.parseSizeDeclaration = parseSizeDeclaration;
+exports.parseTextAlign = parseTextAlign;
+exports.parseTextDecorationLine = parseTextDecorationLine;
+exports.parseTextDecorationLineDeclaration = parseTextDecorationLineDeclaration;
+exports.parseTextDecorationStyle = parseTextDecorationStyle;
+exports.parseTextShadow = parseTextShadow;
+exports.parseTime = parseTime;
+exports.parseTranslateProp = parseTranslateProp;
+exports.parseUnparsed = parseUnparsed;
 exports.parseUnresolvedColor = parseUnresolvedColor;
-var _constants = require("../runtime/native/styles/constants.js");
-var _styleValue = require("../runtime/utils/style-value.js");
+exports.parseUserSelect = parseUserSelect;
+exports.parseVerticalAlign = parseVerticalAlign;
+exports.reduceParseUnparsed = reduceParseUnparsed;
+exports.round = round;
+exports.unparsedFunction = unparsedFunction;
+var _colorjs = _interopRequireDefault(require("colorjs.io"));
 var _keyframes = require("./keyframes.js");
 var _selectors = require("./selectors.js");
-/* eslint-disable */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto
 
+const CommaSeparator = Symbol("CommaSeparator");
 const propertyRename = {
-  "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", "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"];
-const validPropertiesLoose = new Set(validProperties);
-function parseDeclaration(declaration, options, add, addWarning) {
+const unparsedRuntimeParsing = new Set(["animation", "text-shadow", "transform", "box-shadow", "border"]);
+const parsers = {
+  "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["pointer-events"] = parsePointerEvents;
+const validProperties = new Set(Object.keys(parsers));
+function parseDeclaration(declaration, builder) {
   if ("vendorPrefix" in declaration && declaration.vendorPrefix.length) {
     return;
   }
@@ -32,661 +265,417 @@ function parseDeclaration(declaration, options, add, addWarning) {
     return;
   }
   if (declaration.property === "unparsed") {
-    return parseDeclarationUnparsed(declaration, options, add, addWarning);
+    parseDeclarationUnparsed(declaration, builder);
   } else if (declaration.property === "custom") {
-    return parseDeclarationCustom(declaration, options, add, addWarning);
-  }
-  if (!isValid(declaration)) {
-    return addWarning("property", declaration.property);
+    parseDeclarationCustom(declaration, builder);
+  } else {
+    parseWithParser(declaration, builder);
   }
-  const parseOptions = {
-    ...options,
-    add,
-    addWarning(value) {
-      return addWarning("value", declaration.property, value);
+}
+function parseWithParser(declaration, builder) {
+  if (declaration.property in parsers) {
+    const parser = parsers[declaration.property];
+    builder.descriptorProperty = declaration.property;
+    const value = parser(declaration, builder, declaration.property);
+    if (value !== undefined) {
+      builder.addDescriptor(propertyRename[declaration.property] ?? declaration.property, value);
     }
-  };
-  function handleStyleShorthand(name, options) {
-    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);
-      }
+  } else {
+    builder.addWarning("property", declaration.property);
+  }
+}
+function parseInsetBlock({
+  value
+}, builder) {
+  builder.addShorthand("inset-block", {
+    "inset-block-start": parseLengthPercentageOrAuto(value.blockStart, builder),
+    "inset-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder)
+  });
+}
+function parseInsetInline({
+  value
+}, builder) {
+  builder.addShorthand("inset-inline", {
+    "inset-block-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
+    "inset-block-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
+  });
+}
+function parseInset({
+  value
+}, builder) {
+  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
+}, builder) {
+  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
+}, builder) {
+  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
+}, builder) {
+  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
+}, builder) {
+  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
+}, builder) {
+  builder.addDescriptor(property + "-color", parseColor(value.color, builder));
+  builder.addDescriptor(property + "-width", parseBorderSideWidth(value.width, builder));
+}
+function parseBorderBlock({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-top-width", parseBorderSideWidth(value.width, builder));
+}
+function parseBorderBlockEnd({
+  value
+}, builder) {
+  builder.addDescriptor("border-bottom-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(value.width, builder));
+}
+function parseBorderInline({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-left-width", parseBorderSideWidth(value.width, builder));
+}
+function parseBorderInlineEnd({
+  value
+}, builder) {
+  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-right-width", parseBorderSideWidth(value.width, builder));
+}
+function parseFlexFlow({
+  value
+}, builder) {
+  builder.addDescriptor("flexWrap", value.wrap);
+  builder.addDescriptor("flexDirection", value.direction);
+}
+function parseFlex({
+  value
+}, builder) {
+  builder.addDescriptor("flex-grow", value.grow);
+  builder.addDescriptor("flex-shrink", value.shrink);
+  builder.addDescriptor("flex-basis", parseLengthPercentageOrAuto(value.basis, builder));
+}
+function parseMargin({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addShorthand("margin-block", {
+    "margin-block-start": parseLengthPercentageOrAuto(value.blockStart, builder),
+    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder)
+  });
+}
+function parseMarginInline({
+  value
+}, builder) {
+  builder.addShorthand("margin-inline", {
+    "margin-inline-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
+    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
+  });
+}
+function parsePadding({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addShorthand("padding-block", {
+    "padding-block-start": parseLengthPercentageOrAuto(value.blockStart, builder),
+    "padding-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder)
+  });
+}
+function parsePaddingInline({
+  value
+}, builder) {
+  builder.addShorthand("padding-inline", {
+    "padding-inline-start": parseLengthPercentageOrAuto(value.inlineStart, builder),
+    "padding-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder)
+  });
+}
+function parseFont({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addDescriptor("transform", [{}, "@transform", value.flatMap(t => {
+    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;
+}
+function parseTranslate({
+  value
+}, builder) {
+  builder.addDescriptor("translateX", [{}, "translateX", parseTranslateProp(value, "x", builder)]);
+  builder.addDescriptor("translateY", [{}, "translateY", parseTranslateProp(value, "y", builder)]);
+}
+function parseRotate({
+  value
+}, builder) {
+  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
+}, builder) {
+  builder.addDescriptor("scaleX", [{}, "scaleX", parseScaleValue(value, "x", builder)]);
+  builder.addDescriptor("scaleY", [{}, "scaleY", parseScaleValue(value, "y", builder)]);
+}
+function parseScaleValue(translate, prop, builder) {
+  if (translate === "none") {
+    return 0;
   }
-  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 = declaration.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));
-        add("style", `--${_constants.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 => {
-          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);
-      }
-      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;
-      }
+  return parseLength(translate[prop], builder);
+}
+function parseLetterSpacing({
+  value
+}, builder) {
+  if (value.type === "normal") {
+    return;
   }
+  return parseLength(value.value, builder);
 }
-function buildAddWarning(addWarning, property) {
-  return function (type, value) {
-    if (type === "property") {
-      return addWarning(type, property);
-    } else if (type === "value") {
-      return addWarning(type, property, value);
-    }
-  };
+function parseTextDecoration({
+  value
+}, builder) {
+  builder.addDescriptor("text-decoration-color", parseColor(value.color, builder));
+  builder.addDescriptor("text-decoration-line", parseTextDecorationLine(value.line, builder));
 }
-function parseDeclarationUnparsed(declaration, options, add, addWarning) {
+function parseZIndex({
+  value
+}, builder) {
+  if (value.type === "integer") {
+    return parseLength(value.value, builder);
+  } else {
+    builder.addWarning("value", value.type);
+    return;
+  }
+}
+function parseContainerType(_value, _builder) {
+  return;
+}
+function parseContainerName({
+  value
+}, builder) {
+  builder.addContainer(value.type === "none" ? false : value.value);
+  return;
+}
+function parseContainer({
+  value
+}, builder) {
+  builder.addContainer(value.name.type === "none" ? false : value.name.value);
+  return;
+}
+function parseDeclarationUnparsed(declaration, builder) {
   let property = declaration.value.propertyId.property;
-  if (!isValid(declaration.value.propertyId)) {
-    return addWarning("property", property);
-  }
-  const parseOptions = {
-    ...options,
-    add,
-    addWarning: buildAddWarning(addWarning, property)
-  };
+  if (!(property in parsers)) {
+    builder.addWarning("property", property);
+    return;
+  }
 
   /**
    * 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 (!(0, _styleValue.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", [{}, `@${(0, _selectors.toRNProperty)(property)}`, args]);
+      builder.addDescriptor("animation", [{}, `@${(0, _selectors.toRNProperty)(property)}`, args]);
     } else {
-      return add("style", property, [{}, `@${(0, _selectors.toRNProperty)(property)}`, args, 1]);
+      builder.addDescriptor(property, [{}, `@${(0, _selectors.toRNProperty)(property)}`, args, 1]);
     }
-  }
-  return add("style", property, parseUnparsed(declaration.value.value, parseOptions));
-}
-function parseDeclarationCustom(declaration, options, add, addWarning) {
-  const parseOptions = {
-    ...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;
-  if (validPropertiesLoose.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
-    return add("style", property, parseUnparsed(declaration.value.value, {
-      ...parseOptions,
-      allowAuto: allowAuto.has(property)
-    }));
   } else {
-    return addWarning("property", declaration.value.name);
+    const value = parseUnparsed(declaration.value.value, builder);
+    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 isValid(declaration) {
-  return validPropertiesLoose.has(declaration.property);
+function parseDeclarationCustom(declaration, builder) {
+  const property = declaration.value.name;
+  if (validProperties.has(property) || property.startsWith("--") || property.startsWith("-rn-")) {
+    builder.addDescriptor(property, parseUnparsed(declaration.value.value, builder, allowAuto.has(property)));
+  } else {
+    builder.addWarning("property", declaration.value.name);
+  }
 }
-function reduceParseUnparsed(tokenOrValues, options) {
-  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, options)).filter(v => v !== undefined);
+function reduceParseUnparsed(tokenOrValues, builder) {
+  const result = tokenOrValues.map(tokenOrValue => parseUnparsed(tokenOrValue, builder)).filter(v => v !== undefined);
   if (result.length === 0) {
     return undefined;
-  } else {
-    return result;
   }
+  let currentGroup = [];
+  let groups = [currentGroup];
+  for (const value of result) {
+    if (value === CommaSeparator) {
+      currentGroup = [];
+      groups.push(currentGroup);
+    } else {
+      currentGroup.push(value);
+    }
+  }
+  groups = groups.flatMap(group => {
+    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(token, options) {
-  const args = reduceParseUnparsed(token.value.arguments, options);
-  return [{}, token.value.name, args];
+function unparsedFunction(token, builder) {
+  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(tokenOrValue, options) {
+function parseUnparsed(tokenOrValue, builder, allowAuto = false) {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;
   }
@@ -695,6 +684,8 @@ function parseUnparsed(tokenOrValue, options) {
       return true;
     } else if (tokenOrValue === "false") {
       return false;
+    } else if (tokenOrValue === "currentcolor") {
+      return [{}, "var", "__rn-css-current-color"];
     } else {
       return tokenOrValue;
     }
@@ -703,22 +694,22 @@ function parseUnparsed(tokenOrValue, options) {
     return round(tokenOrValue);
   }
   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 = [tokenOrValue.value.name.ident.slice(2)];
-        const fallback = parseUnparsed(tokenOrValue.value.fallback, options);
+        let args = 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];
       }
@@ -737,72 +728,86 @@ function parseUnparsed(tokenOrValue, options) {
           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":
           case "clamp":
-            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, options);
+            return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, 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 (value === "inherit") {
-                return options.addWarning("value", value);
-              }
-              if (value === "true") {
-                return true;
-              } else if (value === "false") {
-                return false;
-              } else {
-                return value;
-              }
+            if (!allowAuto && value === "auto") {
+              builder.addWarning("value", value);
+              return;
+            }
+            if (value === "inherit") {
+              builder.addWarning("value", value);
+              return;
+            } else if (value === "currentcolor") {
+              return [{}, "var", "__rn-css-current-color"];
+            }
+            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;
         case "at-keyword":
         case "hash":
         case "id-hash":
@@ -812,7 +817,6 @@ function parseUnparsed(tokenOrValue, options) {
         case "comment":
         case "colon":
         case "semicolon":
-        case "comma":
         case "include-match":
         case "dash-match":
         case "prefix-match":
@@ -836,9 +840,9 @@ function parseUnparsed(tokenOrValue, options) {
           }
       }
     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":
@@ -853,10 +857,13 @@ function parseUnparsed(tokenOrValue, options) {
   }
   return;
 }
-function parseLength(length, options) {
+function parseLengthDeclaration(declaration, builder) {
+  return parseLength(declaration.value, builder);
+}
+function parseLength(length, builder) {
   const {
     inlineRem = 14
-  } = options;
+  } = builder.getOptions();
   if (typeof length === "number") {
     return length;
   }
@@ -868,12 +875,12 @@ function parseLength(length, options) {
         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":
@@ -918,7 +925,7 @@ function parseLength(length, options) {
       case "lvmax":
       case "dvmax":
       case "cqmax":
-        options.addWarning("value", `${length.value}${length.unit}`);
+        builder.addWarning("value", `${length.value}${length.unit}`);
         return undefined;
       default:
         {
@@ -943,13 +950,13 @@ function parseLength(length, options) {
       case "dimension":
       case "value":
         {
-          return parseLength(length.value, options);
+          return parseLength(length.value, builder);
         }
     }
   }
   return;
 }
-function parseAngle(angle, options) {
+function parseAngle(angle, builder) {
   if (typeof angle === "number") {
     return `${angle}deg`;
   }
@@ -958,23 +965,47 @@ function parseAngle(angle, options) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      options.addWarning("value", angle.value);
+      builder.addWarning("value", angle.value);
       return undefined;
   }
 }
-function parseSize(size, options, {
+function parseSizeDeclaration(declaration, builder) {
+  return parseSize(declaration.value, builder);
+}
+function parsePointerEvents({
+  value
+}, builder) {
+  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;
+}
+function parseSize(size, builder, options, {
   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":
@@ -983,7 +1014,7 @@ function parseSize(size, options, {
     case "fit-content-function":
     case "stretch":
     case "contain":
-      options.addWarning("value", size.type);
+      builder.addWarning("value", size.type);
       return undefined;
     default:
       {
@@ -992,58 +1023,174 @@ function parseSize(size, options, {
   }
   return;
 }
-function parseColorOrAuto(color, options) {
-  if (color.type === "auto") {
-    options.addWarning("value", `Invalid color value ${color.type}`);
+function parseColorOrAuto({
+  value
+}, builder) {
+  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, options) {
-  if (typeof color === "string") {
-    // TODO: Could web system colors be mapped to native?
+function parseFontColorDeclaration(declaration, builder) {
+  parseColorDeclaration(declaration, builder);
+  builder.addDescriptor("--__rn-css-color", parseColor(declaration.value, builder));
+}
+function parseColorDeclaration(declaration, builder) {
+  builder.addDescriptor(declaration.property, parseColor(declaration.value, builder));
+}
+function parseColor(cssColor, builder) {
+  if (typeof cssColor === "string") {
+    if (namedColors.has(cssColor)) {
+      return cssColor;
+    }
     return;
   }
-  switch (color.type) {
+  let color;
+  const {
+    hexColors = true,
+    colorPrecision
+  } = builder.getOptions();
+  switch (cssColor.type) {
+    case "currentcolor":
+      return [{}, "var", "__rn-css-current-color"];
+    case "light-dark":
+      {
+        const extraRule = {
+          s: [],
+          m: [["=", "prefers-color-scheme", "dark"]]
+        };
+        builder.addUnnamedDescriptor(parseColor(cssColor.dark, builder), false, extraRule);
+        builder.addExtraRule(extraRule);
+        return parseColor(cssColor.light, builder);
+      }
     case "rgb":
       {
-        // Hex is smaller than rgb, so we convert it
-        const hexValues = [color.r.toString(16).padStart(2, "0"), color.g.toString(16).padStart(2, "0"), color.b.toString(16).padStart(2, "0")];
-        if (color.alpha !== 1) {
-          hexValues.push(Math.round(color.alpha * 255).toString(16).padStart(2, "0"));
-        }
-        return `#${hexValues.join("")}`;
+        color = new _colorjs.default({
+          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 _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.h, cssColor.s, cssColor.l],
+        alpha: cssColor.alpha
+      });
+      break;
+    case "hwb":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.h, cssColor.w, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "lab":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.a, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "lch":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.c, cssColor.h],
+        alpha: cssColor.alpha
+      });
+      break;
     case "oklab":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.a, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "oklch":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.l, cssColor.c, cssColor.h],
+        alpha: cssColor.alpha
+      });
+      break;
     case "srgb":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "srgb-linear":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "display-p3":
+      color = new _colorjs.default({
+        space: "p3",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "a98-rgb":
+      color = new _colorjs.default({
+        space: "a98rgb",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "prophoto-rgb":
+      color = new _colorjs.default({
+        space: "prophoto",
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "rec2020":
+      color = new _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.r, cssColor.g, cssColor.b],
+        alpha: cssColor.alpha
+      });
+      break;
     case "xyz-d50":
+      color = new _colorjs.default({
+        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 _colorjs.default({
+        space: cssColor.type,
+        coords: [cssColor.x, cssColor.y, cssColor.z],
+        alpha: cssColor.alpha
+      });
+      break;
     default:
       {
-        color;
+        cssColor;
       }
   }
-  return;
+  if (!hexColors || colorPrecision) {
+    return color?.toString({
+      precision: colorPrecision ?? 3
+    });
+  } else {
+    return color?.toString({
+      format: "hex"
+    });
+  }
+}
+function parseLengthPercentageOrAutoDeclaration(value, builder) {
+  return parseLengthPercentageOrAuto(value.value, builder);
 }
-function parseLengthPercentageOrAuto(lengthPercentageOrAuto, options, {
+function parseLengthPercentageOrAuto(lengthPercentageOrAuto, builder, {
   allowAuto = false
 } = {}) {
   switch (lengthPercentageOrAuto.type) {
@@ -1051,11 +1198,11 @@ function parseLengthPercentageOrAuto(lengthPercentageOrAuto, options, {
       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;
@@ -1063,109 +1210,112 @@ function parseLengthPercentageOrAuto(lengthPercentageOrAuto, options, {
   }
   return;
 }
-function parseJustifyContent(justifyContent, options) {
+function parseJustifyContent(declaration, builder) {
   const allowed = new Set(["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"]);
   let value;
-  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;
+        declaration.value;
       }
   }
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
   return value;
 }
-function parseAlignContent(alignContent, options) {
+function parseAlignContent(declaration, builder) {
   const allowed = new Set(["flex-start", "flex-end", "center", "stretch", "space-between", "space-around"]);
   let value;
-  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;
+        declaration.value;
       }
   }
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
   return value;
 }
-function parseAlignItems(alignItems, options) {
+function parseAlignItems(alignItems, builder) {
   const allowed = new Set(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]);
   let value;
-  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;
+        alignItems.value;
       }
   }
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
   return value;
 }
-function parseAlignSelf(alignSelf, options) {
+function parseAlignSelf(alignSelf, builder) {
   const allowed = new Set(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]);
   let value;
-  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;
+        alignSelf.value;
       }
   }
   if (value && !allowed.has(value)) {
-    options.addWarning("value", value);
+    builder.addWarning("value", value);
     return;
   }
   return value;
 }
-function parseFontWeight(fontWeight, options) {
+function parseFontWeightDeclaration(declaration, builder) {
+  return parseFontWeight(declaration.value, builder);
+}
+function parseFontWeight(fontWeight, builder) {
   switch (fontWeight.type) {
     case "absolute":
       if (fontWeight.value.type === "weight") {
@@ -1175,7 +1325,7 @@ function parseFontWeight(fontWeight, options) {
       }
     case "bolder":
     case "lighter":
-      options.addWarning("value", fontWeight.type);
+      builder.addWarning("value", fontWeight.type);
       return;
     default:
       {
@@ -1184,32 +1334,36 @@ function parseFontWeight(fontWeight, options) {
   }
   return;
 }
-function parseTextShadow(add, [textShadow], options) {
+function parseTextShadow(declaration, builder) {
+  const [textShadow] = declaration.value;
   if (!textShadow) {
     return;
   }
-  add("style", "textShadowColor", parseColor(textShadow.color, options));
-  add("style", "textShadowOffset.width", parseLength(textShadow.xOffset, options));
-  add("style", "textShadowOffset.height", parseLength(textShadow.yOffset, options));
-  add("style", "textShadowRadius", parseLength(textShadow.blur, options));
+  builder.addDescriptor("textShadowColor", parseColor(textShadow.color, builder));
+  builder.addDescriptor("textShadowOffset.width", parseLength(textShadow.xOffset, builder));
+  builder.addDescriptor("textShadowOffset.height", parseLength(textShadow.yOffset, builder));
+  builder.addDescriptor("textShadowRadius", parseLength(textShadow.blur, builder));
 }
-function parseTextDecorationStyle(textDecorationStyle, options) {
+function parseTextDecorationStyle(declaration, builder) {
   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 parseTextDecorationLineDeclaration(declaration, builder) {
+  return parseTextDecorationLine(declaration.value, builder);
 }
-function parseTextDecorationLine(textDecorationLine, options) {
-  if (!Array.isArray(textDecorationLine)) {
-    if (textDecorationLine === "none") {
-      return textDecorationLine;
+function parseTextDecorationLine(value, builder) {
+  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")) {
       return "underline line-through";
@@ -1219,70 +1373,105 @@ function parseTextDecorationLine(textDecorationLine, options) {
   } else if (set.has("line-through")) {
     return "line-through";
   }
-  options.addWarning("value", textDecorationLine.join(" "));
+  builder.addWarning("value", value.join(" "));
   return undefined;
 }
-function parseOverflow(overflow, options) {
+function parsePosition({
+  value
+}, builder) {
+  if (value.type === "absolute" || value.type === "relative") {
+    return value.type;
+  }
+  builder.addWarning("value", value.type);
+  return;
+}
+function parseOverflow({
+  value
+}, builder) {
   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, options) {
+function parseBorderStyleDeclaration(declaration, builder) {
+  return parseBorderStyle(declaration.value, builder);
+}
+function parseBorderStyle(value, builder) {
   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)) {
-    return borderStyle.top;
+  } else if (value.top === value.bottom && value.top === value.left && value.top === value.right && allowed.has(value.top)) {
+    return value.top;
   }
-  options.addWarning("value", borderStyle.top);
+  builder.addWarning("value", value.top);
   return undefined;
 }
-function parseBorderSideWidth(borderSideWidth, options) {
-  if (borderSideWidth.type === "length") {
-    return parseLength(borderSideWidth.value, options);
+function parseBorderBlockColor({
+  value
+}, builder) {
+  builder.addDescriptor("border-top-color", parseColor(value.start, builder));
+  builder.addDescriptor("border-bottom-color", parseColor(value.end, builder));
+  return;
+}
+function parseBorderBlockWidth(declaration, builder) {
+  builder.addDescriptor("border-top-width", parseBorderSideWidth(declaration.value.start, builder));
+  builder.addDescriptor("border-bottom-width", parseBorderSideWidth(declaration.value.end, builder));
+}
+function parseBorderSideWidthDeclaration(declaration, builder) {
+  return parseBorderSideWidth(declaration.value, builder);
+}
+function parseBorderSideWidth(value, builder) {
+  if (value.type === "length") {
+    return parseLength(value.value, builder);
   }
-  options.addWarning("value", borderSideWidth.type);
+  builder.addWarning("value", value.type);
   return undefined;
 }
-function parseVerticalAlign(verticalAlign, options) {
-  if (verticalAlign.type === "length") {
+function parseVerticalAlign({
+  value
+}, builder) {
+  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) {
+function parseFontFamily({
+  value
+}) {
   // React Native only allows one font family - better hope this is the right one :)
-  return fontFamily[0];
+  return value[0];
 }
-function parseLineHeight(lineHeight, options) {
-  switch (lineHeight.type) {
+function parseLineHeightDeclaration(declaration, builder) {
+  return parseLineHeight(declaration.value, builder);
+}
+function parseLineHeight(value, builder) {
+  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;
@@ -1292,218 +1481,173 @@ function parseLineHeight(lineHeight, options) {
       }
     default:
       {
-        lineHeight;
+        value;
       }
   }
   return;
 }
-function parseFontSize(fontSize, options) {
-  switch (fontSize.type) {
+function parseFontSizeDeclaration(declaration, builder) {
+  const fontSize = parseFontSize(declaration.value, builder);
+  builder.addDescriptor("fontSize", fontSize);
+  builder.addDescriptor("--__rn-css-em", fontSize);
+}
+function parseFontSize(value, builder) {
+  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;
+        value;
       }
   }
   return;
 }
-function parseFontStyle(fontStyle, options) {
-  switch (fontStyle.type) {
+function parseFontStyleDeclaration(declaration, builder) {
+  return parseFontStyle(declaration.value, builder);
+}
+function parseFontStyle(value, builder) {
+  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;
+        value;
       }
   }
   return;
 }
-function parseFontVariantCaps(fontVariantCaps, options) {
+function parseFontVariantCapsDeclaration(declaration, builder) {
+  return parseFontVariantCaps(declaration.value, builder);
+}
+function parseFontVariantCaps(value, builder) {
   const allowed = new Set(["small-caps", "oldstyle-nums", "lining-nums", "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(value, options) {
-  return parseLength(value, options);
+function parseLengthOrCoercePercentageToRuntime(value, builder) {
+  return parseLength(value, builder);
 }
-function parseGap(value, options) {
-  if (value.type === "normal") {
-    options.addWarning("value", value.type);
+function parseGap(declaration, builder) {
+  if ("column" in declaration.value) {
+    builder.addDescriptor("row-gap", parseGap(declaration, builder));
+    builder.addDescriptor("column-gap", parseGap(declaration, builder));
     return;
-  }
-  return parseLength(value.value, options);
-}
-function parseRNRuntimeSpecificsFunction(name, args, options) {
-  let key;
-  const runtimeArgs = {};
-  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;
-        }
-      }
+  } else {
+    if (declaration.value.type === "normal") {
+      builder.addWarning("value", declaration.value.type);
+      return;
     }
+    return parseLength(declaration.value.value, builder);
   }
-  return [{}, name, Object.entries(runtimeArgs)];
 }
-function parseTextAlign(textAlign, options) {
+function parseTextAlign({
+  value
+}, builder) {
   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, options) {
-  if (boxShadows.length > 1) {
-    options.addWarning("value", "multiple box shadows");
-    return;
-  }
-  const boxShadow = boxShadows[0];
-  if (!boxShadow) {
-    return;
+function parseBoxShadow({
+  value
+}, builder) {
+  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, options) {
-  if (display.type === "keyword") {
-    if (display.value === "none") {
-      return display.value;
+}
+function parseDisplay({
+  value
+}, builder) {
+  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) {
-  if (aspectRatio.auto) {
+function parseAspectRatio({
+  value
+}) {
+  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({
   unit,
   value
-}, options) {
+}, builder) {
   switch (unit) {
     case "px":
       return value;
@@ -1514,40 +1658,46 @@ function parseDimension({
       return [{}, unit, [value / 100], 1];
     default:
       {
-        return options.addWarning("value", `${value}${unit}`);
+        builder.addWarning("value", `${value}${unit}`);
+        return;
       }
   }
 }
-function parseUserSelect(value, options) {
+function parseUserSelect({
+  value
+}, builder) {
   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, options) {
+function parseSVGPaint({
+  value
+}, builder) {
   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) {
   return Math.round((number + Number.EPSILON) * 100) / 100;
 }
-function parseDimensionPercentageFor_LengthValue(value, options) {
+function parseDimensionPercentageFor_LengthValue(value, builder) {
   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(value, options) {
+function parseEnv(value, builder) {
   switch (value.name.type) {
     case "ua":
       switch (value.name.value) {
@@ -1555,7 +1705,7 @@ function parseEnv(value, options) {
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
         case "safe-area-inset-left":
-          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, options)], 1];
+          return [{}, "var", [`--react-native-css-${value.name.value}`, parseUnparsed(value.fallback, builder)], 1];
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
@@ -1569,28 +1719,28 @@ function parseEnv(value, options) {
   }
   return;
 }
-function parseCalcFn(name, tokens, options) {
-  const args = parseCalcArguments(tokens, options);
+function parseCalcFn(name, tokens, builder) {
+  const args = parseCalcArguments(tokens, builder);
   if (args) {
     return [{}, name, args];
   }
   return;
 }
-function parseCalcArguments([...args], options) {
+function parseCalcArguments([...args], builder) {
   const parsed = [];
   let mode;
   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;
           }
@@ -1599,7 +1749,7 @@ function parseCalcArguments([...args], options) {
         }
       case "length":
         {
-          const value = parseLength(arg.value, options);
+          const value = parseLength(arg.value, builder);
           if (value !== undefined) {
             parsed.push(value);
           }
@@ -1625,13 +1775,13 @@ function parseCalcArguments([...args], options) {
             }
             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;
@@ -1644,6 +1794,7 @@ function parseCalcArguments([...args], options) {
                */
               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" && value.value.type === "close-parenthesis") {
                   closeParenthesisIndex = index;
@@ -1658,7 +1809,7 @@ function parseCalcArguments([...args], options) {
               .splice(currentIndex, closeParenthesisIndex - currentIndex + 1)
               // Then drop the surrounding parenthesis
               .slice(1, -1);
-              parsed.push(parseCalcFn("calc", innerCalcArgs, options));
+              parsed.push(parseCalcFn("calc", innerCalcArgs, builder));
               break;
             }
           case "close-parenthesis":
@@ -1693,26 +1844,27 @@ function parseCalcArguments([...args], options) {
   }
   return parsed;
 }
-function parseTranslate(translate, prop, options) {
-  if (translate === "none") {
+function parseTranslateProp(value, prop, builder) {
+  if (value === "none") {
     return 0;
   }
-  return parseLength(translate[prop], options);
+  return parseLength(value[prop], builder);
 }
-function parseScale(translate, prop, options) {
-  if (translate === "none") {
-    return 0;
-  }
-  return parseLength(translate[prop], options);
-}
-function parseUnresolvedColor(color, options) {
+function parseUnresolvedColor(color, builder) {
   switch (color.type) {
     case "rgb":
-      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, options)]];
+      return [{}, "rgba", [round(color.r * 255), round(color.g * 255), round(color.b * 255), parseUnparsed(color.alpha, builder)]];
     case "hsl":
-      return [{}, color.type, [color.h, color.s, color.l, parseUnparsed(color.alpha, options)]];
+      return [{}, color.type, [color.h, color.s, color.l, parseUnparsed(color.alpha, builder)]];
     case "light-dark":
-      return undefined;
+      {
+        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;
   }
@@ -1746,36 +1898,48 @@ function equal(a, b) {
 function parseTime(time) {
   return time.type === "milliseconds" ? time.value : time.value * 1000;
 }
-function addTransitionValue(declaration, options) {
+function parseSize2DDimensionPercentageDeclaration(declaration, builder) {
+  return parseSize2DDimensionPercentage(declaration.value, builder);
+}
+function parseSize2DDimensionPercentage(value, builder) {
+  return parseLength(value[0], builder);
+}
+function addTransitionValue(declaration, builder) {
   switch (declaration.property) {
     case "transition":
-      const grouped = {};
-      for (const animation of declaration.value) {
-        for (const [key, value] of Object.entries(animation)) {
-          grouped[key] ??= [];
-          grouped[key].push(value);
+      {
+        const grouped = {};
+        for (const animation of declaration.value) {
+          for (const [key, value] of Object.entries(animation)) {
+            grouped[key] ??= [];
+            grouped[key].push(value);
+          }
         }
+        for (const [property, value] of Object.entries(grouped)) {
+          addTransitionValue({
+            property: `transition-${kebabCase(property)}`,
+            value
+          }, builder);
+        }
+        break;
       }
-      for (const [property, value] of Object.entries(grouped)) {
-        addTransitionValue({
-          property: `transition-${kebabCase(property)}`,
-          value
-        }, options);
-      }
-      break;
     case "transition-property":
       {
-        return options.add("transition", declaration.property, declaration.value.map(v => v.property));
+        builder.addDescriptor(declaration.property, declaration.value.map(v => v.property).filter(v => v in parsers || v === "all" || v === "none").map(v => (0, _selectors.toRNProperty)(v)));
+        return;
       }
     case "transition-duration":
-      return options.add("transition", declaration.property, declaration.value.map(t => parseTime(t)));
+      builder.addDescriptor(declaration.property, declaration.value.map(t => parseTime(t)));
+      return;
     case "transition-delay":
-      return options.add("transition", declaration.property, declaration.value.map(t => parseTime(t)));
+      builder.addDescriptor(declaration.property, declaration.value.map(t => parseTime(t)));
+      return;
     case "transition-timing-function":
-      return options.add("transition", declaration.property, (0, _keyframes.parseEasingFunction)(declaration.value));
+      builder.addDescriptor(declaration.property, (0, _keyframes.parseEasingFunction)(declaration.value));
+      return;
   }
 }
-function addAnimationValue(declaration, options) {
+function addAnimationValue(declaration, builder) {
   switch (declaration.property) {
     case "animation":
       {
@@ -1790,48 +1954,48 @@ function addAnimationValue(declaration, options) {
           addAnimationValue({
             property: `animation-${kebabCase(property)}`,
             value
-          }, options);
+          }, builder);
         }
         break;
       }
     case "animation-delay":
       {
-        options.add("animation", declaration.property, declaration.value.map(t => parseTime(t)));
+        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", declaration.property, declaration.value.map(t => parseTime(t)));
+        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", declaration.property, (0, _keyframes.parseIterationCount)(declaration.value));
+        builder.addDescriptor(declaration.property, (0, _keyframes.parseIterationCount)(declaration.value));
         break;
       }
     case "animation-name":
       {
-        options.add("animation", declaration.property, declaration.value.map(v => v.type === "none" ? "none" : [{}, "animationName", [v.value], 1]));
+        builder.addDescriptor(declaration.property, declaration.value.map(v => v.type === "none" ? "none" : [{}, "animationName", [v.value], 1]));
         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", declaration.property, (0, _keyframes.parseEasingFunction)(declaration.value));
+        builder.addDescriptor(declaration.property, (0, _keyframes.parseEasingFunction)(declaration.value));
         break;
       }
   }
@@ -1839,5 +2003,86 @@ function addAnimationValue(declaration, options) {
 function kebabCase(str) {
   return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase());
 }
-const runtimeShorthands = new Set(["animation", "text-shadow", "transform"]);
+function parseBackgroundImage(declaration, builder) {
+  builder.addDescriptor("experimental_backgroundImage", declaration.value.flatMap(image => {
+    switch (image.type) {
+      case "gradient":
+        {
+          const gradient = parseGradient(image.value, builder);
+          return gradient ? [gradient] : [];
+        }
+      case "none":
+        return ["none"];
+    }
+    return [];
+  }));
+  return;
+}
+function parseGradient(gradient, builder) {
+  switch (gradient.type) {
+    case "linear":
+      {
+        return [{}, "@linear-gradient", [parseLineDirection(gradient.direction, builder), ...gradient.items.map(item => parseGradientItem(item, builder))]];
+      }
+  }
+  return;
+}
+function parseLineDirection(lineDirection, builder) {
+  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;
+      }
+  }
+  return;
+}
+function parseGradientItem(item, builder) {
+  switch (item.type) {
+    case "color-stop":
+      {
+        const args = [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, builder) {
+  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)
+        };
+      case "hue-rotate":
+        return {
+          [value.type]: parseAngle(value.value, builder)
+        };
+      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"]);
 //# sourceMappingURL=declarations.js.map