Add failing tests for #613

__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; }

__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 {