Move separator to top level config option

__tests__/processPlugins.test.js

@@ -10,9 +10,7 @@ function makeConfig(overrides) {
   return _.defaultsDeep(overrides, {
     prefix: '',
     important: false,
-    options: {
-      separator: ':',
-    },
+    separator: ':',
   })
 }
 

__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' })
   })

defaultConfig.stub.js

@@ -973,8 +973,8 @@ module.exports = {
 
   prefix: '',
   important: false,
+  separator: ':',
   options: {
-    separator: ':',
   },
 
 }

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

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 =>