merge base styles with resolved multiple selectors closes #862 (#865)

robinweser · Feb 12, 2021 · 12fa962 · 12fa962
1 parent b319f29
commit 12fa962
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js b/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js
@@ -72,4 +72,31 @@ describe('multiple-selectors plugin', () => {
       },
     })
   })
+
+  it('should merge resolved nested objects', () => {
+    const style = {
+      color: 'blue',
+      ':hover': {
+        color: 'blue',
+        fontSize: 12,
+      },
+      ':hover,:focus': {
+        backgroundColor: 'red',
+        color: 'red',
+      },
+    }
+
+    expect(multipleSelectors()(style)).toEqual({
+      color: 'blue',
+      ':hover': {
+        backgroundColor: 'red',
+        fontSize: 12,
+        color: 'red',
+      },
+      ':focus': {
+        backgroundColor: 'red',
+        color: 'red',
+      },
+    })
+  })
 })
diff --git a/packages/fela-plugin-multiple-selectors/src/index.js b/packages/fela-plugin-multiple-selectors/src/index.js
@@ -11,7 +11,14 @@ function multipleSelectors(style: Object): Object {
         const resolvedValue = multipleSelectors(value)
 
         arrayEach(property.split(','), (selector) => {
-          normalizedStyle[selector.trim()] = resolvedValue
+          const key = selector.trim()
+
+          // merge styles with base styles
+          const baseStyle = normalizedStyle[key] || {}
+          normalizedStyle[key] = {
+            ...baseStyle,
+            ...resolvedValue,
+          }
         })
       } else {
         normalizedStyle[property] = value