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

package/src/__tests__/transition.js

@@ -0,0 +1,186 @@
+import transformCss from '..'
+
+it('transforms transition shorthand', () => {
+  expect(transformCss([['transition', 'opacity 300ms ease']])).toEqual({
+    transitionProperty: 'opacity',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'ease',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms transition with only property and duration', () => {
+  expect(transformCss([['transition', 'opacity 300ms']])).toEqual({
+    transitionProperty: 'opacity',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'ease',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms transition property names to camelCase', () => {
+  expect(transformCss([['transition', 'background-color 300ms']])).toEqual({
+    transitionProperty: 'backgroundColor',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'ease',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms multiple transition property names to camelCase', () => {
+  expect(
+    transformCss([
+      ['transition', 'background-color 300ms, border-radius 500ms ease-out'],
+    ])
+  ).toEqual({
+    transitionProperty: ['backgroundColor', 'borderRadius'],
+    transitionDuration: ['300ms', '500ms'],
+    transitionTimingFunction: ['ease', 'ease-out'],
+    transitionDelay: ['0s', '0s'],
+  })
+})
+
+it('transforms transition with delay', () => {
+  expect(transformCss([['transition', 'opacity 300ms ease 100ms']])).toEqual({
+    transitionProperty: 'opacity',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'ease',
+    transitionDelay: '100ms',
+  })
+})
+
+it('transforms transition with all property', () => {
+  expect(transformCss([['transition', 'all 200ms linear']])).toEqual({
+    transitionProperty: 'all',
+    transitionDuration: '200ms',
+    transitionTimingFunction: 'linear',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms multiple transitions', () => {
+  expect(
+    transformCss([
+      ['transition', 'opacity 300ms ease, transform 500ms ease-in'],
+    ])
+  ).toEqual({
+    transitionProperty: ['opacity', 'transform'],
+    transitionDuration: ['300ms', '500ms'],
+    transitionTimingFunction: ['ease', 'ease-in'],
+    transitionDelay: ['0s', '0s'],
+  })
+})
+
+it('transforms transition with cubic-bezier', () => {
+  expect(
+    transformCss([['transition', 'opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)']])
+  ).toEqual({
+    transitionProperty: 'opacity',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms transition none', () => {
+  expect(transformCss([['transition', 'none']])).toEqual({
+    transitionProperty: 'none',
+    transitionDuration: '0s',
+    transitionTimingFunction: 'ease',
+    transitionDelay: '0s',
+  })
+})
+
+it('transforms transition-property', () => {
+  expect(transformCss([['transition-property', 'opacity']])).toEqual({
+    transitionProperty: 'opacity',
+  })
+})
+
+it('transforms transition-property with multiple values', () => {
+  expect(
+    transformCss([['transition-property', 'opacity, transform, width']])
+  ).toEqual({
+    transitionProperty: ['opacity', 'transform', 'width'],
+  })
+})
+
+it('transforms transition-property with camelCase conversion', () => {
+  expect(
+    transformCss([['transition-property', 'background-color, border-radius']])
+  ).toEqual({
+    transitionProperty: ['backgroundColor', 'borderRadius'],
+  })
+})
+
+it('transforms transition-duration', () => {
+  expect(transformCss([['transition-duration', '300ms']])).toEqual({
+    transitionDuration: '300ms',
+  })
+})
+
+it('transforms transition-duration with multiple values', () => {
+  expect(transformCss([['transition-duration', '300ms, 500ms, 1s']])).toEqual({
+    transitionDuration: ['300ms', '500ms', '1s'],
+  })
+})
+
+it('transforms transition-timing-function', () => {
+  expect(transformCss([['transition-timing-function', 'ease-in-out']])).toEqual(
+    {
+      transitionTimingFunction: 'ease-in-out',
+    }
+  )
+})
+
+it('transforms transition-timing-function with multiple values', () => {
+  expect(
+    transformCss([['transition-timing-function', 'ease, linear, ease-in-out']])
+  ).toEqual({
+    transitionTimingFunction: ['ease', 'linear', 'ease-in-out'],
+  })
+})
+
+it('transforms transition-timing-function with cubic-bezier', () => {
+  expect(
+    transformCss([
+      ['transition-timing-function', 'cubic-bezier(0.4, 0, 0.2, 1)'],
+    ])
+  ).toEqual({
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  })
+})
+
+it('transforms transition-delay', () => {
+  expect(transformCss([['transition-delay', '100ms']])).toEqual({
+    transitionDelay: '100ms',
+  })
+})
+
+it('transforms transition-delay with multiple values', () => {
+  expect(transformCss([['transition-delay', '100ms, 200ms, 0s']])).toEqual({
+    transitionDelay: ['100ms', '200ms', '0s'],
+  })
+})
+
+it('transforms transition with seconds', () => {
+  expect(transformCss([['transition', 'opacity 1s linear 0.5s']])).toEqual({
+    transitionProperty: 'opacity',
+    transitionDuration: '1s',
+    transitionTimingFunction: 'linear',
+    transitionDelay: '0.5s',
+  })
+})
+
+it('transforms multiple transitions with different timing functions', () => {
+  expect(
+    transformCss([
+      ['transition', 'width 200ms ease-in, height 300ms ease-out 100ms'],
+    ])
+  ).toEqual({
+    transitionProperty: ['width', 'height'],
+    transitionDuration: ['200ms', '300ms'],
+    transitionTimingFunction: ['ease-in', 'ease-out'],
+    transitionDelay: ['0s', '100ms'],
+  })
+})

package/src/__tests__/units.js

@@ -117,10 +117,7 @@ lengthUnits.forEach(unit => {
     expect(
       transformCss([['box-shadow', `10px ${value} ${value} red`]])
     ).toEqual({
-      shadowOffset: { width: 10, height: value },
-      shadowRadius: value,
-      shadowColor: 'red',
-      shadowOpacity: 1,
+      boxShadow: `10px ${value} ${value} red`,
     })
   })
 })

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

@@ -73,6 +73,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 +106,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)