diff --git a/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js b/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js index ed6ab2566..82d687b96 100644 --- a/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js +++ b/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js @@ -99,4 +99,20 @@ describe('multiple-selectors plugin', () => { }, }) }) + + it('should not resolve relative selector lists', () => { + const style = { + ':not(:hover, :focus)': { + color: 'blue', + fontSize: 12, + }, + } + + expect(multipleSelectors()(style)).toEqual({ + ':not(:hover, :focus)': { + color: 'blue', + fontSize: 12, + }, + }) + }) }) diff --git a/packages/fela-plugin-multiple-selectors/src/index.js b/packages/fela-plugin-multiple-selectors/src/index.js index 535b932ec..66d2f4a3e 100644 --- a/packages/fela-plugin-multiple-selectors/src/index.js +++ b/packages/fela-plugin-multiple-selectors/src/index.js @@ -6,7 +6,9 @@ function multipleSelectorsPlugin(style) { if (isPlainObject(value)) { const resolvedValue = multipleSelectorsPlugin(value) - const selectors = property.split(',') + // split on commas, but not within a relative selector list + // e.g. ":hover, :focus", but not ":where(:hover, :focus)" + const selectors = property.split(/(? 1) { arrayEach(selectors, (selector) => {