diff --git a/__tests__/parseObjectStyles.test.js b/__tests__/parseObjectStyles.test.js index 39e88bfc6f7b..db10915cc9c4 100644 --- a/__tests__/parseObjectStyles.test.js +++ b/__tests__/parseObjectStyles.test.js @@ -123,6 +123,32 @@ test('it parses nested media queries', () => { `) }) +test('it bubbles nested screen rules', () => { + const result = parseObjectStyles({ + '.foo': { + backgroundColor: 'red', + color: 'white', + padding: '1rem', + '@screen sm': { + backgroundColor: 'orange', + }, + }, + }) + + expect(css(result)).toMatchCss(` + .foo { + background-color: red; + color: white; + padding: 1rem; + } + @screen sm { + .foo { + background-color: orange; + } + } + `) +}) + test('it parses pseudo-selectors in nested media queries', () => { const result = parseObjectStyles({ '.foo': { diff --git a/src/util/parseObjectStyles.js b/src/util/parseObjectStyles.js index d57fbbb1cd49..a20fc259919a 100644 --- a/src/util/parseObjectStyles.js +++ b/src/util/parseObjectStyles.js @@ -8,8 +8,13 @@ export default function parseObjectStyles(styles) { return parseObjectStyles([styles]) } - return _.flatMap( - styles, - style => postcss([postcssNested({ bubble: ['screen'] })]).process(style, { parser: postcssJs }).root.nodes - ) + return _.flatMap(styles, style => { + return postcss([ + postcssNested({ + bubble: ['screen'], + }), + ]).process(style, { + parser: postcssJs, + }).root.nodes + }) }