diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 18ae9ffd3..790907e25 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -10,9 +10,7 @@ function makeConfig(overrides) { return _.defaultsDeep(overrides, { prefix: '', important: false, - options: { - separator: ':', - }, + separator: ':', }) } diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js index c13240a67..ba81cdcd8 100644 --- a/__tests__/responsiveAtRule.test.js +++ b/__tests__/responsiveAtRule.test.js @@ -37,9 +37,7 @@ test('it can generate responsive variants', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -77,9 +75,7 @@ test('it can generate responsive variants with a custom separator', () => { md: '750px', lg: '1000px', }, - options: { - separator: '__', - }, + separator: '__', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -117,9 +113,7 @@ test('it can generate responsive variants when classes have non-standard charact md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -163,9 +157,7 @@ test('responsive variants are grouped', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -198,9 +190,7 @@ test('screen prefix is only applied to the last class in a selector', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -233,9 +223,7 @@ test('responsive variants are generated for all selectors in a rule', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).then(result => { expect(result.css).toMatchCss(output) expect(result.warnings().length).toBe(0) @@ -255,9 +243,7 @@ test('selectors with no classes cannot be made responsive', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).catch(e => { expect(e).toMatchObject({ name: 'CssSyntaxError' }) }) @@ -276,9 +262,7 @@ test('all selectors in a rule must contain classes', () => { md: '750px', lg: '1000px', }, - options: { - separator: ':', - }, + separator: ':', }).catch(e => { expect(e).toMatchObject({ name: 'CssSyntaxError' }) }) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 10e185b70..f8a00a791 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -973,8 +973,8 @@ module.exports = { prefix: '', important: false, + separator: ':', options: { - separator: ':', }, } diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js index 95762c310..21195edf1 100644 --- a/src/lib/substituteResponsiveAtRules.js +++ b/src/lib/substituteResponsiveAtRules.js @@ -6,10 +6,9 @@ import buildSelectorVariant from '../util/buildSelectorVariant' export default function(config) { return function(css) { - const screens = config.screens - const separator = config.options.separator + const { screens, separator } = config const responsiveRules = [] - let finalRules = [] + const finalRules = [] css.walkAtRules('responsive', atRule => { const nodes = atRule.nodes diff --git a/src/util/generateVariantFunction.js b/src/util/generateVariantFunction.js index cd7f134b5..616935894 100644 --- a/src/util/generateVariantFunction.js +++ b/src/util/generateVariantFunction.js @@ -10,7 +10,7 @@ export default function generateVariantFunction(generator) { _.defaultTo( generator({ container: cloned, - separator: escapeClassName(config.options.separator), + separator: escapeClassName(config.separator), modifySelectors: modifierFunction => { cloned.walkRules(rule => { rule.selectors = rule.selectors.map(selector =>