[0.3] Escape separator string (tailwindlabs#270)

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -2,8 +2,6 @@ import postcss from 'postcss'
 import plugin from '../src/lib/substituteVariantsAtRules'
 import config from '../defaultConfig.stub.js'
 
-const separator = config.options.separator
-
 function run(input, opts = () => config) {
   return postcss([plugin(opts)]).process(input)
 }
@@ -19,8 +17,8 @@ test('it can generate hover variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .hover${separator}banana:hover { color: yellow; }
-      .hover${separator}chocolate:hover { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {
@@ -40,8 +38,8 @@ test('it can generate focus variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .focus${separator}banana:focus { color: yellow; }
-      .focus${separator}chocolate:focus { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
   `
 
   return run(input).then(result => {
@@ -61,8 +59,8 @@ test('it can generate parent-hover variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .parent:hover .parent-hover${separator}banana { color: yellow; }
-      .parent:hover .parent-hover${separator}chocolate { color: brown; }
+      .parent:hover .parent-hover\\:banana { color: yellow; }
+      .parent:hover .parent-hover\\:chocolate { color: brown; }
   `
 
   return run(input).then(result => {
@@ -82,10 +80,10 @@ test('it can generate hover and focus variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { 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; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {
@@ -106,10 +104,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${separator}banana:focus { color: yellow; }
-      .focus${separator}chocolate:focus { color: brown; }
-      .hover${separator}banana:hover { color: yellow; }
-      .hover${separator}chocolate:hover { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
     }
   `
 

defaultConfig.stub.js

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

src/lib/substituteResponsiveAtRules.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
 import buildMediaQuery from '../util/buildMediaQuery'
+import buildClassVariant from '../util/buildClassVariant'
 
 export default function(config) {
   return function(css) {
@@ -26,9 +27,8 @@ export default function(config) {
       mediaQuery.append(
         responsiveRules.map(rule => {
           const cloned = rule.clone()
-          cloned.selectors = _.map(
-            rule.selectors,
-            selector => `.${screen}${separator}${selector.slice(1)}`
+          cloned.selectors = _.map(rule.selectors, selector =>
+            buildClassVariant(selector, screen, separator)
           )
           return cloned
         })

src/lib/substituteVariantsAtRules.js

@@ -1,12 +1,13 @@
 import _ from 'lodash'
 import postcss from 'postcss'
+import buildClassVariant from '../util/buildClassVariant'
 
 const variantGenerators = {
   hover: (container, config) => {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `.hover${config.options.separator}${rule.selector.slice(1)}:hover`
+      rule.selector = `${buildClassVariant(rule.selector, 'hover', config.options.separator)}:hover`
     })
 
     container.before(cloned.nodes)
@@ -15,7 +16,7 @@ const variantGenerators = {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `.focus${config.options.separator}${rule.selector.slice(1)}:focus`
+      rule.selector = `${buildClassVariant(rule.selector, 'focus', config.options.separator)}:focus`
     })
 
     container.before(cloned.nodes)
@@ -25,7 +26,7 @@ const variantGenerators = {
 
     cloned.walkRules(rule => {
       // prettier-ignore
-      rule.selector = `.parent:hover .parent-hover${config.options.separator}${rule.selector.slice(1)}`
+      rule.selector = `.parent:hover ${buildClassVariant(rule.selector, 'parent-hover', config.options.separator)}`
     })
 
     container.before(cloned.nodes)

src/util/buildClassVariant.js

@@ -0,0 +1,5 @@
+import escapeClassName from './escapeClassName'
+
+export default function buildClassVariant(className, variantName, separator) {
+  return `.${variantName}${escapeClassName(separator)}${className.slice(1)}`
+}