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

package/src/index.js

@@ -78,13 +78,141 @@ export const getPropertyName = propName => {
   return camelizeStyleName(propName)
 }
 
-export default (rules, shorthandBlacklist = []) =>
-  rules.reduce((accum, rule) => {
+/**
+ * Strip CSS comments from a string
+ * Handles both single-line and multi-line comments
+ */
+const stripCssComments = css => css.replace(/\/\*[\s\S]*?\*\//g, '')
+
+/**
+ * Parse CSS declarations into React Native styles (for keyframes)
+ */
+const parseKeyframeDeclarations = declarationsStr => {
+  const declarations = []
+  const parts = declarationsStr.split(';')
+
+  for (const part of parts) {
+    const trimmed = part.trim()
+    if (!trimmed) continue
+
+    const colonIndex = trimmed.indexOf(':')
+    if (colonIndex === -1) continue
+
+    const property = trimmed.substring(0, colonIndex).trim()
+    const value = trimmed.substring(colonIndex + 1).trim()
+
+    if (property && value) {
+      declarations.push([property, value])
+    }
+  }
+
+  if (declarations.length === 0) {
+    return {}
+  }
+
+  // Transform each declaration
+  return declarations.reduce((accum, rule) => {
     const propertyName = getPropertyName(rule[0])
     const value = rule[1]
-    const 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
+ */
+const parseKeyframeBody = body => {
+  // Strip CSS comments before parsing
+  const cleanBody = stripCssComments(body)
+
+  const keyframeObject = {}
+  const selectorRegex = /([a-zA-Z0-9%,\s]+)\s*\{\s*([^}]*)\s*\}/g
+  let selectorMatch
+
+  // eslint-disable-next-line no-cond-assign
+  while ((selectorMatch = selectorRegex.exec(cleanBody)) !== null) {
+    const selectors = selectorMatch[1]
+      .split(',')
+      .map(s => s.trim())
+      .filter(s => s)
+    const declarations = selectorMatch[2]
+
+    // Parse CSS declarations into style object
+    const styles = parseKeyframeDeclarations(declarations)
+
+    for (const selector of selectors) {
+      keyframeObject[selector] = styles
+    }
+  }
+
+  return keyframeObject
+}
+
+/**
+ * Check if a property name is a @keyframes rule
+ */
+const isKeyframesRule = propName =>
+  propName.startsWith('@keyframes ') || propName.startsWith('@keyframes\t')
+
+/**
+ * Extract keyframe name from @keyframes rule
+ */
+const getKeyframeName = propName =>
+  propName.replace(/^@keyframes\s+/, '').trim()
+
+export default (rules, shorthandBlacklist = []) => {
+  // First pass: collect @keyframes definitions
+  const keyframesMap = {}
+
+  for (const rule of rules) {
+    const propName = rule[0]
+    if (isKeyframesRule(propName)) {
+      const keyframeName = getKeyframeName(propName)
+      const keyframeBody = rule[1]
+      keyframesMap[keyframeName] = parseKeyframeBody(keyframeBody)
+    }
+  }
+
+  // Second pass: transform all non-keyframes rules
+  const result = {}
+
+  for (const rule of rules) {
+    const propName = rule[0]
+
+    // Skip @keyframes rules in the output
+    if (isKeyframesRule(propName)) {
+      continue
+    }
+
+    const propertyName = getPropertyName(propName)
+    const value = rule[1]
+    const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1
+    const 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(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
+}

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
@@ -73,6 +74,7 @@ const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?=px$))/i
 const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/i
 const angleRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:deg|rad|grad|turn))$/i
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?%)$/i
+const timeRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:ms|s))$/i
 
 const noopToken = predicate => node => (predicate(node) ? '<token>' : null)
 
@@ -105,8 +107,28 @@ export const LENGTH = regExpToken(lengthRe, Number)
 export const UNSUPPORTED_LENGTH_UNIT = regExpToken(unsupportedUnitRe)
 export const ANGLE = regExpToken(angleRe, angle => angle.toLowerCase())
 export const PERCENT = regExpToken(percentRe)
+export const TIME = regExpToken(timeRe)
 export const IDENT = regExpToken(identRe)
 export const STRING = matchString
 export const COLOR = matchColor
 export const LINE = regExpToken(/^(none|underline|line-through)$/i)
 export const VARIABLE = matchVariable
+
+// Animation/Transition timing functions (keywords)
+export const TIMING_FUNCTION = regExpToken(
+  /^(ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end)$/i
+)
+
+// Animation iteration count
+export const ITERATION_COUNT = regExpToken(/^(infinite)$/i)
+
+// Animation direction
+export const ANIMATION_DIRECTION = regExpToken(
+  /^(normal|reverse|alternate|alternate-reverse)$/i
+)
+
+// Animation fill mode
+export const FILL_MODE = regExpToken(/^(none|forwards|backwards|both)$/i)
+
+// Animation play state
+export const PLAY_STATE = regExpToken(/^(running|paused)$/i)

package/src/transforms/animation.js

@@ -0,0 +1,338 @@
+import { SPACE, COMMA, IDENT, TIME, NUMBER, NONE, VARIABLE } from '../tokenTypes'
+
+// Timing function keywords
+const timingFunctionKeywords = [
+  'ease',
+  'linear',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'step-start',
+  'step-end',
+]
+
+// Direction keywords
+const directionKeywords = [
+  'normal',
+  'reverse',
+  'alternate',
+  'alternate-reverse',
+]
+
+// Fill mode keywords
+const fillModeKeywords = ['none', 'forwards', 'backwards', 'both']
+
+// Play state keywords
+const playStateKeywords = ['running', 'paused']
+
+const isTimingFunction = value =>
+  timingFunctionKeywords.includes(value.toLowerCase())
+const isDirection = value => directionKeywords.includes(value.toLowerCase())
+const isFillMode = value => fillModeKeywords.includes(value.toLowerCase())
+const isPlayState = value => playStateKeywords.includes(value.toLowerCase())
+const isTime = value => /^[+-]?(?:\d*\.)?\d+(?:ms|s)$/i.test(value)
+const isIterationCount = value =>
+  value.toLowerCase() === 'infinite' || /^[+-]?(?:\d*\.)?\d+$/.test(value)
+
+// Helper to parse comma-separated values
+// Returns single value if only one, array if multiple
+const parseCommaSeparatedValues = (tokenStream, parseValue) => {
+  const values = []
+  let parsingFirst = true
+
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA)
+    }
+
+    // Skip leading/trailing spaces
+    if (tokenStream.matches(SPACE)) {
+      // continue
+    }
+
+    const value = parseValue(tokenStream)
+    values.push(value)
+
+    // Skip trailing spaces
+    if (tokenStream.matches(SPACE)) {
+      // continue
+    }
+
+    parsingFirst = false
+  }
+
+  return values.length === 1 ? values[0] : values
+}
+
+// Transform for animation-name property
+export const animationName = tokenStream => {
+  const names = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(IDENT, NONE, VARIABLE)
+  )
+  return { animationName: names }
+}
+
+// Transform for animation-duration property
+export const animationDuration = tokenStream => {
+  const durations = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(TIME, VARIABLE)
+  )
+  return { animationDuration: durations }
+}
+
+// Transform for animation-timing-function property
+export const animationTimingFunction = tokenStream => {
+  const timingFunctions = parseCommaSeparatedValues(tokenStream, ts => {
+    // Check for function (cubic-bezier or steps)
+    const funcStream = ts.matchesFunction()
+    if (funcStream) {
+      const funcName = funcStream.functionName
+      const args = []
+      while (funcStream.hasTokens()) {
+        if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+          continue
+        }
+        const val = funcStream.expect(IDENT, TIME, NUMBER, 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
+export const animationDelay = tokenStream => {
+  const delays = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(TIME, VARIABLE)
+  )
+  return { animationDelay: delays }
+}
+
+// Transform for animation-iteration-count property
+export const animationIterationCount = tokenStream => {
+  const counts = parseCommaSeparatedValues(tokenStream, ts => {
+    if (ts.matches(IDENT)) {
+      const value = ts.lastValue
+      return value.toLowerCase() === 'infinite' ? 'infinite' : Number(value)
+    }
+    if (ts.matches(NUMBER)) {
+      return ts.lastValue
+    }
+    const word = ts.expect(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
+export const animationDirection = tokenStream => {
+  const directions = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(IDENT)
+  )
+  return { animationDirection: directions }
+}
+
+// Transform for animation-fill-mode property
+export const animationFillMode = tokenStream => {
+  const fillModes = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(IDENT)
+  )
+  return { animationFillMode: fillModes }
+}
+
+// Transform for animation-play-state property
+export const animationPlayState = tokenStream => {
+  const playStates = parseCommaSeparatedValues(tokenStream, ts =>
+    ts.expect(IDENT)
+  )
+  return { animationPlayState: playStates }
+}
+
+export default 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',
+    }
+  }
+
+  const names = []
+  const durations = []
+  const timingFunctions = []
+  const delays = []
+  const iterationCounts = []
+  const directions = []
+  const fillModes = []
+  const playStates = []
+
+  let parsingFirst = true
+
+  while (tokenStream.hasTokens()) {
+    if (!parsingFirst) {
+      tokenStream.expect(COMMA)
+    }
+
+    // Parse single animation
+    let name = null
+    let duration = null
+    let timingFunction = null
+    let delay = null
+    let iterationCount = null
+    let direction = null
+    let fillMode = null
+    let playState = null
+
+    // Skip leading space
+    if (tokenStream.matches(SPACE)) {
+      // continue
+    }
+
+    // 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)) {
+        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) {
+        const funcName = funcStream.functionName
+        const args = []
+        while (funcStream.hasTokens()) {
+          if (funcStream.matches(SPACE) || funcStream.matches(COMMA)) {
+            continue
+          }
+          const val = funcStream.expect(IDENT, TIME, NUMBER, 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)) {
+        const 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
+      const wordMatch = tokenStream.expect(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
+  const 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,
+  }
+}

package/src/transforms/boxShadow.js

@@ -1,11 +1,10 @@
-import { parseShadow } from './util'
+import { stringify } from 'postcss-value-parser'
 
 export default tokenStream => {
-  const { offset, radius, color } = parseShadow(tokenStream)
+  // React Native now supports web-style box-shadow format directly
+  // Pass through the original CSS value as boxShadow
+  const value = stringify(tokenStream.nodes)
   return {
-    shadowOffset: offset,
-    shadowRadius: radius,
-    shadowColor: color,
-    shadowOpacity: 1,
+    boxShadow: value,
   }
 }

package/src/transforms/index.js

@@ -7,6 +7,16 @@ import {
   WORD,
   VARIABLE,
 } from '../tokenTypes'
+import animation, {
+  animationName,
+  animationDuration,
+  animationTimingFunction,
+  animationDelay,
+  animationIterationCount,
+  animationDirection,
+  animationFillMode,
+  animationPlayState,
+} from './animation'
 import aspectRatio from './aspectRatio'
 import border from './border'
 import boxShadow from './boxShadow'
@@ -20,6 +30,12 @@ import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
 import textShadow from './textShadow'
 import transform from './transform'
+import transition, {
+  transitionProperty,
+  transitionDuration,
+  transitionTimingFunction,
+  transitionDelay,
+} from './transition'
 import { directionFactory, parseShadowOffset } from './util'
 
 const background = tokenStream => ({
@@ -37,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' })
@@ -53,6 +69,15 @@ const textShadowOffset = tokenStream => ({
 })
 
 export default {
+  animation,
+  animationName,
+  animationDuration,
+  animationTimingFunction,
+  animationDelay,
+  animationIterationCount,
+  animationDirection,
+  animationFillMode,
+  animationPlayState,
   aspectRatio,
   background,
   border,
@@ -75,4 +100,9 @@ export default {
   textDecoration,
   textDecorationLine,
   transform,
+  transition,
+  transitionProperty,
+  transitionDuration,
+  transitionTimingFunction,
+  transitionDelay,
 }

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,