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

package/package.json

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

package/src/__tests__/animation.js

@@ -0,0 +1,417 @@
+import transformCss from '..'
+
+it('transforms animation shorthand', () => {
+  expect(transformCss([['animation', 'fadeIn 300ms ease']])).toEqual({
+    animationName: 'fadeIn',
+    animationDuration: '300ms',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('transforms animation with all properties', () => {
+  expect(
+    transformCss([
+      [
+        'animation',
+        'slideIn 500ms ease-in-out 100ms infinite alternate forwards paused',
+      ],
+    ])
+  ).toEqual({
+    animationName: 'slideIn',
+    animationDuration: '500ms',
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '100ms',
+    animationIterationCount: 'infinite',
+    animationDirection: 'alternate',
+    animationFillMode: 'forwards',
+    animationPlayState: 'paused',
+  })
+})
+
+it('transforms multiple animations', () => {
+  expect(
+    transformCss([['animation', 'fadeIn 300ms ease, slideIn 500ms linear']])
+  ).toEqual({
+    animationName: ['fadeIn', 'slideIn'],
+    animationDuration: ['300ms', '500ms'],
+    animationTimingFunction: ['ease', 'linear'],
+    animationDelay: ['0s', '0s'],
+    animationIterationCount: [1, 1],
+    animationDirection: ['normal', 'normal'],
+    animationFillMode: ['none', 'none'],
+    animationPlayState: ['running', 'running'],
+  })
+})
+
+it('transforms animation none', () => {
+  expect(transformCss([['animation', 'none']])).toEqual({
+    animationName: 'none',
+    animationDuration: '0s',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('transforms animation-name', () => {
+  expect(transformCss([['animation-name', 'fadeIn']])).toEqual({
+    animationName: 'fadeIn',
+  })
+})
+
+it('transforms animation-name with multiple animations', () => {
+  expect(transformCss([['animation-name', 'fadeIn, slideIn']])).toEqual({
+    animationName: ['fadeIn', 'slideIn'],
+  })
+})
+
+it('inlines @keyframes into animation-name', () => {
+  expect(
+    transformCss([
+      ['@keyframes fadeIn', 'from { opacity: 0; } to { opacity: 1; }'],
+      ['animation-name', 'fadeIn'],
+    ])
+  ).toEqual({
+    animationName: { from: { opacity: 0 }, to: { opacity: 1 } },
+  })
+})
+
+it('inlines @keyframes for multiple animation-name values', () => {
+  expect(
+    transformCss([
+      ['@keyframes fadeIn', 'from { opacity: 0; } to { opacity: 1; }'],
+      [
+        '@keyframes slideIn',
+        'from { transform: translateX(-100px); } to { transform: translateX(0px); }',
+      ],
+      ['animation-name', 'fadeIn, slideIn'],
+    ])
+  ).toEqual({
+    animationName: [
+      { from: { opacity: 0 }, to: { opacity: 1 } },
+      {
+        from: { transform: [{ translateX: -100 }] },
+        to: { transform: [{ translateX: 0 }] },
+      },
+    ],
+  })
+})
+
+it('transforms animation-duration', () => {
+  expect(transformCss([['animation-duration', '300ms']])).toEqual({
+    animationDuration: '300ms',
+  })
+})
+
+it('transforms animation-duration with multiple values', () => {
+  expect(transformCss([['animation-duration', '300ms, 500ms, 1s']])).toEqual({
+    animationDuration: ['300ms', '500ms', '1s'],
+  })
+})
+
+it('transforms animation-timing-function', () => {
+  expect(transformCss([['animation-timing-function', 'ease-in-out']])).toEqual({
+    animationTimingFunction: 'ease-in-out',
+  })
+})
+
+it('transforms animation-timing-function with multiple values', () => {
+  expect(
+    transformCss([['animation-timing-function', 'ease, linear, ease-in-out']])
+  ).toEqual({
+    animationTimingFunction: ['ease', 'linear', 'ease-in-out'],
+  })
+})
+
+it('transforms animation-timing-function with cubic-bezier', () => {
+  expect(
+    transformCss([
+      ['animation-timing-function', 'cubic-bezier(0.4, 0, 0.2, 1)'],
+    ])
+  ).toEqual({
+    animationTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  })
+})
+
+it('transforms animation-delay', () => {
+  expect(transformCss([['animation-delay', '100ms']])).toEqual({
+    animationDelay: '100ms',
+  })
+})
+
+it('transforms animation-delay with multiple values', () => {
+  expect(transformCss([['animation-delay', '100ms, 200ms, 0s']])).toEqual({
+    animationDelay: ['100ms', '200ms', '0s'],
+  })
+})
+
+it('transforms animation-iteration-count', () => {
+  expect(transformCss([['animation-iteration-count', 'infinite']])).toEqual({
+    animationIterationCount: 'infinite',
+  })
+})
+
+it('transforms animation-iteration-count with multiple values', () => {
+  expect(
+    transformCss([['animation-iteration-count', 'infinite, 2, 3']])
+  ).toEqual({
+    animationIterationCount: ['infinite', 2, 3],
+  })
+})
+
+it('transforms animation-direction', () => {
+  expect(transformCss([['animation-direction', 'alternate']])).toEqual({
+    animationDirection: 'alternate',
+  })
+})
+
+it('transforms animation-direction with multiple values', () => {
+  expect(
+    transformCss([['animation-direction', 'alternate, reverse, normal']])
+  ).toEqual({
+    animationDirection: ['alternate', 'reverse', 'normal'],
+  })
+})
+
+it('transforms animation-fill-mode', () => {
+  expect(transformCss([['animation-fill-mode', 'forwards']])).toEqual({
+    animationFillMode: 'forwards',
+  })
+})
+
+it('transforms animation-fill-mode with multiple values', () => {
+  expect(
+    transformCss([['animation-fill-mode', 'forwards, backwards, both']])
+  ).toEqual({
+    animationFillMode: ['forwards', 'backwards', 'both'],
+  })
+})
+
+it('transforms animation-play-state', () => {
+  expect(transformCss([['animation-play-state', 'paused']])).toEqual({
+    animationPlayState: 'paused',
+  })
+})
+
+it('transforms animation-play-state with multiple values', () => {
+  expect(
+    transformCss([['animation-play-state', 'paused, running, paused']])
+  ).toEqual({
+    animationPlayState: ['paused', 'running', 'paused'],
+  })
+})
+
+it('inlines @keyframes into animationName', () => {
+  expect(
+    transformCss([
+      ['@keyframes fadeIn', 'from { opacity: 0; } to { opacity: 1; }'],
+      ['animation', 'fadeIn 300ms ease'],
+    ])
+  ).toEqual({
+    animationName: { from: { opacity: 0 }, to: { opacity: 1 } },
+    animationDuration: '300ms',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('inlines @keyframes with percentages', () => {
+  expect(
+    transformCss([
+      [
+        '@keyframes pulse',
+        '0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }',
+      ],
+      ['animation', 'pulse 1s infinite'],
+    ])
+  ).toEqual({
+    animationName: {
+      '0%': { opacity: 1 },
+      '50%': { opacity: 0.5 },
+      '100%': { opacity: 1 },
+    },
+    animationDuration: '1s',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 'infinite',
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('inlines @keyframes with transform', () => {
+  expect(
+    transformCss([
+      [
+        '@keyframes slideIn',
+        'from { transform: translateX(-100px); } to { transform: translateX(0px); }',
+      ],
+      ['animation', 'slideIn 500ms ease-out'],
+    ])
+  ).toEqual({
+    animationName: {
+      from: { transform: [{ translateX: -100 }] },
+      to: { transform: [{ translateX: 0 }] },
+    },
+    animationDuration: '500ms',
+    animationTimingFunction: 'ease-out',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('inlines multiple @keyframes for multiple animations', () => {
+  expect(
+    transformCss([
+      ['@keyframes fadeIn', 'from { opacity: 0; } to { opacity: 1; }'],
+      [
+        '@keyframes slideIn',
+        'from { transform: translateX(-100px); } to { transform: translateX(0px); }',
+      ],
+      ['animation', 'fadeIn 300ms ease, slideIn 500ms linear'],
+    ])
+  ).toEqual({
+    animationName: [
+      { from: { opacity: 0 }, to: { opacity: 1 } },
+      {
+        from: { transform: [{ translateX: -100 }] },
+        to: { transform: [{ translateX: 0 }] },
+      },
+    ],
+    animationDuration: ['300ms', '500ms'],
+    animationTimingFunction: ['ease', 'linear'],
+    animationDelay: ['0s', '0s'],
+    animationIterationCount: [1, 1],
+    animationDirection: ['normal', 'normal'],
+    animationFillMode: ['none', 'none'],
+    animationPlayState: ['running', 'running'],
+  })
+})
+
+it('keeps animation name as string if no matching @keyframes', () => {
+  expect(transformCss([['animation', 'unknownAnimation 300ms ease']])).toEqual({
+    animationName: 'unknownAnimation',
+    animationDuration: '300ms',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('handles animation with numeric iteration count', () => {
+  expect(transformCss([['animation', 'bounce 1s ease 3']])).toEqual({
+    animationName: 'bounce',
+    animationDuration: '1s',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 3,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('handles @keyframes with multiple selectors', () => {
+  expect(
+    transformCss([
+      [
+        '@keyframes bounce',
+        '0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); }',
+      ],
+      ['animation', 'bounce 1s infinite'],
+    ])
+  ).toEqual({
+    animationName: {
+      '0%': { transform: [{ translateY: 0 }] },
+      '100%': { transform: [{ translateY: 0 }] },
+      '50%': { transform: [{ translateY: -20 }] },
+    },
+    animationDuration: '1s',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 'infinite',
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('handles @keyframes with CSS comments', () => {
+  expect(
+    transformCss([
+      [
+        '@keyframes fadeIn',
+        `
+          /* Start state */
+          from {
+            opacity: 0; /* fully transparent */
+          }
+          /* End state */
+          to {
+            opacity: 1; /* fully visible */
+          }
+        `,
+      ],
+      ['animation', 'fadeIn 300ms ease'],
+    ])
+  ).toEqual({
+    animationName: { from: { opacity: 0 }, to: { opacity: 1 } },
+    animationDuration: '300ms',
+    animationTimingFunction: 'ease',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})
+
+it('handles @keyframes with multi-line comments', () => {
+  expect(
+    transformCss([
+      [
+        '@keyframes slide',
+        `
+          /*
+           * This is a multi-line comment
+           * describing the animation
+           */
+          0% { transform: translateX(0px); }
+          100% { transform: translateX(100px); }
+        `,
+      ],
+      ['animation', 'slide 500ms linear'],
+    ])
+  ).toEqual({
+    animationName: {
+      '0%': { transform: [{ translateX: 0 }] },
+      '100%': { transform: [{ translateX: 100 }] },
+    },
+    animationDuration: '500ms',
+    animationTimingFunction: 'linear',
+    animationDelay: '0s',
+    animationIterationCount: 1,
+    animationDirection: 'normal',
+    animationFillMode: 'none',
+    animationPlayState: 'running',
+  })
+})

package/src/__tests__/boxModel.js

@@ -76,7 +76,12 @@ it('transforms margin, allowing unitless zero, percentages', () => {
 })
 
 it('transforms shorthand and overrides previous values', () => {
-  expect(transformCss([['margin-top', '2px'], ['margin', '1px']])).toEqual({
+  expect(
+    transformCss([
+      ['margin-top', '2px'],
+      ['margin', '1px'],
+    ])
+  ).toEqual({
     marginTop: 1,
     marginRight: 1,
     marginBottom: 1,

package/src/__tests__/boxShadow.js

@@ -1,29 +1,32 @@
 import transformCss from '..'
 
-it('transforms box-shadow into shadow- properties', () => {
+it('transforms box-shadow to boxShadow in web format', () => {
   expect(transformCss([['box-shadow', '10px 20px 30px red']])).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 30,
-    shadowColor: 'red',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px 30px red',
   })
 })
 
 it('transforms box-shadow without blur-radius', () => {
   expect(transformCss([['box-shadow', '10px 20px red']])).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'red',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px red',
   })
 })
 
 it('transforms box-shadow without color', () => {
   expect(transformCss([['box-shadow', '10px 20px']])).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'black',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px',
+  })
+})
+
+it('transforms box-shadow with spread radius', () => {
+  expect(transformCss([['box-shadow', '10px 20px 5px 15px red']])).toEqual({
+    boxShadow: '10px 20px 5px 15px red',
+  })
+})
+
+it('transforms box-shadow with inset', () => {
+  expect(transformCss([['box-shadow', 'inset 10px 20px 30px red']])).toEqual({
+    boxShadow: 'inset 10px 20px 30px red',
   })
 })
 
@@ -31,10 +34,7 @@ it('transforms box-shadow with rgb color', () => {
   expect(
     transformCss([['box-shadow', '10px 20px rgb(100, 100, 100)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'rgb(100, 100, 100)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px rgb(100, 100, 100)',
   })
 })
 
@@ -42,54 +42,29 @@ it('transforms box-shadow with rgba color', () => {
   expect(
     transformCss([['box-shadow', '10px 20px rgba(100, 100, 100, 0.5)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'rgba(100, 100, 100, 0.5)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px rgba(100, 100, 100, 0.5)',
   })
 })
 
-it('transforms box-shadow with hsl color', () => {
+it('transforms multiple box-shadows', () => {
   expect(
-    transformCss([['box-shadow', '10px 20px hsl(120, 100%, 50%)']])
+    transformCss([['box-shadow', '10px 20px red, 5px 10px blue']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'hsl(120, 100%, 50%)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px red, 5px 10px blue',
   })
 })
 
-it('transforms box-shadow with hsla color', () => {
-  expect(
-    transformCss([['box-shadow', '10px 20px hsla(120, 100%, 50%, 0.7)']])
-  ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'hsla(120, 100%, 50%, 0.7)',
-    shadowOpacity: 1,
+it('transforms box-shadow none', () => {
+  expect(transformCss([['box-shadow', 'none']])).toEqual({
+    boxShadow: 'none',
   })
 })
 
-it('transforms box-shadow and throws if multiple colors are used', () => {
-  expect(() =>
-    transformCss([['box-shadow', '0 0 0 red yellow green blue']])
-  ).toThrow()
-})
-
-it('transforms box-shadow enforces offset to be present', () => {
-  expect(() => transformCss([['box-shadow', 'red']])).toThrow()
-  expect(() => transformCss([['box-shadow', '10px red']])).toThrow()
-})
-
 it('transforms box-shadow with var() for color', () => {
   expect(
     transformCss([['box-shadow', '10px 20px var(--primary-color)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'var(--primary-color)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px var(--primary-color)',
   })
 })
 
@@ -97,10 +72,7 @@ it('transforms box-shadow with var() and blur-radius', () => {
   expect(
     transformCss([['box-shadow', '10px 20px 30px var(--primary-color)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 30,
-    shadowColor: 'var(--primary-color)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px 30px var(--primary-color)',
   })
 })
 
@@ -108,10 +80,7 @@ it('transforms box-shadow with var() and named color fallback', () => {
   expect(
     transformCss([['box-shadow', '10px 20px var(--primary-color, red)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'var(--primary-color, red)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px var(--primary-color, red)',
   })
 })
 
@@ -119,10 +88,7 @@ it('transforms box-shadow with var() and hex color fallback', () => {
   expect(
     transformCss([['box-shadow', '10px 20px var(--primary-color, #f00)']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'var(--primary-color, #f00)',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px var(--primary-color, #f00)',
   })
 })
 
@@ -132,10 +98,7 @@ it('transforms box-shadow with var() and rgb color fallback', () => {
       ['box-shadow', '10px 20px var(--primary-color, rgb(255, 0, 0))'],
     ])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'var(--primary-color, rgb(255,0,0))',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px var(--primary-color, rgb(255, 0, 0))',
   })
 })
 
@@ -148,10 +111,7 @@ it('transforms box-shadow with var() and rgba color fallback', () => {
       ],
     ])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 0,
-    shadowColor: 'var(--primary-color, rgba(100,100,100,0.5))',
-    shadowOpacity: 1,
+    boxShadow: '10px 20px var(--primary-color, rgba(100, 100, 100, 0.5))',
   })
 })
 
@@ -159,9 +119,6 @@ it('transforms box-shadow with var() color before offset', () => {
   expect(
     transformCss([['box-shadow', 'var(--primary-color) 10px 20px 30px']])
   ).toEqual({
-    shadowOffset: { width: 10, height: 20 },
-    shadowRadius: 30,
-    shadowColor: 'var(--primary-color)',
-    shadowOpacity: 1,
+    boxShadow: 'var(--primary-color) 10px 20px 30px',
   })
 })

package/src/__tests__/index.js

@@ -73,7 +73,12 @@ it('allows boolean values', () => {
 })
 
 it('allows null values', () => {
-  expect(transformCss([['null1', 'null'], ['null2', 'NULL']])).toEqual({
+  expect(
+    transformCss([
+      ['null1', 'null'],
+      ['null2', 'NULL'],
+    ])
+  ).toEqual({
     null1: null,
     null2: null,
   })
@@ -81,7 +86,10 @@ it('allows null values', () => {
 
 it('allows undefined values', () => {
   expect(
-    transformCss([['undefined1', 'undefined'], ['undefined2', 'UNDEFINED']])
+    transformCss([
+      ['undefined1', 'undefined'],
+      ['undefined2', 'UNDEFINED'],
+    ])
   ).toEqual({
     undefined1: undefined,
     undefined2: undefined,