fix(lib): correctly handle arrays in felaSanitizeCssPlugin

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - The border color of the Icon is inherited if no value is provided for the `color` and `borderColor` variables @mnajdova ([#569](https://github.com/stardust-ui/react/pull/569))
 - Do not focus `Popup`'s trigger on outside click @sophieH29 ([#578](https://github.com/stardust-ui/react/pull/578))
 - Add `https` protocol to all urls used in the scripts and stylesheets in index.ejs @mnajdova ([#571](https://github.com/stardust-ui/react/pull/571))
+- Fix support for fallback values in styles (`color: ['#ccc', 'rgba(0, 0, 0, 0.5)']`) @miroslavstastny ([#573](https://github.com/stardust-ui/react/pull/573))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

src/lib/felaSanitizeCssPlugin.ts

@@ -39,21 +39,21 @@ export default (config?: { skip?: string[] }) => {
   const cssPropertiesToSkip = [...((config && config.skip) || [])]
 
   const sanitizeCssStyleObject = styles => {
-    const processedStyles = {}
+    const processedStyles = Array.isArray(styles) ? [] : {}
 
-    Object.keys(styles).forEach(cssPropertyName => {
-      const cssPropertyValue = styles[cssPropertyName]
+    Object.keys(styles).forEach(cssPropertyNameOrIndex => {
+      const cssPropertyValue = styles[cssPropertyNameOrIndex]
 
       if (typeof cssPropertyValue === 'object') {
-        processedStyles[cssPropertyName] = sanitizeCssStyleObject(cssPropertyValue)
+        processedStyles[cssPropertyNameOrIndex] = sanitizeCssStyleObject(cssPropertyValue)
         return
       }
 
       const isPropertyToSkip = cssPropertiesToSkip.some(
-        propToExclude => propToExclude === cssPropertyName,
+        propToExclude => propToExclude === cssPropertyNameOrIndex,
       )
       if (isPropertyToSkip || isValidCssValue(cssPropertyValue)) {
-        processedStyles[cssPropertyName] = cssPropertyValue
+        processedStyles[cssPropertyNameOrIndex] = cssPropertyValue
       }
     })
 

test/specs/lib/felaSanitizeCssPlugin-test.ts

@@ -62,4 +62,27 @@ describe('felaSanitizeCssPlugin', () => {
 
     assertCssPropertyValue(`url('../../lib')`, true)
   })
+
+  describe('if array is passed', () => {
+    test('should process the array without conversion to an object', () => {
+      const style = {
+        color: ['red', 'blue'],
+        ':hover': { color: 'red' },
+        display: 'block',
+      }
+
+      expect(sanitize(style)).toEqual(style)
+    })
+
+    test('should sanitize its items and remove invalid ones', () => {
+      const style = {
+        color: ['red', 'blue', 'rgba('],
+        display: 'block',
+      }
+      expect(sanitize(style)).toEqual({
+        color: ['red', 'blue'],
+        display: 'block',
+      })
+    })
+  })
 })