Remove prefixTree, update relevant tests

__tests__/prefixSelector.test.js

@@ -0,0 +1,26 @@
+import prefix from '../src/util/prefixSelector'
+
+test('it prefixes classes with the provided prefix', () => {
+  expect(prefix('tw-', '.foo')).toEqual('.tw-foo')
+})
+
+test('it handles a function as the prefix', () => {
+  const prefixFunc = selector => {
+    return selector === '.foo' ? 'tw-' : ''
+  }
+
+  expect(prefix(prefixFunc, '.foo')).toEqual('.tw-foo')
+  expect(prefix(prefixFunc, '.bar')).toEqual('.bar')
+})
+
+test('it properly prefixes selectors with non-standard characters', () => {
+  expect(prefix('tw-', '.hello\\:world')).toEqual('.tw-hello\\:world')
+  expect(prefix('tw-', '.foo\\/bar')).toEqual('.tw-foo\\/bar')
+  expect(prefix('tw-', '.wew\\.lad')).toEqual('.tw-wew\\.lad')
+})
+
+test('it prefixes all classes in a selector', () => {
+  expect(prefix('tw-', '.btn-blue .w-1\\/4 > h1.text-xl + a .bar')).toEqual(
+    '.tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar'
+  )
+})

__tests__/prefixTree.test.js

@@ -1,70 +0,0 @@
-import postcss from 'postcss'
-import prefixTree from '../src/util/prefixTree'
-
-test('it prefixes classes with the provided prefix', () => {
-  const input = postcss.parse(`
-    .foo { color: red; }
-    .apple, .pear { color: green; }
-  `)
-
-  const expected = `
-    .tw-foo { color: red; }
-    .tw-apple, .tw-pear { color: green; }
-  `
-
-  const result = prefixTree(input, 'tw-').toResult()
-  expect(result.css).toEqual(expected)
-  expect(result.warnings().length).toBe(0)
-})
-
-test('it handles a function as the prefix', () => {
-  const input = postcss.parse(`
-    .foo { color: red; }
-    .apple, .pear { color: green; }
-  `)
-
-  const expected = `
-    .tw-foo { color: red; }
-    .apple, .pear { color: green; }
-  `
-
-  const prefixFunc = selector => {
-    return selector === '.foo' ? 'tw-' : ''
-  }
-
-  const result = prefixTree(input, prefixFunc).toResult()
-  expect(result.css).toEqual(expected)
-  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; }
-  `)
-
-  const expected = `
-    .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { color: red; }
-  `
-
-  const result = prefixTree(input, 'tw-').toResult()
-  expect(result.css).toEqual(expected)
-  expect(result.warnings().length).toBe(0)
-})

__tests__/processPlugins.test.js

@@ -761,6 +761,44 @@ test("component declarations respect the 'prefix' option by default", () => {
     `)
 })
 
+test('all selectors in a rule are prefixed', () => {
+  const { utilities, components } = processPlugins(
+    [
+      function({ addUtilities, addComponents }) {
+        addUtilities({
+          '.rotate-90, .rotate-1\\/4': {
+            transform: 'rotate(90deg)',
+          },
+        })
+        addComponents({
+          '.btn-blue, .btn-red': {
+            padding: '10px',
+          },
+        })
+      },
+    ],
+    makeConfig({
+      options: {
+        prefix: 'tw-',
+      },
+    })
+  )
+
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      .tw-rotate-90, .tw-rotate-1\\/4 {
+        transform: rotate(90deg)
+      }
+    }
+    `)
+
+  expect(css(components)).toMatchCss(`
+    .tw-btn-blue, .tw-btn-red {
+      padding: 10px
+    }
+    `)
+})
+
 test("component declarations can optionally ignore 'prefix' option", () => {
   const { components } = processPlugins(
     [

src/util/prefixTree.js

@@ -1,9 +0,0 @@
-import prefixSelector from './prefixSelector'
-
-export default function(css, prefix) {
-  css.walkRules(rule => {
-    rule.selectors = rule.selectors.map(selector => prefixSelector(prefix, selector))
-  })
-
-  return css
-}