From 13ce37985998ff31ad7d63d731e7a15d9a8777e6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 14 Jan 2019 14:18:36 -0500
Subject: [PATCH 1/2] Add test for prefixing classes with non-standard
 characters

---
 __tests__/prefixTree.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/__tests__/prefixTree.test.js b/__tests__/prefixTree.test.js
index 43110274902b..877aade19dc1 100644
--- a/__tests__/prefixTree.test.js
+++ b/__tests__/prefixTree.test.js
@@ -37,6 +37,24 @@ test('it handles a function as the prefix', () => {
   expect(result.warnings().length).toBe(0)
 })
 
+test('it properly prefixes selectors with non-standard characters', () => {
+  const input = postcss.parse(`
+    .hello\\:world { color: blue; }
+    .foo\\/bar { color: green; }
+    .wew\\.lad { color: red; }
+  `)
+
+  const expected = `
+    .tw-hello\\:world { color: blue; }
+    .tw-foo\\/bar { color: green; }
+    .tw-wew\\.lad { color: red; }
+  `
+
+  const result = prefixTree(input, 'tw-').toResult()
+  expect(result.css).toEqual(expected)
+  expect(result.warnings().length).toBe(0)
+})
+
 test('it prefixes all classes in a selector', () => {
   const input = postcss.parse(`
     .btn-blue .w-1\\/4 > h1.text-xl + a .bar { color: red; }

From e82ef53f290e55fe802bb729e7740de0a97c6082 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 14 Jan 2019 14:20:29 -0500
Subject: [PATCH 2/2] Add test for creating responsive variants of classes with
 non-standard characters

---
 __tests__/responsiveAtRule.test.js | 40 ++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js
index 49d64551a6d5..c13240a674ad 100644
--- a/__tests__/responsiveAtRule.test.js
+++ b/__tests__/responsiveAtRule.test.js
@@ -86,6 +86,46 @@ test('it can generate responsive variants with a custom separator', () => {
   })
 })
 
+test('it can generate responsive variants when classes have non-standard characters', () => {
+  const input = `
+    @responsive {
+      .hover\\:banana { color: yellow; }
+      .chocolate-2\\.5 { color: brown; }
+    }
+  `
+
+  const output = `
+      .hover\\:banana { color: yellow; }
+      .chocolate-2\\.5 { color: brown; }
+      @media (min-width: 500px) {
+        .sm\\:hover\\:banana { color: yellow; }
+        .sm\\:chocolate-2\\.5 { color: brown; }
+      }
+      @media (min-width: 750px) {
+        .md\\:hover\\:banana { color: yellow; }
+        .md\\:chocolate-2\\.5 { color: brown; }
+      }
+      @media (min-width: 1000px) {
+        .lg\\:hover\\:banana { color: yellow; }
+        .lg\\:chocolate-2\\.5 { color: brown; }
+      }
+  `
+
+  return run(input, {
+    screens: {
+      sm: '500px',
+      md: '750px',
+      lg: '1000px',
+    },
+    options: {
+      separator: ':',
+    },
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('responsive variants are grouped', () => {
   const input = `
     @responsive {