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

package/index.js

@@ -32,7 +32,7 @@ var matchColor = function matchColor(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 + ")";
@@ -169,7 +169,7 @@ var parseCommaSeparatedValues = function parseCommaSeparatedValues(tokenStream,
 // Transform for animation-name property
 var animationName = function animationName(tokenStream) {
   var names = parseCommaSeparatedValues(tokenStream, function (ts) {
-    return ts.expect(IDENT, NONE);
+    return ts.expect(IDENT, NONE, VARIABLE);
   });
   return {
     animationName: names
@@ -179,7 +179,7 @@ var animationName = function animationName(tokenStream) {
 // Transform for animation-duration property
 var animationDuration = function animationDuration(tokenStream) {
   var durations = parseCommaSeparatedValues(tokenStream, function (ts) {
-    return ts.expect(TIME);
+    return ts.expect(TIME, VARIABLE);
   });
   return {
     animationDuration: durations
@@ -216,7 +216,7 @@ var animationTimingFunction = function animationTimingFunction(tokenStream) {
 // Transform for animation-delay property
 var animationDelay = function animationDelay(tokenStream) {
   var delays = parseCommaSeparatedValues(tokenStream, function (ts) {
-    return ts.expect(TIME);
+    return ts.expect(TIME, VARIABLE);
   });
   return {
     animationDelay: delays
@@ -336,6 +336,17 @@ var animation = function animation(tokenStream) {
         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) {
@@ -361,17 +372,6 @@ var animation = function animation(tokenStream) {
         continue;
       }
 
-      // Match time
-      if (tokenStream.matches(TIME)) {
-        var value = tokenStream.lastValue;
-        if (duration === null) {
-          duration = value;
-        } else {
-          delay = value;
-        }
-        continue;
-      }
-
       // Match identifier
       if (tokenStream.matches(IDENT)) {
         var _value = tokenStream.lastValue;
@@ -727,7 +727,7 @@ var textDecorationLine = function textDecorationLine(tokenStream) {
 };
 var directionFactory = function directionFactory(_ref) {
   var _ref$types = _ref.types,
-    types = _ref$types === void 0 ? [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT] : _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,
@@ -787,15 +787,33 @@ var parseShadow = function parseShadow(tokenStream) {
   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);
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
+      // 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 {
@@ -831,9 +849,9 @@ 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) {
@@ -855,9 +873,9 @@ var xyTransformFactory = function xyTransformFactory(tokenTypes) {
     };
   };
 };
-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'),
@@ -944,7 +962,7 @@ var transitionProperty = function transitionProperty(tokenStream) {
 // Transform for transition-duration
 var transitionDuration = function transitionDuration(tokenStream) {
   var durations = parseCommaSeparatedValues$1(tokenStream, function (ts) {
-    return ts.expect(TIME);
+    return ts.expect(TIME, VARIABLE);
   });
   return {
     transitionDuration: durations
@@ -981,7 +999,7 @@ var transitionTimingFunction = function transitionTimingFunction(tokenStream) {
 // Transform for transition-delay
 var transitionDelay = function transitionDelay(tokenStream) {
   var delays = parseCommaSeparatedValues$1(tokenStream, function (ts) {
-    return ts.expect(TIME);
+    return ts.expect(TIME, VARIABLE);
   });
   return {
     transitionDelay: delays
@@ -1039,10 +1057,20 @@ var transition = function transition(tokenStream) {
         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) {
-        // It's a function like cubic-bezier() or steps()
         var funcName = funcStream.functionName;
         var args = [];
         while (funcStream.hasTokens()) {
@@ -1061,20 +1089,11 @@ var transition = function transition(tokenStream) {
 
       // Match word or time
       if (tokenStream.matches(IDENT)) {
-        var value = tokenStream.lastValue;
-        if (isTimingFunction$1(value)) {
-          timingFunction = value;
-        } else {
-          property = value;
-        }
-        continue;
-      }
-      if (tokenStream.matches(TIME)) {
         var _value2 = tokenStream.lastValue;
-        if (duration === null) {
-          duration = _value2;
+        if (isTimingFunction$1(_value2)) {
+          timingFunction = _value2;
         } else {
-          delay = _value2;
+          property = _value2;
         }
         continue;
       }
@@ -1135,7 +1154,7 @@ 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/css-to-react-native",
-  "version": "3.2.0-1",
+  "version": "3.2.0-2",
   "publishConfig": {
     "access": "public"
   },

package/src/__tests__/textShadow.js

@@ -105,3 +105,26 @@ it('textShadow with var() color before offset', () => {
     textShadowColor: 'var(--primary-color)',
   })
 })
+
+// Note: var() for offset-x is not supported because it's ambiguous with color-first syntax
+// e.g., 'var(--x) 20px red' could be interpreted as color=var(--x), offsets=20px red (invalid)
+// To use var() for offsets, offset-x must be a concrete value like '10px var(--y) red'
+
+it('textShadow with var() for offset-y', () => {
+  expect(transformCss([['text-shadow', '10px var(--y) red']])).toEqual({
+    textShadowOffset: { width: 10, height: 'var(--y)' },
+    textShadowRadius: 0,
+    textShadowColor: 'red',
+  })
+})
+
+it('textShadow with var() for blur-radius', () => {
+  expect(transformCss([['text-shadow', '10px 20px var(--blur) red']])).toEqual({
+    textShadowOffset: { width: 10, height: 20 },
+    textShadowRadius: 'var(--blur)',
+    textShadowColor: 'red',
+  })
+})
+
+// Note: 'var(--x) var(--y) var(--blur) var(--color)' is not supported
+// because offset-x must be a concrete value to distinguish from color-first syntax

package/src/__tests__/varComplex.js

@@ -0,0 +1,385 @@
+import transformCss from '..'
+
+// =============================================================================
+// Transform functions with var()
+// =============================================================================
+
+describe('transform with var()', () => {
+  it('transforms translateX with var()', () => {
+    expect(transformCss([['transform', 'translateX(var(--x))']])).toEqual({
+      transform: [{ translateX: 'var(--x)' }],
+    })
+  })
+
+  it('transforms translateX with var() and fallback', () => {
+    expect(transformCss([['transform', 'translateX(var(--x, 10px))']])).toEqual({
+      transform: [{ translateX: 'var(--x, 10px)' }],
+    })
+  })
+
+  it('transforms multiple transform functions with var()', () => {
+    expect(
+      transformCss([
+        ['transform', 'translateX(var(--x, 10px)) translateY(var(--y, 20px))'],
+      ])
+    ).toEqual({
+      transform: [
+        { translateY: 'var(--y, 20px)' },
+        { translateX: 'var(--x, 10px)' },
+      ],
+    })
+  })
+
+  it('transforms rotate with var()', () => {
+    expect(transformCss([['transform', 'rotate(var(--angle, 45deg))']])).toEqual(
+      {
+        transform: [{ rotate: 'var(--angle, 45deg)' }],
+      }
+    )
+  })
+
+  it('transforms scale with var()', () => {
+    expect(transformCss([['transform', 'scale(var(--scale, 1.5))']])).toEqual({
+      transform: [{ scale: 'var(--scale, 1.5)' }],
+    })
+  })
+
+  it('transforms mixed concrete and var() values', () => {
+    expect(
+      transformCss([['transform', 'translateX(10px) rotate(var(--angle))']])
+    ).toEqual({
+      transform: [{ rotate: 'var(--angle)' }, { translateX: 10 }],
+    })
+  })
+
+  it('transforms translate with two var() args', () => {
+    expect(
+      transformCss([['transform', 'translate(var(--x, 10px), var(--y, 20px))']])
+    ).toEqual({
+      transform: [
+        { translateY: 'var(--y, 20px)' },
+        { translateX: 'var(--x, 10px)' },
+      ],
+    })
+  })
+
+  it('transforms scale with two var() args', () => {
+    expect(
+      transformCss([['transform', 'scale(var(--sx, 1), var(--sy, 2))']])
+    ).toEqual({
+      transform: [{ scaleY: 'var(--sy, 2)' }, { scaleX: 'var(--sx, 1)' }],
+    })
+  })
+
+  it('transforms skew with var()', () => {
+    expect(
+      transformCss([['transform', 'skew(var(--skew-x, 10deg), var(--skew-y, 5deg))']])
+    ).toEqual({
+      transform: [
+        { skewY: 'var(--skew-y, 5deg)' },
+        { skewX: 'var(--skew-x, 10deg)' },
+      ],
+    })
+  })
+})
+
+// =============================================================================
+// Box-shadow with multiple var() values and comma-separated shadows
+// =============================================================================
+
+describe('box-shadow with complex var()', () => {
+  it('transforms box-shadow with var() for offset-x', () => {
+    expect(
+      transformCss([['box-shadow', 'var(--x) 10px 5px red']])
+    ).toEqual({
+      boxShadow: 'var(--x) 10px 5px red',
+    })
+  })
+
+  it('transforms box-shadow with var() for offset-y', () => {
+    expect(
+      transformCss([['box-shadow', '10px var(--y) 5px red']])
+    ).toEqual({
+      boxShadow: '10px var(--y) 5px red',
+    })
+  })
+
+  it('transforms box-shadow with var() for blur', () => {
+    expect(
+      transformCss([['box-shadow', '10px 20px var(--blur) red']])
+    ).toEqual({
+      boxShadow: '10px 20px var(--blur) red',
+    })
+  })
+
+  it('transforms box-shadow with multiple var() values', () => {
+    expect(
+      transformCss([['box-shadow', 'var(--x) var(--y) var(--blur) var(--color)']])
+    ).toEqual({
+      boxShadow: 'var(--x) var(--y) var(--blur) var(--color)',
+    })
+  })
+
+  it('transforms multiple box-shadows with var()', () => {
+    expect(
+      transformCss([
+        [
+          'box-shadow',
+          'var(--x) var(--y) var(--color, rgba(0, 0, 0, 0.2)), var(--x-2) var(--y-2) var(--color-2, rgba(0, 0, 0, 0.5))',
+        ],
+      ])
+    ).toEqual({
+      boxShadow:
+        'var(--x) var(--y) var(--color, rgba(0, 0, 0, 0.2)), var(--x-2) var(--y-2) var(--color-2, rgba(0, 0, 0, 0.5))',
+    })
+  })
+
+  it('transforms multiple box-shadows with mixed concrete and var() values', () => {
+    expect(
+      transformCss([
+        ['box-shadow', '10px 20px red, var(--x-2) var(--y-2) blue'],
+      ])
+    ).toEqual({
+      boxShadow: '10px 20px red, var(--x-2) var(--y-2) blue',
+    })
+  })
+
+  it('transforms box-shadow with var() having rgba fallback', () => {
+    expect(
+      transformCss([
+        ['box-shadow', '10px 20px var(--blur, 5px) var(--color, rgba(0, 0, 0, 0.2))'],
+      ])
+    ).toEqual({
+      boxShadow: '10px 20px var(--blur, 5px) var(--color, rgba(0, 0, 0, 0.2))',
+    })
+  })
+})
+
+// =============================================================================
+// Shorthand properties with multiple var() values
+// =============================================================================
+
+describe('shorthand properties with var()', () => {
+  it('transforms padding with multiple var() values', () => {
+    expect(
+      transformCss([
+        ['padding', 'var(--top) var(--right) var(--bottom) var(--left)'],
+      ])
+    ).toEqual({
+      paddingTop: 'var(--top)',
+      paddingRight: 'var(--right)',
+      paddingBottom: 'var(--bottom)',
+      paddingLeft: 'var(--left)',
+    })
+  })
+
+  it('transforms padding with var() and fallbacks', () => {
+    expect(
+      transformCss([
+        ['padding', 'var(--top, 10px) var(--right, 20px) var(--bottom, 10px) var(--left, 20px)'],
+      ])
+    ).toEqual({
+      paddingTop: 'var(--top, 10px)',
+      paddingRight: 'var(--right, 20px)',
+      paddingBottom: 'var(--bottom, 10px)',
+      paddingLeft: 'var(--left, 20px)',
+    })
+  })
+
+  it('transforms padding with two var() values', () => {
+    expect(
+      transformCss([['padding', 'var(--vertical) var(--horizontal)']])
+    ).toEqual({
+      paddingTop: 'var(--vertical)',
+      paddingRight: 'var(--horizontal)',
+      paddingBottom: 'var(--vertical)',
+      paddingLeft: 'var(--horizontal)',
+    })
+  })
+
+  it('transforms margin with multiple var() values', () => {
+    expect(
+      transformCss([
+        ['margin', 'var(--top) var(--right) var(--bottom) var(--left)'],
+      ])
+    ).toEqual({
+      marginTop: 'var(--top)',
+      marginRight: 'var(--right)',
+      marginBottom: 'var(--bottom)',
+      marginLeft: 'var(--left)',
+    })
+  })
+
+  it('transforms margin with mixed concrete and var() values', () => {
+    expect(
+      transformCss([['margin', '10px var(--horizontal) 20px']])
+    ).toEqual({
+      marginTop: 10,
+      marginRight: 'var(--horizontal)',
+      marginBottom: 20,
+      marginLeft: 'var(--horizontal)',
+    })
+  })
+
+  it('transforms border-radius with multiple var() values', () => {
+    expect(
+      transformCss([
+        ['border-radius', 'var(--tl) var(--tr) var(--br) var(--bl)'],
+      ])
+    ).toEqual({
+      borderTopLeftRadius: 'var(--tl)',
+      borderTopRightRadius: 'var(--tr)',
+      borderBottomRightRadius: 'var(--br)',
+      borderBottomLeftRadius: 'var(--bl)',
+    })
+  })
+
+  it('transforms border-width with multiple var() values', () => {
+    expect(
+      transformCss([
+        ['border-width', 'var(--top) var(--right) var(--bottom) var(--left)'],
+      ])
+    ).toEqual({
+      borderTopWidth: 'var(--top)',
+      borderRightWidth: 'var(--right)',
+      borderBottomWidth: 'var(--bottom)',
+      borderLeftWidth: 'var(--left)',
+    })
+  })
+})
+
+// =============================================================================
+// Animation with var()
+// =============================================================================
+
+describe('animation with var()', () => {
+  it('transforms animation-duration with var()', () => {
+    expect(
+      transformCss([['animation-duration', 'var(--duration, 300ms)']])
+    ).toEqual({
+      animationDuration: 'var(--duration, 300ms)',
+    })
+  })
+
+  it('transforms animation-delay with var()', () => {
+    expect(
+      transformCss([['animation-delay', 'var(--delay, 100ms)']])
+    ).toEqual({
+      animationDelay: 'var(--delay, 100ms)',
+    })
+  })
+
+  it('transforms animation-name with var()', () => {
+    expect(transformCss([['animation-name', 'var(--animation)']])).toEqual({
+      animationName: 'var(--animation)',
+    })
+  })
+
+  it('transforms animation shorthand with var() for duration', () => {
+    expect(
+      transformCss([['animation', 'fadeIn var(--duration, 300ms) ease']])
+    ).toEqual({
+      animationName: 'fadeIn',
+      animationDuration: 'var(--duration, 300ms)',
+      animationTimingFunction: 'ease',
+      animationDelay: '0s',
+      animationIterationCount: 1,
+      animationDirection: 'normal',
+      animationFillMode: 'none',
+      animationPlayState: 'running',
+    })
+  })
+
+  it('transforms multiple animation values with var()', () => {
+    expect(
+      transformCss([
+        ['animation-duration', 'var(--dur1), var(--dur2)'],
+      ])
+    ).toEqual({
+      animationDuration: ['var(--dur1)', 'var(--dur2)'],
+    })
+  })
+})
+
+// =============================================================================
+// Transition with var()
+// =============================================================================
+
+describe('transition with var()', () => {
+  it('transforms transition-duration with var()', () => {
+    expect(
+      transformCss([['transition-duration', 'var(--duration, 300ms)']])
+    ).toEqual({
+      transitionDuration: 'var(--duration, 300ms)',
+    })
+  })
+
+  it('transforms transition-delay with var()', () => {
+    expect(
+      transformCss([['transition-delay', 'var(--delay, 100ms)']])
+    ).toEqual({
+      transitionDelay: 'var(--delay, 100ms)',
+    })
+  })
+
+  it('transforms transition shorthand with var() for duration', () => {
+    expect(
+      transformCss([['transition', 'opacity var(--duration, 300ms) ease']])
+    ).toEqual({
+      transitionProperty: 'opacity',
+      transitionDuration: 'var(--duration, 300ms)',
+      transitionTimingFunction: 'ease',
+      transitionDelay: '0s',
+    })
+  })
+
+  it('transforms multiple transition values with var()', () => {
+    expect(
+      transformCss([['transition-duration', 'var(--dur1), var(--dur2)']])
+    ).toEqual({
+      transitionDuration: ['var(--dur1)', 'var(--dur2)'],
+    })
+  })
+
+  it('transforms transition with var() for delay', () => {
+    expect(
+      transformCss([['transition', 'opacity 300ms ease var(--delay)']])
+    ).toEqual({
+      transitionProperty: 'opacity',
+      transitionDuration: '300ms',
+      transitionTimingFunction: 'ease',
+      transitionDelay: 'var(--delay)',
+    })
+  })
+})
+
+// =============================================================================
+// Edge cases with var() fallbacks containing commas
+// =============================================================================
+
+describe('var() with complex fallbacks', () => {
+  it('handles var() with rgba fallback containing commas', () => {
+    expect(
+      transformCss([['color', 'var(--color, rgba(100, 100, 100, 0.5))']])
+    ).toEqual({
+      color: 'var(--color, rgba(100, 100, 100, 0.5))',
+    })
+  })
+
+  it('handles var() with rgb fallback containing commas', () => {
+    expect(
+      transformCss([['color', 'var(--color, rgb(100, 100, 100))']])
+    ).toEqual({
+      color: 'var(--color, rgb(100, 100, 100))',
+    })
+  })
+
+  it('handles nested var() fallbacks', () => {
+    // This might not work but let's test it
+    expect(
+      transformCss([['color', 'var(--primary, var(--fallback, red))']])
+    ).toEqual({
+      color: 'var(--primary, var(--fallback, red))',
+    })
+  })
+})

package/src/tokenTypes.js

@@ -29,7 +29,8 @@ const matchColor = node => {
 
 const matchVariable = node => {
   if (
-    (node.type !== 'function' && node.value !== 'var') ||
+    node.type !== 'function' ||
+    node.value !== 'var' ||
     node.nodes.length === 0
   )
     return null

package/src/transforms/animation.js

@@ -1,4 +1,4 @@
-import { SPACE, COMMA, IDENT, TIME, NUMBER, NONE } from '../tokenTypes'
+import { SPACE, COMMA, IDENT, TIME, NUMBER, NONE, VARIABLE } from '../tokenTypes'
 
 // Timing function keywords
 const timingFunctionKeywords = [
@@ -67,7 +67,7 @@ const parseCommaSeparatedValues = (tokenStream, parseValue) => {
 // Transform for animation-name property
 export const animationName = tokenStream => {
   const names = parseCommaSeparatedValues(tokenStream, ts =>
-    ts.expect(IDENT, NONE)
+    ts.expect(IDENT, NONE, VARIABLE)
   )
   return { animationName: names }
 }
@@ -75,7 +75,7 @@ export const animationName = tokenStream => {
 // Transform for animation-duration property
 export const animationDuration = tokenStream => {
   const durations = parseCommaSeparatedValues(tokenStream, ts =>
-    ts.expect(TIME)
+    ts.expect(TIME, VARIABLE)
   )
   return { animationDuration: durations }
 }
@@ -107,7 +107,9 @@ export const animationTimingFunction = tokenStream => {
 
 // Transform for animation-delay property
 export const animationDelay = tokenStream => {
-  const delays = parseCommaSeparatedValues(tokenStream, ts => ts.expect(TIME))
+  const delays = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(TIME, VARIABLE)
+  )
   return { animationDelay: delays }
 }
 
@@ -222,6 +224,17 @@ export default tokenStream => {
         continue
       }
 
+      // Match time or variable (for duration/delay) - check before functions
+      if (tokenStream.matches(TIME) || tokenStream.matches(VARIABLE)) {
+        const value = tokenStream.lastValue
+        if (duration === null) {
+          duration = value
+        } else {
+          delay = value
+        }
+        continue
+      }
+
       // Check for timing function (cubic-bezier or steps)
       const funcStream = tokenStream.matchesFunction()
       if (funcStream) {
@@ -247,17 +260,6 @@ export default tokenStream => {
         continue
       }
 
-      // Match time
-      if (tokenStream.matches(TIME)) {
-        const value = tokenStream.lastValue
-        if (duration === null) {
-          duration = value
-        } else {
-          delay = value
-        }
-        continue
-      }
-
       // Match identifier
       if (tokenStream.matches(IDENT)) {
         const value = tokenStream.lastValue

package/src/transforms/index.js

@@ -53,7 +53,7 @@ const borderRadius = directionFactory({
 })
 const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
 const margin = directionFactory({
-  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
+  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO, VARIABLE],
   prefix: 'margin',
 })
 const padding = directionFactory({ prefix: 'padding' })

package/src/transforms/transform.js

@@ -1,4 +1,12 @@
-import { SPACE, COMMA, LENGTH, NUMBER, ANGLE, PERCENT } from '../tokenTypes'
+import {
+  SPACE,
+  COMMA,
+  LENGTH,
+  NUMBER,
+  ANGLE,
+  PERCENT,
+  VARIABLE,
+} from '../tokenTypes'
 
 const oneOfTypes = tokenTypes => functionStream => {
   const value = functionStream.expect(...tokenTypes)
@@ -6,9 +14,9 @@ const oneOfTypes = tokenTypes => functionStream => {
   return value
 }
 
-const singleNumber = oneOfTypes([NUMBER])
-const singleLengthOrPercent = oneOfTypes([LENGTH, PERCENT])
-const singleAngle = oneOfTypes([ANGLE])
+const singleNumber = oneOfTypes([NUMBER, VARIABLE])
+const singleLengthOrPercent = oneOfTypes([LENGTH, PERCENT, VARIABLE])
+const singleAngle = oneOfTypes([ANGLE, VARIABLE])
 const xyTransformFactory = tokenTypes => (
   key,
   valueIfOmitted
@@ -31,9 +39,9 @@ const xyTransformFactory = tokenTypes => (
 
   return [{ [`${key}Y`]: y }, { [`${key}X`]: x }]
 }
-const xyNumber = xyTransformFactory([NUMBER])
-const xyLengthOrPercent = xyTransformFactory([LENGTH, PERCENT])
-const xyAngle = xyTransformFactory([ANGLE])
+const xyNumber = xyTransformFactory([NUMBER, VARIABLE])
+const xyLengthOrPercent = xyTransformFactory([LENGTH, PERCENT, VARIABLE])
+const xyAngle = xyTransformFactory([ANGLE, VARIABLE])
 
 const partTransforms = {
   perspective: singleNumber,

package/src/transforms/transition.js

@@ -1,5 +1,5 @@
 import camelizeStyleName from 'camelize'
-import { SPACE, COMMA, IDENT, TIME, NONE } from '../tokenTypes'
+import { SPACE, COMMA, IDENT, TIME, NONE, VARIABLE } from '../tokenTypes'
 
 // Timing function keywords
 const timingFunctionKeywords = [
@@ -65,7 +65,7 @@ export const transitionProperty = tokenStream => {
 // Transform for transition-duration
 export const transitionDuration = tokenStream => {
   const durations = parseCommaSeparatedValues(tokenStream, ts =>
-    ts.expect(TIME)
+    ts.expect(TIME, VARIABLE)
   )
   return { transitionDuration: durations }
 }
@@ -97,7 +97,9 @@ export const transitionTimingFunction = tokenStream => {
 
 // Transform for transition-delay
 export const transitionDelay = tokenStream => {
-  const delays = parseCommaSeparatedValues(tokenStream, ts => ts.expect(TIME))
+  const delays = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(TIME, VARIABLE)
+  )
   return { transitionDelay: delays }
 }
 
@@ -158,10 +160,20 @@ export default tokenStream => {
         continue
       }
 
+      // Match time or variable (for duration/delay) - check before functions
+      if (tokenStream.matches(TIME) || tokenStream.matches(VARIABLE)) {
+        const value = tokenStream.lastValue
+        if (duration === null) {
+          duration = value
+        } else {
+          delay = value
+        }
+        continue
+      }
+
       // Check for timing function (cubic-bezier or steps)
       const funcStream = tokenStream.matchesFunction()
       if (funcStream) {
-        // It's a function like cubic-bezier() or steps()
         const funcName = funcStream.functionName
         const args = []
         while (funcStream.hasTokens()) {
@@ -189,16 +201,6 @@ export default tokenStream => {
         continue
       }
 
-      if (tokenStream.matches(TIME)) {
-        const value = tokenStream.lastValue
-        if (duration === null) {
-          duration = value
-        } else {
-          delay = value
-        }
-        continue
-      }
-
       // Try to match as word for property names like 'all', 'opacity', etc.
       const wordMatch = tokenStream.expect(node => {
         if (node.type === 'word') return node.value

package/src/transforms/util.js

@@ -9,7 +9,7 @@ import {
 } from '../tokenTypes'
 
 export const directionFactory = ({
-  types = [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT],
+  types = [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, VARIABLE],
   directions = ['Top', 'Right', 'Bottom', 'Left'],
   prefix = '',
   suffix = '',
@@ -68,10 +68,13 @@ export const parseShadow = tokenStream => {
       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)
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      // 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) &&
@@ -81,6 +84,25 @@ export const parseShadow = tokenStream => {
       } 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
+      const 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))