Make the hoverable, focusable and responsive separator (default '\:') configurable.

__tests__/focusableAtRule.test.js

@@ -1,7 +1,10 @@
 import postcss from 'postcss'
 import plugin from '../src/lib/substituteFocusableAtRules'
+import config from '../defaultConfig.stub.js'
 
-function run(input, opts = () => {}) {
+const separator = config.options.separator
+
+function run(input, opts = () => config) {
   return postcss([plugin(opts)]).process(input)
 }
 
@@ -16,8 +19,8 @@ test('it adds a focusable variant to each nested class definition', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .focus\\:banana:focus { color: yellow; }
-      .focus\\:chocolate:focus { color: brown; }
+      .focus${separator}banana:focus { color: yellow; }
+      .focus${separator}chocolate:focus { color: brown; }
   `
 
   return run(input).then(result => {

__tests__/hoverableAtRule.test.js

@@ -1,7 +1,10 @@
 import postcss from 'postcss'
 import plugin from '../src/lib/substituteHoverableAtRules'
+import config from '../defaultConfig.stub.js'
 
-function run(input, opts = () => {}) {
+const separator = config.options.separator
+
+function run(input, opts = () => config) {
   return postcss([plugin(opts)]).process(input)
 }
 
@@ -16,8 +19,8 @@ test('it adds a hoverable variant to each nested class definition', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .hover\\:banana:hover { color: yellow; }
-      .hover\\:chocolate:hover { color: brown; }
+      .hover${separator}banana:hover { color: yellow; }
+      .hover${separator}chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {

__tests__/variantsAtRule.test.js

@@ -1,7 +1,10 @@
 import postcss from 'postcss'
 import plugin from '../src/lib/substituteVariantsAtRules'
+import config from '../defaultConfig.stub.js'
 
-function run(input, opts = () => {}) {
+const separator = config.options.separator
+
+function run(input, opts = () => config) {
   return postcss([plugin(opts)]).process(input)
 }
 
@@ -16,8 +19,8 @@ test('it can generate hover variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .hover\\:banana:hover { color: yellow; }
-      .hover\\:chocolate:hover { color: brown; }
+      .hover${separator}banana:hover { color: yellow; }
+      .hover${separator}chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {
@@ -37,8 +40,8 @@ test('it can generate focus variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .focus\\:banana:focus { color: yellow; }
-      .focus\\:chocolate:focus { color: brown; }
+      .focus${separator}banana:focus { color: yellow; }
+      .focus${separator}chocolate:focus { color: brown; }
   `
 
   return run(input).then(result => {
@@ -58,10 +61,10 @@ test('it can generate hover and focus variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .focus\\:banana:focus { color: yellow; }
-      .focus\\:chocolate:focus { color: brown; }
-      .hover\\:banana:hover { color: yellow; }
-      .hover\\:chocolate:hover { color: brown; }
+      .focus${separator}banana:focus { color: yellow; }
+      .focus${separator}chocolate:focus { color: brown; }
+      .hover${separator}banana:hover { color: yellow; }
+      .hover${separator}chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {
@@ -82,10 +85,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
     @responsive {
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .focus\\:banana:focus { color: yellow; }
-      .focus\\:chocolate:focus { color: brown; }
-      .hover\\:banana:hover { color: yellow; }
-      .hover\\:chocolate:hover { color: brown; }
+      .focus${separator}banana:focus { color: yellow; }
+      .focus${separator}chocolate:focus { color: brown; }
+      .hover${separator}banana:hover { color: yellow; }
+      .hover${separator}chocolate:hover { color: brown; }
     }
   `
 

defaultConfig.stub.js

@@ -769,6 +769,7 @@ module.exports = {
 
   options: {
     prefix: '',
+    separator: '\\:',
     important: false,
   },
 

src/lib/substituteFocusableAtRules.js

@@ -1,12 +1,13 @@
-export default function() {
+export default function(config) {
   return function(css) {
+    const separator = config().options.separator
     css.walkAtRules('focusable', atRule => {
       const clonedRule = atRule.clone()
 
       clonedRule.walkRules(rule => {
         // Might be wise to error if the rule has multiple selectors,
         // or weird compound selectors like .bg-blue>p>h1
-        rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
+        rule.selector = `.focus${separator}${rule.selector.slice(1)}:focus`
       })
 
       atRule.before(atRule.clone().nodes)

src/lib/substituteHoverableAtRules.js

@@ -1,12 +1,13 @@
-export default function() {
+export default function(config) {
   return function(css) {
+    const separator = config().options.separator
     css.walkAtRules('hoverable', atRule => {
       const clonedRule = atRule.clone()
 
       clonedRule.walkRules(rule => {
         // Might be wise to error if the rule has multiple selectors,
         // or weird compound selectors like .bg-blue>p>h1
-        rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
+        rule.selector = `.hover${separator}${rule.selector.slice(1)}:hover`
       })
 
       atRule.before(atRule.clone().nodes)

src/lib/substituteResponsiveAtRules.js

@@ -6,6 +6,7 @@ import buildMediaQuery from '../util/buildMediaQuery'
 export default function(config) {
   return function(css) {
     const screens = config().screens
+    const separator = config().options.separator
     const responsiveRules = []
     let finalRules = []
 
@@ -25,7 +26,10 @@ export default function(config) {
       mediaQuery.append(
         responsiveRules.map(rule => {
           const cloned = rule.clone()
-          cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`)
+          cloned.selectors = _.map(
+            rule.selectors,
+            selector => `.${screen}${separator}${selector.slice(1)}`
+          )
           return cloned
         })
       )

src/lib/substituteVariantsAtRules.js

@@ -2,27 +2,29 @@ import _ from 'lodash'
 import postcss from 'postcss'
 
 const variantGenerators = {
-  hover: container => {
+  hover: (separator, container) => {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
+      rule.selector = `.hover${separator}${rule.selector.slice(1)}:hover`
     })
 
     return cloned.nodes
   },
-  focus: container => {
+  focus: (separator, container) => {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
+      rule.selector = `.focus${separator}${rule.selector.slice(1)}:focus`
     })
 
     return cloned.nodes
   },
 }
 
-export default function() {
+export default function(config) {
+  const separator = config().options.separator
+
   return function(css) {
     css.walkAtRules('variants', atRule => {
       const variants = postcss.list.comma(atRule.params)
@@ -37,7 +39,7 @@ export default function() {
 
       _.forEach(['focus', 'hover'], variant => {
         if (variants.includes(variant)) {
-          atRule.before(variantGenerators[variant](atRule))
+          atRule.before(variantGenerators[variant](separator, atRule))
         }
       })