Merge pull request #619 from tailwindcss/prove-613-issue

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 {