@cssxjs/css-to-react-native 3.2.0-0 → 3.2.0-2

package/index.js

@@ -1,112 +1,85 @@
 'use strict';
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose([", "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
+var _templateObject;
+function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-
 function _interopDefault(ex) {
   return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex;
 }
-
 var parse = require('postcss-value-parser');
-
 var parse__default = _interopDefault(parse);
-
 var camelizeStyleName = _interopDefault(require('camelize'));
-
 var cssColorKeywords = _interopDefault(require('css-color-keywords'));
-
 var matchString = function matchString(node) {
   if (node.type !== 'string') return null;
   return node.value.replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, function (match, charCode) {
     return String.fromCharCode(parseInt(charCode, 16));
   }).replace(/\\/g, '');
 };
-
 var hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i;
 var cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/;
-
 var matchColor = function matchColor(node) {
   if (node.type === 'word' && (hexColorRe.test(node.value) || node.value in cssColorKeywords || node.value === 'transparent')) {
     return node.value;
   } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
     return parse.stringify(node);
   }
-
   return null;
 };
-
 var matchVariable = function matchVariable(node) {
-  if (node.type !== 'function' && node.value !== 'var' || node.nodes.length === 0) return null;
+  if (node.type !== 'function' || node.value !== 'var' || node.nodes.length === 0) return null;
   var variableName = node.nodes[0].value;
-
   if (node.nodes.length === 1) {
     return "var(" + variableName + ")";
   }
-
   var defaultValues = node.nodes.slice(1).filter(function (subnode) {
     return subnode.type !== 'div';
   }).map(function (subnode) {
     if (subnode.type === 'string') {
       return "'" + matchString(subnode) + "'";
     }
-
     if (subnode.type === 'function' && ['rgb', 'rgba', 'hls', 'hlsa'].includes(subnode.value)) {
       return subnode.value + "(" + subnode.nodes.map(function (n) {
         return n.value;
       }).join('') + ")";
     }
-
     return subnode.value;
   });
-
   if (defaultValues.length !== (node.nodes.length - 1) / 2) {
     return null;
   }
-
-  return "var(" + variableName + ", " + defaultValues.join(_templateObject()) + ")";
+  return "var(" + variableName + ", " + defaultValues.join(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([", "]))) + ")";
 };
-
 var noneRe = /^(none)$/i;
 var autoRe = /^(auto)$/i;
-var identRe = /(^-?[_a-z][_a-z0-9-]*$)/i; // Note if these are wrong, you'll need to change index.js too
-
-var numberRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)$/i; // Note lengthRe is sneaky: you can omit units for 0
-
+var identRe = /(^-?[_a-z][_a-z0-9-]*$)/i;
+// Note if these are wrong, you'll need to change index.js too
+var numberRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)$/i;
+// Note lengthRe is sneaky: you can omit units for 0
 var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?=px$))/i;
 var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/i;
 var angleRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:deg|rad|grad|turn))$/i;
 var percentRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?%)$/i;
-
+var timeRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:ms|s))$/i;
 var noopToken = function noopToken(predicate) {
   return function (node) {
     return predicate(node) ? '<token>' : null;
   };
 };
-
 var valueForTypeToken = function valueForTypeToken(type) {
   return function (node) {
     return node.type === type ? node.value : null;
   };
 };
-
 var regExpToken = function regExpToken(regExp, transform) {
   if (transform === void 0) {
     transform = String;
   }
-
   return function (node) {
     if (node.type !== 'word') return null;
     var match = node.value.match(regExp);
@@ -115,7 +88,6 @@ var regExpToken = function regExpToken(regExp, transform) {
     return value;
   };
 };
-
 var SPACE = noopToken(function (node) {
   return node.type === 'space';
 });
@@ -135,35 +107,360 @@ var ANGLE = regExpToken(angleRe, function (angle) {
   return angle.toLowerCase();
 });
 var PERCENT = regExpToken(percentRe);
+var TIME = regExpToken(timeRe);
 var IDENT = regExpToken(identRe);
 var STRING = matchString;
 var COLOR = matchColor;
 var LINE = regExpToken(/^(none|underline|line-through)$/i);
 var VARIABLE = matchVariable;
 
+// Timing function keywords
+var timingFunctionKeywords = ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end'];
+
+// Direction keywords
+var directionKeywords = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
+
+// Fill mode keywords
+var fillModeKeywords = ['none', 'forwards', 'backwards', 'both'];
+
+// Play state keywords
+var playStateKeywords = ['running', 'paused'];
+var isTimingFunction = function isTimingFunction(value) {
+  return timingFunctionKeywords.includes(value.toLowerCase());
+};
+var isDirection = function isDirection(value) {
+  return directionKeywords.includes(value.toLowerCase());
+};
+var isFillMode = function isFillMode(value) {
+  return fillModeKeywords.includes(value.toLowerCase());
+};
+var isPlayState = function isPlayState(value) {
+  return playStateKeywords.includes(value.toLowerCase());
+};
+var isTime = function isTime(value) {
+  return /^[+-]?(?:\d*\.)?\d+(?:ms|s)$/i.test(value);
+};
+var isIterationCount = function isIterationCount(value) {
+  return value.toLowerCase() === 'infinite' || /^[+-]?(?:\d*\.)?\d+$/.test(value);
+};
+
+// Helper to parse comma-separated values
+// Returns single value if only one, array if multiple
+var parseCommaSeparatedValues = function parseCommaSeparatedValues(tokenStream, parseValue) {
+  var values = [];
+  var parsingFirst = true;
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA);
+    }
+
+    // Skip leading/trailing spaces
+    if (tokenStream.matches(SPACE)) ;
+    var value = parseValue(tokenStream);
+    values.push(value);
+
+    // Skip trailing spaces
+    if (tokenStream.matches(SPACE)) ;
+    parsingFirst = false;
+  }
+  return values.length === 1 ? values[0] : values;
+};
+
+// Transform for animation-name property
+var animationName = function animationName(tokenStream) {
+  var names = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(IDENT, NONE, VARIABLE);
+  });
+  return {
+    animationName: names
+  };
+};
+
+// Transform for animation-duration property
+var animationDuration = function animationDuration(tokenStream) {
+  var durations = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(TIME, VARIABLE);
+  });
+  return {
+    animationDuration: durations
+  };
+};
+
+// Transform for animation-timing-function property
+var animationTimingFunction = function animationTimingFunction(tokenStream) {
+  var timingFunctions = parseCommaSeparatedValues(tokenStream, function (ts) {
+    // Check for function (cubic-bezier or steps)
+    var funcStream = ts.matchesFunction();
+    if (funcStream) {
+      var funcName = funcStream.functionName;
+      var args = [];
+      while (funcStream.hasTokens()) {
+        if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+          continue;
+        }
+        var val = funcStream.expect(IDENT, TIME, NUMBER, function (node) {
+          if (node.type === 'word') return node.value;
+          return null;
+        });
+        args.push(val);
+      }
+      return funcName + "(" + args.join(', ') + ")";
+    }
+    return ts.expect(IDENT);
+  });
+  return {
+    animationTimingFunction: timingFunctions
+  };
+};
+
+// Transform for animation-delay property
+var animationDelay = function animationDelay(tokenStream) {
+  var delays = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(TIME, VARIABLE);
+  });
+  return {
+    animationDelay: delays
+  };
+};
+
+// Transform for animation-iteration-count property
+var animationIterationCount = function animationIterationCount(tokenStream) {
+  var counts = parseCommaSeparatedValues(tokenStream, function (ts) {
+    if (ts.matches(IDENT)) {
+      var value = ts.lastValue;
+      return value.toLowerCase() === 'infinite' ? 'infinite' : Number(value);
+    }
+    if (ts.matches(NUMBER)) {
+      return ts.lastValue;
+    }
+    var word = ts.expect(function (node) {
+      if (node.type === 'word') return node.value;
+      return null;
+    });
+    return word.toLowerCase() === 'infinite' ? 'infinite' : Number(word);
+  });
+  return {
+    animationIterationCount: counts
+  };
+};
+
+// Transform for animation-direction property
+var animationDirection = function animationDirection(tokenStream) {
+  var directions = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(IDENT);
+  });
+  return {
+    animationDirection: directions
+  };
+};
+
+// Transform for animation-fill-mode property
+var animationFillMode = function animationFillMode(tokenStream) {
+  var fillModes = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(IDENT);
+  });
+  return {
+    animationFillMode: fillModes
+  };
+};
+
+// Transform for animation-play-state property
+var animationPlayState = function animationPlayState(tokenStream) {
+  var playStates = parseCommaSeparatedValues(tokenStream, function (ts) {
+    return ts.expect(IDENT);
+  });
+  return {
+    animationPlayState: playStates
+  };
+};
+var animation = function animation(tokenStream) {
+  // Handle 'none'
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty();
+    return {
+      animationName: 'none',
+      animationDuration: '0s',
+      animationTimingFunction: 'ease',
+      animationDelay: '0s',
+      animationIterationCount: 1,
+      animationDirection: 'normal',
+      animationFillMode: 'none',
+      animationPlayState: 'running'
+    };
+  }
+  var names = [];
+  var durations = [];
+  var timingFunctions = [];
+  var delays = [];
+  var iterationCounts = [];
+  var directions = [];
+  var fillModes = [];
+  var playStates = [];
+  var parsingFirst = true;
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA);
+    }
+
+    // Parse single animation
+    var name = null;
+    var duration = null;
+    var timingFunction = null;
+    var delay = null;
+    var iterationCount = null;
+    var direction = null;
+    var fillMode = null;
+    var playState = null;
+
+    // Skip leading space
+    if (tokenStream.matches(SPACE)) ;
+
+    // Parse tokens for this animation
+    while (tokenStream.hasTokens()) {
+      // Check for comma (next animation)
+      tokenStream.saveRewindPoint();
+      if (tokenStream.matches(SPACE)) {
+        if (tokenStream.matches(COMMA)) {
+          tokenStream.rewind();
+          break;
+        }
+      }
+      if (tokenStream.matches(COMMA)) {
+        tokenStream.rewind();
+        break;
+      }
+      tokenStream.rewind();
+
+      // Skip spaces
+      if (tokenStream.matches(SPACE)) {
+        continue;
+      }
+
+      // Match time or variable (for duration/delay) - check before functions
+      if (tokenStream.matches(TIME) || tokenStream.matches(VARIABLE)) {
+        var value = tokenStream.lastValue;
+        if (duration === null) {
+          duration = value;
+        } else {
+          delay = value;
+        }
+        continue;
+      }
+
+      // Check for timing function (cubic-bezier or steps)
+      var funcStream = tokenStream.matchesFunction();
+      if (funcStream) {
+        var funcName = funcStream.functionName;
+        var args = [];
+        while (funcStream.hasTokens()) {
+          if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+            continue;
+          }
+          var val = funcStream.expect(IDENT, TIME, NUMBER, function (node) {
+            if (node.type === 'word') return node.value;
+            return null;
+          });
+          args.push(val);
+        }
+        timingFunction = funcName + "(" + args.join(', ') + ")";
+        continue;
+      }
+
+      // Match number (iteration count)
+      if (tokenStream.matches(NUMBER)) {
+        iterationCount = tokenStream.lastValue;
+        continue;
+      }
+
+      // Match identifier
+      if (tokenStream.matches(IDENT)) {
+        var _value = tokenStream.lastValue;
+        if (isTimingFunction(_value)) {
+          timingFunction = _value;
+        } else if (isDirection(_value)) {
+          direction = _value;
+        } else if (isFillMode(_value)) {
+          fillMode = _value;
+        } else if (isPlayState(_value)) {
+          playState = _value;
+        } else if (_value.toLowerCase() === 'infinite') {
+          iterationCount = 'infinite';
+        } else {
+          // It's the animation name
+          name = _value;
+        }
+        continue;
+      }
+
+      // Try to match as generic word
+      var wordMatch = tokenStream.expect(function (node) {
+        if (node.type === 'word') return node.value;
+        return null;
+      });
+      if (isTime(wordMatch)) {
+        if (duration === null) {
+          duration = wordMatch;
+        } else {
+          delay = wordMatch;
+        }
+      } else if (isTimingFunction(wordMatch)) {
+        timingFunction = wordMatch;
+      } else if (isDirection(wordMatch)) {
+        direction = wordMatch;
+      } else if (isFillMode(wordMatch)) {
+        fillMode = wordMatch;
+      } else if (isPlayState(wordMatch)) {
+        playState = wordMatch;
+      } else if (isIterationCount(wordMatch)) {
+        iterationCount = wordMatch.toLowerCase() === 'infinite' ? 'infinite' : Number(wordMatch);
+      } else {
+        name = wordMatch;
+      }
+    }
+
+    // Apply defaults and push
+    names.push(name || 'none');
+    durations.push(duration || '0s');
+    timingFunctions.push(timingFunction || 'ease');
+    delays.push(delay || '0s');
+    iterationCounts.push(iterationCount !== null ? iterationCount : 1);
+    directions.push(direction || 'normal');
+    fillModes.push(fillMode || 'none');
+    playStates.push(playState || 'running');
+    parsingFirst = false;
+  }
+
+  // Return single values if only one animation, arrays if multiple
+  var isSingle = names.length === 1;
+  return {
+    animationName: isSingle ? names[0] : names,
+    animationDuration: isSingle ? durations[0] : durations,
+    animationTimingFunction: isSingle ? timingFunctions[0] : timingFunctions,
+    animationDelay: isSingle ? delays[0] : delays,
+    animationIterationCount: isSingle ? iterationCounts[0] : iterationCounts,
+    animationDirection: isSingle ? directions[0] : directions,
+    animationFillMode: isSingle ? fillModes[0] : fillModes,
+    animationPlayState: isSingle ? playStates[0] : playStates
+  };
+};
 var aspectRatio = function aspectRatio(tokenStream) {
   var aspectRatio = tokenStream.expect(NUMBER);
-
   if (tokenStream.hasTokens()) {
     tokenStream.expect(SLASH);
     aspectRatio /= tokenStream.expect(NUMBER);
   }
-
   return {
     aspectRatio: aspectRatio
   };
 };
-
 var BORDER_STYLE = regExpToken(/^(solid|dashed|dotted)$/);
 var defaultBorderWidth = 1;
 var defaultBorderColor = 'black';
 var defaultBorderStyle = 'solid';
-
 var border = function border(tokenStream) {
   var borderWidth;
   var borderColor;
   var borderStyle;
-
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty();
     return {
@@ -172,12 +469,9 @@ var border = function border(tokenStream) {
       borderStyle: 'solid'
     };
   }
-
   var partsParsed = 0;
-
   while (partsParsed < 3 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE);
-
     if (borderWidth === undefined && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
       borderWidth = tokenStream.lastValue;
     } else if (borderColor === undefined && (tokenStream.matches(COLOR) || tokenStream.matches(VARIABLE))) {
@@ -187,10 +481,8 @@ var border = function border(tokenStream) {
     } else {
       tokenStream["throw"]();
     }
-
     partsParsed += 1;
   }
-
   tokenStream.expectEmpty();
   if (borderWidth === undefined) borderWidth = defaultBorderWidth;
   if (borderColor === undefined) borderColor = defaultBorderColor;
@@ -201,132 +493,21 @@ var border = function border(tokenStream) {
     borderStyle: borderStyle
   };
 };
-
-var directionFactory = function directionFactory(_ref) {
-  var _ref$types = _ref.types,
-      types = _ref$types === void 0 ? [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT] : _ref$types,
-      _ref$directions = _ref.directions,
-      directions = _ref$directions === void 0 ? ['Top', 'Right', 'Bottom', 'Left'] : _ref$directions,
-      _ref$prefix = _ref.prefix,
-      prefix = _ref$prefix === void 0 ? '' : _ref$prefix,
-      _ref$suffix = _ref.suffix,
-      suffix = _ref$suffix === void 0 ? '' : _ref$suffix;
-  return function (tokenStream) {
-    var _ref2;
-
-    var values = []; // borderWidth doesn't currently allow a percent value, but may do in the future
-
-    values.push(tokenStream.expect.apply(tokenStream, types));
-
-    while (values.length < 4 && tokenStream.hasTokens()) {
-      tokenStream.expect(SPACE);
-      values.push(tokenStream.expect.apply(tokenStream, types));
-    }
-
-    tokenStream.expectEmpty();
-    var top = values[0],
-        _values$ = values[1],
-        right = _values$ === void 0 ? top : _values$,
-        _values$2 = values[2],
-        bottom = _values$2 === void 0 ? top : _values$2,
-        _values$3 = values[3],
-        left = _values$3 === void 0 ? right : _values$3;
-
-    var keyFor = function keyFor(n) {
-      return "" + prefix + directions[n] + suffix;
-    };
-
-    return _ref2 = {}, _ref2[keyFor(0)] = top, _ref2[keyFor(1)] = right, _ref2[keyFor(2)] = bottom, _ref2[keyFor(3)] = left, _ref2;
-  };
-};
-
-var parseShadowOffset = function parseShadowOffset(tokenStream) {
-  var width = tokenStream.expect(LENGTH);
-  var height = tokenStream.matches(SPACE) ? tokenStream.expect(LENGTH) : width;
-  tokenStream.expectEmpty();
-  return {
-    width: width,
-    height: height
-  };
-};
-
-var parseShadow = function parseShadow(tokenStream) {
-  var offsetX;
-  var offsetY;
-  var radius;
-  var color;
-
-  if (tokenStream.matches(NONE)) {
-    tokenStream.expectEmpty();
-    return {
-      offset: {
-        width: 0,
-        height: 0
-      },
-      radius: 0,
-      color: 'black'
-    };
-  }
-
-  var didParseFirst = false;
-
-  while (tokenStream.hasTokens()) {
-    if (didParseFirst) tokenStream.expect(SPACE);
-
-    if (offsetX === undefined && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
-      offsetX = tokenStream.lastValue;
-      tokenStream.expect(SPACE);
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
-      tokenStream.saveRewindPoint();
-
-      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
-        radius = tokenStream.lastValue;
-      } else {
-        tokenStream.rewind();
-      }
-    } else if (color === undefined && (tokenStream.matches(COLOR) || tokenStream.matches(VARIABLE))) {
-      color = tokenStream.lastValue;
-    } else {
-      tokenStream["throw"]();
-    }
-
-    didParseFirst = true;
-  }
-
-  if (offsetX === undefined) tokenStream["throw"]();
-  return {
-    offset: {
-      width: offsetX,
-      height: offsetY
-    },
-    radius: radius !== undefined ? radius : 0,
-    color: color !== undefined ? color : 'black'
-  };
-};
-
 var boxShadow = function boxShadow(tokenStream) {
-  var _parseShadow = parseShadow(tokenStream),
-      offset = _parseShadow.offset,
-      radius = _parseShadow.radius,
-      color = _parseShadow.color;
-
+  // React Native now supports web-style box-shadow format directly
+  // Pass through the original CSS value as boxShadow
+  var value = parse.stringify(tokenStream.nodes);
   return {
-    shadowOffset: offset,
-    shadowRadius: radius,
-    shadowColor: color,
-    shadowOpacity: 1
+    boxShadow: value
   };
 };
-
 var defaultFlexGrow = 1;
 var defaultFlexShrink = 1;
 var defaultFlexBasis = 0;
-
 var flex = function flex(tokenStream) {
   var flexGrow;
   var flexShrink;
   var flexBasis;
-
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty();
     return {
@@ -335,9 +516,7 @@ var flex = function flex(tokenStream) {
       flexBasis: 'auto'
     };
   }
-
   tokenStream.saveRewindPoint();
-
   if (tokenStream.matches(AUTO) && !tokenStream.hasTokens()) {
     return {
       flexGrow: 1,
@@ -345,17 +524,13 @@ var flex = function flex(tokenStream) {
       flexBasis: 'auto'
     };
   }
-
   tokenStream.rewind();
   var partsParsed = 0;
-
   while (partsParsed < 2 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE);
-
     if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
       flexGrow = tokenStream.lastValue;
       tokenStream.saveRewindPoint();
-
       if (tokenStream.matches(SPACE) && tokenStream.matches(NUMBER)) {
         flexShrink = tokenStream.lastValue;
       } else {
@@ -368,10 +543,8 @@ var flex = function flex(tokenStream) {
     } else {
       tokenStream["throw"]();
     }
-
     partsParsed += 1;
   }
-
   tokenStream.expectEmpty();
   if (flexGrow === undefined) flexGrow = defaultFlexGrow;
   if (flexShrink === undefined) flexShrink = defaultFlexShrink;
@@ -382,20 +555,16 @@ var flex = function flex(tokenStream) {
     flexBasis: flexBasis
   };
 };
-
 var FLEX_WRAP = regExpToken(/(nowrap|wrap|wrap-reverse)/);
 var FLEX_DIRECTION = regExpToken(/(row|row-reverse|column|column-reverse)/);
 var defaultFlexWrap = 'nowrap';
 var defaultFlexDirection = 'row';
-
 var flexFlow = function flexFlow(tokenStream) {
   var flexWrap;
   var flexDirection;
   var partsParsed = 0;
-
   while (partsParsed < 2 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE);
-
     if (flexWrap === undefined && tokenStream.matches(FLEX_WRAP)) {
       flexWrap = tokenStream.lastValue;
     } else if (flexDirection === undefined && tokenStream.matches(FLEX_DIRECTION)) {
@@ -403,10 +572,8 @@ var flexFlow = function flexFlow(tokenStream) {
     } else {
       tokenStream["throw"]();
     }
-
     partsParsed += 1;
   }
-
   tokenStream.expectEmpty();
   if (flexWrap === undefined) flexWrap = defaultFlexWrap;
   if (flexDirection === undefined) flexDirection = defaultFlexDirection;
@@ -415,28 +582,23 @@ var flexFlow = function flexFlow(tokenStream) {
     flexDirection: flexDirection
   };
 };
-
 var fontFamily = function fontFamily(tokenStream) {
   var fontFamily;
-
   if (tokenStream.matches(STRING)) {
     fontFamily = tokenStream.lastValue;
   } else {
     fontFamily = tokenStream.expect(IDENT);
-
     while (tokenStream.hasTokens()) {
       tokenStream.expect(SPACE);
       var nextIdent = tokenStream.expect(IDENT);
       fontFamily += " " + nextIdent;
     }
   }
-
   tokenStream.expectEmpty();
   return {
     fontFamily: fontFamily
   };
 };
-
 var NORMAL = regExpToken(/^(normal)$/);
 var STYLE = regExpToken(/^(italic)$/);
 var WEIGHT = regExpToken(/^([1-9]00|bold)$/);
@@ -444,16 +606,15 @@ var VARIANT = regExpToken(/^(small-caps)$/);
 var defaultFontStyle = 'normal';
 var defaultFontWeight = 'normal';
 var defaultFontVariant = [];
-
 var font = function font(tokenStream) {
   var fontStyle;
   var fontWeight;
-  var fontVariant; // let fontSize;
-
-  var lineHeight; // let fontFamily;
+  var fontVariant;
+  // let fontSize;
+  var lineHeight;
+  // let fontFamily;
 
   var numStyleWeightVariantMatched = 0;
-
   while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
     if (tokenStream.matches(NORMAL)) ;else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
       fontStyle = tokenStream.lastValue;
@@ -467,18 +628,13 @@ var font = function font(tokenStream) {
     tokenStream.expect(SPACE);
     numStyleWeightVariantMatched += 1;
   }
-
   var fontSize = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
-
   if (tokenStream.matches(SLASH)) {
     lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
   }
-
   tokenStream.expect(SPACE);
-
   var _fontFamily = fontFamily(tokenStream),
-      fontFamily$1 = _fontFamily.fontFamily;
-
+    fontFamily$1 = _fontFamily.fontFamily;
   if (fontStyle === undefined) fontStyle = defaultFontStyle;
   if (fontWeight === undefined) fontWeight = defaultFontWeight;
   if (fontVariant === undefined) fontVariant = defaultFontVariant;
@@ -492,67 +648,54 @@ var font = function font(tokenStream) {
   if (lineHeight !== undefined) out.lineHeight = lineHeight;
   return out;
 };
-
 var fontVariant = function fontVariant(tokenStream) {
   var values = [tokenStream.expect(IDENT)];
-
   while (tokenStream.hasTokens()) {
     tokenStream.expect(SPACE);
     values.push(tokenStream.expect(IDENT));
   }
-
   return {
     fontVariant: values
   };
 };
-
 var ALIGN_CONTENT = regExpToken(/(flex-(?:start|end)|center|stretch|space-(?:between|around))/);
 var JUSTIFY_CONTENT = regExpToken(/(flex-(?:start|end)|center|space-(?:between|around|evenly))/);
-
 var placeContent = function placeContent(tokenStream) {
   var alignContent = tokenStream.expect(ALIGN_CONTENT);
   var justifyContent;
-
   if (tokenStream.hasTokens()) {
     tokenStream.expect(SPACE);
     justifyContent = tokenStream.expect(JUSTIFY_CONTENT);
   } else {
     justifyContent = 'stretch';
   }
-
   tokenStream.expectEmpty();
   return {
     alignContent: alignContent,
     justifyContent: justifyContent
   };
 };
-
 var STYLE$1 = regExpToken(/^(solid|double|dotted|dashed)$/);
 var defaultTextDecorationLine = 'none';
 var defaultTextDecorationStyle = 'solid';
 var defaultTextDecorationColor = 'black';
-
 var textDecoration = function textDecoration(tokenStream) {
   var line;
   var style;
   var color;
   var didParseFirst = false;
-
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE);
-
     if (line === undefined && tokenStream.matches(LINE)) {
       var lines = [tokenStream.lastValue.toLowerCase()];
       tokenStream.saveRewindPoint();
-
       if (lines[0] !== 'none' && tokenStream.matches(SPACE) && tokenStream.matches(LINE)) {
-        lines.push(tokenStream.lastValue.toLowerCase()); // Underline comes before line-through
-
+        lines.push(tokenStream.lastValue.toLowerCase());
+        // Underline comes before line-through
         lines.sort().reverse();
       } else {
         tokenStream.rewind();
       }
-
       line = lines.join(' ');
     } else if (style === undefined && tokenStream.matches(STYLE$1)) {
       style = tokenStream.lastValue;
@@ -561,46 +704,144 @@ var textDecoration = function textDecoration(tokenStream) {
     } else {
       tokenStream["throw"]();
     }
-
     didParseFirst = true;
   }
-
   return {
     textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
     textDecorationColor: color !== undefined ? color : defaultTextDecorationColor,
     textDecorationStyle: style !== undefined ? style : defaultTextDecorationStyle
   };
 };
-
 var textDecorationLine = function textDecorationLine(tokenStream) {
   var lines = [];
   var didParseFirst = false;
-
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE);
     lines.push(tokenStream.expect(LINE).toLowerCase());
     didParseFirst = true;
   }
-
   lines.sort().reverse();
   return {
     textDecorationLine: lines.join(' ')
   };
 };
+var directionFactory = function directionFactory(_ref) {
+  var _ref$types = _ref.types,
+    types = _ref$types === void 0 ? [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, VARIABLE] : _ref$types,
+    _ref$directions = _ref.directions,
+    directions = _ref$directions === void 0 ? ['Top', 'Right', 'Bottom', 'Left'] : _ref$directions,
+    _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? '' : _ref$prefix,
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? '' : _ref$suffix;
+  return function (tokenStream) {
+    var _ref2;
+    var values = [];
 
-var textShadow = function textShadow(tokenStream) {
-  var _parseShadow2 = parseShadow(tokenStream),
-      offset = _parseShadow2.offset,
-      radius = _parseShadow2.radius,
-      color = _parseShadow2.color;
+    // borderWidth doesn't currently allow a percent value, but may do in the future
+    values.push(tokenStream.expect.apply(tokenStream, types));
+    while (values.length < 4 && tokenStream.hasTokens()) {
+      tokenStream.expect(SPACE);
+      values.push(tokenStream.expect.apply(tokenStream, types));
+    }
+    tokenStream.expectEmpty();
+    var top = values[0],
+      _values$ = values[1],
+      right = _values$ === void 0 ? top : _values$,
+      _values$2 = values[2],
+      bottom = _values$2 === void 0 ? top : _values$2,
+      _values$3 = values[3],
+      left = _values$3 === void 0 ? right : _values$3;
+    var keyFor = function keyFor(n) {
+      return "" + prefix + directions[n] + suffix;
+    };
+    return _ref2 = {}, _ref2[keyFor(0)] = top, _ref2[keyFor(1)] = right, _ref2[keyFor(2)] = bottom, _ref2[keyFor(3)] = left, _ref2;
+  };
+};
+var parseShadowOffset = function parseShadowOffset(tokenStream) {
+  var width = tokenStream.expect(LENGTH);
+  var height = tokenStream.matches(SPACE) ? tokenStream.expect(LENGTH) : width;
+  tokenStream.expectEmpty();
+  return {
+    width: width,
+    height: height
+  };
+};
+var parseShadow = function parseShadow(tokenStream) {
+  var offsetX;
+  var offsetY;
+  var radius;
+  var color;
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty();
+    return {
+      offset: {
+        width: 0,
+        height: 0
+      },
+      radius: 0,
+      color: 'black'
+    };
+  }
+  var didParseFirst = false;
+  while (tokenStream.hasTokens()) {
+    if (didParseFirst) tokenStream.expect(SPACE);
+    if (offsetX === undefined && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
+      // First offset must be a concrete LENGTH to distinguish from color
+      offsetX = tokenStream.lastValue;
+      tokenStream.expect(SPACE);
+      // Second offset and radius can be VARIABLE
+      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT, VARIABLE);
 
+      // Try to match optional blur-radius (concrete LENGTH only here)
+      tokenStream.saveRewindPoint();
+      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
+        radius = tokenStream.lastValue;
+      } else {
+        tokenStream.rewind();
+      }
+    } else if (offsetX !== undefined && radius === undefined && color === undefined && tokenStream.matches(VARIABLE)) {
+      // VARIABLE after offsets - could be radius or color
+      // Peek ahead to determine which
+      var potentialValue = tokenStream.lastValue;
+      tokenStream.saveRewindPoint();
+      if (tokenStream.matches(SPACE) && tokenStream.hasTokens()) {
+        // There's more content - this VARIABLE is the radius
+        tokenStream.rewind();
+        radius = potentialValue;
+      } else {
+        // No more content - this VARIABLE is the color
+        tokenStream.rewind();
+        color = potentialValue;
+      }
+    } else if (color === undefined && (tokenStream.matches(COLOR) || tokenStream.matches(VARIABLE))) {
+      color = tokenStream.lastValue;
+    } else {
+      tokenStream["throw"]();
+    }
+    didParseFirst = true;
+  }
+  if (offsetX === undefined) tokenStream["throw"]();
+  return {
+    offset: {
+      width: offsetX,
+      height: offsetY
+    },
+    radius: radius !== undefined ? radius : 0,
+    color: color !== undefined ? color : 'black'
+  };
+};
+var textShadow = function textShadow(tokenStream) {
+  var _parseShadow = parseShadow(tokenStream),
+    offset = _parseShadow.offset,
+    radius = _parseShadow.radius,
+    color = _parseShadow.color;
   return {
     textShadowOffset: offset,
     textShadowRadius: radius,
     textShadowColor: color
   };
 };
-
 var oneOfTypes = function oneOfTypes(tokenTypes) {
   return function (functionStream) {
     var value = functionStream.expect.apply(functionStream, tokenTypes);
@@ -608,19 +849,15 @@ var oneOfTypes = function oneOfTypes(tokenTypes) {
     return value;
   };
 };
-
-var singleNumber = oneOfTypes([NUMBER]);
-var singleLengthOrPercent = oneOfTypes([LENGTH, PERCENT]);
-var singleAngle = oneOfTypes([ANGLE]);
-
+var singleNumber = oneOfTypes([NUMBER, VARIABLE]);
+var singleLengthOrPercent = oneOfTypes([LENGTH, PERCENT, VARIABLE]);
+var singleAngle = oneOfTypes([ANGLE, VARIABLE]);
 var xyTransformFactory = function xyTransformFactory(tokenTypes) {
   return function (key, valueIfOmitted) {
     return function (functionStream) {
       var _ref3, _ref4;
-
       var x = functionStream.expect.apply(functionStream, tokenTypes);
       var y;
-
       if (functionStream.hasTokens()) {
         functionStream.expect(COMMA);
         y = functionStream.expect.apply(functionStream, tokenTypes);
@@ -631,16 +868,14 @@ var xyTransformFactory = function xyTransformFactory(tokenTypes) {
         // I.e. scale(5) => [{ scale: 5 }] rather than [{ scaleX: 5 }, { scaleY: 5 }]
         return x;
       }
-
       functionStream.expectEmpty();
       return [(_ref3 = {}, _ref3[key + "Y"] = y, _ref3), (_ref4 = {}, _ref4[key + "X"] = x, _ref4)];
     };
   };
 };
-
-var xyNumber = xyTransformFactory([NUMBER]);
-var xyLengthOrPercent = xyTransformFactory([LENGTH, PERCENT]);
-var xyAngle = xyTransformFactory([ANGLE]);
+var xyNumber = xyTransformFactory([NUMBER, VARIABLE]);
+var xyLengthOrPercent = xyTransformFactory([LENGTH, PERCENT, VARIABLE]);
+var xyAngle = xyTransformFactory([ANGLE, VARIABLE]);
 var partTransforms = {
   perspective: singleNumber,
   scale: xyNumber('scale'),
@@ -657,38 +892,253 @@ var partTransforms = {
   skewY: singleAngle,
   skew: xyAngle('skew', '0deg')
 };
-
 var transform = function transform(tokenStream) {
   var transforms = [];
   var didParseFirst = false;
-
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE);
     var functionStream = tokenStream.expectFunction();
     var functionName = functionStream.functionName;
     var transformedValues = partTransforms[functionName](functionStream);
-
     if (!Array.isArray(transformedValues)) {
       var _ref5;
-
       transformedValues = [(_ref5 = {}, _ref5[functionName] = transformedValues, _ref5)];
     }
-
     transforms = transformedValues.concat(transforms);
     didParseFirst = true;
   }
-
   return {
     transform: transforms
   };
 };
 
+// Timing function keywords
+var timingFunctionKeywords$1 = ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end'];
+var isTimingFunction$1 = function isTimingFunction$1(value) {
+  if (timingFunctionKeywords$1.includes(value.toLowerCase())) {
+    return true;
+  }
+  // cubic-bezier and steps are handled as functions
+  return false;
+};
+var isTime$1 = function isTime$1(value) {
+  return /^[+-]?(?:\d*\.)?\d+(?:ms|s)$/i.test(value);
+};
+
+// Helper to parse comma-separated values
+// Returns single value if only one, array if multiple
+var parseCommaSeparatedValues$1 = function parseCommaSeparatedValues$1(tokenStream, parseValue) {
+  var values = [];
+  var parsingFirst = true;
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA);
+    }
+
+    // Skip leading/trailing spaces
+    if (tokenStream.matches(SPACE)) ;
+    var value = parseValue(tokenStream);
+    values.push(value);
+
+    // Skip trailing spaces
+    if (tokenStream.matches(SPACE)) ;
+    parsingFirst = false;
+  }
+  return values.length === 1 ? values[0] : values;
+};
+
+// Transform for transition-property
+var transitionProperty = function transitionProperty(tokenStream) {
+  var properties = parseCommaSeparatedValues$1(tokenStream, function (ts) {
+    var prop = ts.expect(IDENT, NONE);
+    // Don't camelize special values like 'all' and 'none'
+    return prop === 'all' || prop === 'none' ? prop : camelizeStyleName(prop);
+  });
+  return {
+    transitionProperty: properties
+  };
+};
+
+// Transform for transition-duration
+var transitionDuration = function transitionDuration(tokenStream) {
+  var durations = parseCommaSeparatedValues$1(tokenStream, function (ts) {
+    return ts.expect(TIME, VARIABLE);
+  });
+  return {
+    transitionDuration: durations
+  };
+};
+
+// Transform for transition-timing-function
+var transitionTimingFunction = function transitionTimingFunction(tokenStream) {
+  var timingFunctions = parseCommaSeparatedValues$1(tokenStream, function (ts) {
+    // Check for function (cubic-bezier or steps)
+    var funcStream = ts.matchesFunction();
+    if (funcStream) {
+      var funcName = funcStream.functionName;
+      var args = [];
+      while (funcStream.hasTokens()) {
+        if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+          continue;
+        }
+        var val = funcStream.expect(IDENT, TIME, function (node) {
+          if (node.type === 'word') return node.value;
+          return null;
+        });
+        args.push(val);
+      }
+      return funcName + "(" + args.join(', ') + ")";
+    }
+    return ts.expect(IDENT);
+  });
+  return {
+    transitionTimingFunction: timingFunctions
+  };
+};
+
+// Transform for transition-delay
+var transitionDelay = function transitionDelay(tokenStream) {
+  var delays = parseCommaSeparatedValues$1(tokenStream, function (ts) {
+    return ts.expect(TIME, VARIABLE);
+  });
+  return {
+    transitionDelay: delays
+  };
+};
+var transition = function transition(tokenStream) {
+  // Handle 'none'
+  if (tokenStream.matches(NONE)) {
+    tokenStream.expectEmpty();
+    return {
+      transitionProperty: 'none',
+      transitionDuration: '0s',
+      transitionTimingFunction: 'ease',
+      transitionDelay: '0s'
+    };
+  }
+  var properties = [];
+  var durations = [];
+  var timingFunctions = [];
+  var delays = [];
+  var parsingFirst = true;
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA);
+    }
+
+    // Parse single transition: property duration timing-function delay
+    // Order can vary, but typically: property duration [timing-function] [delay]
+    var property = null;
+    var duration = null;
+    var timingFunction = null;
+    var delay = null;
+
+    // Skip leading space
+    if (tokenStream.matches(SPACE)) ;
+
+    // Parse tokens for this transition
+    while (tokenStream.hasTokens()) {
+      // Check for comma (next transition)
+      tokenStream.saveRewindPoint();
+      if (tokenStream.matches(SPACE)) {
+        if (tokenStream.matches(COMMA)) {
+          tokenStream.rewind();
+          break;
+        }
+      }
+      if (tokenStream.matches(COMMA)) {
+        tokenStream.rewind();
+        break;
+      }
+      tokenStream.rewind();
+
+      // Try to match different token types
+      if (tokenStream.matches(SPACE)) {
+        continue;
+      }
+
+      // Match time or variable (for duration/delay) - check before functions
+      if (tokenStream.matches(TIME) || tokenStream.matches(VARIABLE)) {
+        var value = tokenStream.lastValue;
+        if (duration === null) {
+          duration = value;
+        } else {
+          delay = value;
+        }
+        continue;
+      }
+
+      // Check for timing function (cubic-bezier or steps)
+      var funcStream = tokenStream.matchesFunction();
+      if (funcStream) {
+        var funcName = funcStream.functionName;
+        var args = [];
+        while (funcStream.hasTokens()) {
+          if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+            continue;
+          }
+          var val = funcStream.expect(IDENT, TIME, function (node) {
+            if (node.type === 'word') return node.value;
+            return null;
+          });
+          args.push(val);
+        }
+        timingFunction = funcName + "(" + args.join(', ') + ")";
+        continue;
+      }
+
+      // Match word or time
+      if (tokenStream.matches(IDENT)) {
+        var _value2 = tokenStream.lastValue;
+        if (isTimingFunction$1(_value2)) {
+          timingFunction = _value2;
+        } else {
+          property = _value2;
+        }
+        continue;
+      }
+
+      // Try to match as word for property names like 'all', 'opacity', etc.
+      var wordMatch = tokenStream.expect(function (node) {
+        if (node.type === 'word') return node.value;
+        return null;
+      });
+      if (isTime$1(wordMatch)) {
+        if (duration === null) {
+          duration = wordMatch;
+        } else {
+          delay = wordMatch;
+        }
+      } else if (isTimingFunction$1(wordMatch)) {
+        timingFunction = wordMatch;
+      } else {
+        property = wordMatch;
+      }
+    }
+
+    // Apply defaults and camelize property name
+    var propName = property || 'all';
+    properties.push(propName === 'all' ? 'all' : camelizeStyleName(propName));
+    durations.push(duration || '0s');
+    timingFunctions.push(timingFunction || 'ease');
+    delays.push(delay || '0s');
+    parsingFirst = false;
+  }
+
+  // Return single values if only one transition, arrays if multiple
+  var isSingle = properties.length === 1;
+  return {
+    transitionProperty: isSingle ? properties[0] : properties,
+    transitionDuration: isSingle ? durations[0] : durations,
+    transitionTimingFunction: isSingle ? timingFunctions[0] : timingFunctions,
+    transitionDelay: isSingle ? delays[0] : delays
+  };
+};
 var background = function background(tokenStream) {
   return {
     backgroundColor: tokenStream.expect(COLOR, VARIABLE)
   };
 };
-
 var borderColor = directionFactory({
   types: [COLOR, VARIABLE],
   prefix: 'border',
@@ -704,33 +1154,37 @@ var borderWidth = directionFactory({
   suffix: 'Width'
 });
 var margin = directionFactory({
-  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
+  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO, VARIABLE],
   prefix: 'margin'
 });
 var padding = directionFactory({
   prefix: 'padding'
 });
-
 var fontWeight = function fontWeight(tokenStream) {
   return {
     fontWeight: tokenStream.expect(WORD) // Also match numbers as strings
-
   };
 };
-
 var shadowOffset = function shadowOffset(tokenStream) {
   return {
     shadowOffset: parseShadowOffset(tokenStream)
   };
 };
-
 var textShadowOffset = function textShadowOffset(tokenStream) {
   return {
     textShadowOffset: parseShadowOffset(tokenStream)
   };
 };
-
 var transforms = {
+  animation: animation,
+  animationName: animationName,
+  animationDuration: animationDuration,
+  animationTimingFunction: animationTimingFunction,
+  animationDelay: animationDelay,
+  animationIterationCount: animationIterationCount,
+  animationDirection: animationDirection,
+  animationFillMode: animationFillMode,
+  animationPlayState: animationPlayState,
   aspectRatio: aspectRatio,
   background: background,
   border: border,
@@ -752,20 +1206,20 @@ var transforms = {
   textShadowOffset: textShadowOffset,
   textDecoration: textDecoration,
   textDecorationLine: textDecorationLine,
-  transform: transform
+  transform: transform,
+  transition: transition,
+  transitionProperty: transitionProperty,
+  transitionDuration: transitionDuration,
+  transitionTimingFunction: transitionTimingFunction,
+  transitionDelay: transitionDelay
 };
 var propertiesWithoutUnits;
-
 if (process.env.NODE_ENV !== 'production') {
   propertiesWithoutUnits = ['aspectRatio', 'elevation', 'flexGrow', 'flexShrink', 'opacity', 'shadowOpacity', 'zIndex'];
 }
-
 var devPropertiesWithUnitsRegExp = propertiesWithoutUnits != null ? new RegExp(propertiesWithoutUnits.join('|')) : null;
 var SYMBOL_MATCH = 'SYMBOL_MATCH';
-
-var TokenStream =
-/*#__PURE__*/
-function () {
+var TokenStream = /*#__PURE__*/function () {
   function TokenStream(nodes, parent) {
     this.index = 0;
     this.nodes = nodes;
@@ -773,40 +1227,31 @@ function () {
     this.lastValue = null;
     this.rewindIndex = -1;
   }
-
   var _proto = TokenStream.prototype;
-
   _proto.hasTokens = function hasTokens() {
     return this.index <= this.nodes.length - 1;
   };
-
   _proto[SYMBOL_MATCH] = function () {
     if (!this.hasTokens()) return null;
     var node = this.nodes[this.index];
-
     for (var i = 0; i < arguments.length; i += 1) {
       var tokenDescriptor = i < 0 || arguments.length <= i ? undefined : arguments[i];
       var value = tokenDescriptor(node);
-
       if (value !== null) {
         this.index += 1;
         this.lastValue = value;
         return value;
       }
     }
-
     return null;
   };
-
   _proto.matches = function matches() {
     return this[SYMBOL_MATCH].apply(this, arguments) !== null;
   };
-
   _proto.expect = function expect() {
     var value = this[SYMBOL_MATCH].apply(this, arguments);
     return value !== null ? value : this["throw"]();
   };
-
   _proto.matchesFunction = function matchesFunction() {
     var node = this.nodes[this.index];
     if (node.type !== 'function') return null;
@@ -815,58 +1260,48 @@ function () {
     this.lastValue = null;
     return value;
   };
-
   _proto.expectFunction = function expectFunction() {
     var value = this.matchesFunction();
     return value !== null ? value : this["throw"]();
   };
-
   _proto.expectEmpty = function expectEmpty() {
     if (this.hasTokens()) this["throw"]();
   };
-
   _proto["throw"] = function _throw() {
     throw new Error("Unexpected token type: " + this.nodes[this.index].type);
   };
-
   _proto.saveRewindPoint = function saveRewindPoint() {
     this.rewindIndex = this.index;
   };
-
   _proto.rewind = function rewind() {
     if (this.rewindIndex === -1) throw new Error('Internal error');
     this.index = this.rewindIndex;
     this.lastValue = null;
   };
-
   return TokenStream;
 }();
 /* eslint-disable no-param-reassign */
 // Note if this is wrong, you'll need to change tokenTypes.js too
-
-
 var numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?:px)?$/i;
 var numberOnlyRe = /^[+-]?(?:\d*\.\d*|[1-9]\d*)(?:e[+-]?\d+)?$/i;
 var boolRe = /^true|false$/i;
 var nullRe = /^null$/i;
-var undefinedRe = /^undefined$/i; // Undocumented export
+var undefinedRe = /^undefined$/i;
 
+// Undocumented export
 var transformRawValue = function transformRawValue(propName, value) {
   if (process.env.NODE_ENV !== 'production') {
     var needsUnit = !devPropertiesWithUnitsRegExp.test(propName);
     var isNumberWithoutUnit = numberOnlyRe.test(value);
-
     if (needsUnit && isNumberWithoutUnit) {
       // eslint-disable-next-line no-console
       console.warn("Expected style \"" + propName + ": " + value + "\" to contain units");
     }
-
     if (!needsUnit && value !== '0' && !isNumberWithoutUnit) {
       // eslint-disable-next-line no-console
       console.warn("Expected style \"" + propName + ": " + value + "\" to be unitless");
     }
   }
-
   var numberMatch = value.match(numberOrLengthRe);
   if (numberMatch !== null) return Number(numberMatch[1]);
   var boolMatch = value.match(boolRe);
@@ -877,13 +1312,11 @@ var transformRawValue = function transformRawValue(propName, value) {
   if (undefinedMatch !== null) return undefined;
   return value;
 };
-
 var baseTransformShorthandValue = function baseTransformShorthandValue(propName, value) {
   var ast = parse__default(value);
   var tokenStream = new TokenStream(ast.nodes);
   return transforms[propName](tokenStream);
 };
-
 var transformShorthandValue = process.env.NODE_ENV === 'production' ? baseTransformShorthandValue : function (propName, value) {
   try {
     return baseTransformShorthandValue(propName, value);
@@ -891,39 +1324,154 @@ var transformShorthandValue = process.env.NODE_ENV === 'production' ? baseTransf
     throw new Error("Failed to parse declaration \"" + propName + ": " + value + "\"");
   }
 };
-
 var getStylesForProperty = function getStylesForProperty(propName, inputValue, allowShorthand) {
   var _ref6;
-
   var isRawValue = allowShorthand === false || !(propName in transforms);
   var value = inputValue.trim();
   var propValues = isRawValue ? (_ref6 = {}, _ref6[propName] = transformRawValue(propName, value), _ref6) : transformShorthandValue(propName, value);
   return propValues;
 };
-
 var getPropertyName = function getPropertyName(propName) {
   var isCustomProp = /^--\w+/.test(propName);
-
   if (isCustomProp) {
     return propName;
   }
-
   return camelizeStyleName(propName);
 };
 
-var index = function index(rules, shorthandBlacklist) {
-  if (shorthandBlacklist === void 0) {
-    shorthandBlacklist = [];
+/**
+ * Strip CSS comments from a string
+ * Handles both single-line and multi-line comments
+ */
+var stripCssComments = function stripCssComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, '');
+};
+
+/**
+ * Parse CSS declarations into React Native styles (for keyframes)
+ */
+var parseKeyframeDeclarations = function parseKeyframeDeclarations(declarationsStr) {
+  var declarations = [];
+  var parts = declarationsStr.split(';');
+  for (var _iterator = _createForOfIteratorHelperLoose(parts), _step; !(_step = _iterator()).done;) {
+    var part = _step.value;
+    var trimmed = part.trim();
+    if (!trimmed) continue;
+    var colonIndex = trimmed.indexOf(':');
+    if (colonIndex === -1) continue;
+    var property = trimmed.substring(0, colonIndex).trim();
+    var value = trimmed.substring(colonIndex + 1).trim();
+    if (property && value) {
+      declarations.push([property, value]);
+    }
+  }
+  if (declarations.length === 0) {
+    return {};
   }
 
-  return rules.reduce(function (accum, rule) {
+  // Transform each declaration
+  return declarations.reduce(function (accum, rule) {
     var propertyName = getPropertyName(rule[0]);
     var value = rule[1];
-    var allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1;
-    return Object.assign(accum, getStylesForProperty(propertyName, value, allowShorthand));
+    return Object.assign(accum, getStylesForProperty(propertyName, value, true));
   }, {});
 };
 
+/**
+ * Parse keyframe body CSS into a keyframe object
+ * @param {string} body - CSS keyframe body
+ * @returns {Object} Keyframe object with selectors as keys
+ */
+var parseKeyframeBody = function parseKeyframeBody(body) {
+  // Strip CSS comments before parsing
+  var cleanBody = stripCssComments(body);
+  var keyframeObject = {};
+  var selectorRegex = /([a-zA-Z0-9%,\s]+)\s*\{\s*([^}]*)\s*\}/g;
+  var selectorMatch;
+
+  // eslint-disable-next-line no-cond-assign
+  while ((selectorMatch = selectorRegex.exec(cleanBody)) !== null) {
+    var selectors = selectorMatch[1].split(',').map(function (s) {
+      return s.trim();
+    }).filter(function (s) {
+      return s;
+    });
+    var declarations = selectorMatch[2];
+
+    // Parse CSS declarations into style object
+    var styles = parseKeyframeDeclarations(declarations);
+    for (var _iterator2 = _createForOfIteratorHelperLoose(selectors), _step2; !(_step2 = _iterator2()).done;) {
+      var selector = _step2.value;
+      keyframeObject[selector] = styles;
+    }
+  }
+  return keyframeObject;
+};
+
+/**
+ * Check if a property name is a @keyframes rule
+ */
+var isKeyframesRule = function isKeyframesRule(propName) {
+  return propName.startsWith('@keyframes ') || propName.startsWith('@keyframes\t');
+};
+
+/**
+ * Extract keyframe name from @keyframes rule
+ */
+var getKeyframeName = function getKeyframeName(propName) {
+  return propName.replace(/^@keyframes\s+/, '').trim();
+};
+var index = function index(rules, shorthandBlacklist) {
+  if (shorthandBlacklist === void 0) {
+    shorthandBlacklist = [];
+  }
+  // First pass: collect @keyframes definitions
+  var keyframesMap = {};
+  for (var _iterator3 = _createForOfIteratorHelperLoose(rules), _step3; !(_step3 = _iterator3()).done;) {
+    var rule = _step3.value;
+    var propName = rule[0];
+    if (isKeyframesRule(propName)) {
+      var keyframeName = getKeyframeName(propName);
+      var keyframeBody = rule[1];
+      keyframesMap[keyframeName] = parseKeyframeBody(keyframeBody);
+    }
+  }
+
+  // Second pass: transform all non-keyframes rules
+  var result = {};
+  for (var _iterator4 = _createForOfIteratorHelperLoose(rules), _step4; !(_step4 = _iterator4()).done;) {
+    var _rule = _step4.value;
+    var _propName = _rule[0];
+
+    // Skip @keyframes rules in the output
+    if (isKeyframesRule(_propName)) {
+      continue;
+    }
+    var propertyName = getPropertyName(_propName);
+    var value = _rule[1];
+    var allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1;
+    var propValues = getStylesForProperty(propertyName, value, allowShorthand);
+    Object.assign(result, propValues);
+  }
+
+  // Third pass: replace animationName strings with actual keyframe objects
+  if (result.animationName) {
+    if (Array.isArray(result.animationName)) {
+      result.animationName = result.animationName.map(function (name) {
+        if (typeof name === 'string' && name !== 'none' && keyframesMap[name]) {
+          return keyframesMap[name];
+        }
+        return name;
+      });
+    } else if (typeof result.animationName === 'string') {
+      // Handle single value case
+      if (result.animationName !== 'none' && keyframesMap[result.animationName]) {
+        result.animationName = keyframesMap[result.animationName];
+      }
+    }
+  }
+  return result;
+};
 exports["default"] = index;
 exports.getPropertyName = getPropertyName;
 exports.getStylesForProperty = getStylesForProperty;