Provide a function for prefixing utilities in plugins

Author: adamwathan

__tests__/applyClassPrefix.test.js renamed to __tests__/prefixTree.test.js

@@ -1,5 +1,5 @@
 import postcss from 'postcss'
-import applyClassPrefix from '../src/util/applyClassPrefix'
+import prefixTree from '../src/util/prefixTree'
 
 test('it prefixes classes with the provided prefix', () => {
   const input = postcss.parse(`
@@ -12,7 +12,7 @@ test('it prefixes classes with the provided prefix', () => {
     .tw-apple, .tw-pear { color: green; }
   `
 
-  const result = applyClassPrefix(input, 'tw-').toResult()
+  const result = prefixTree(input, 'tw-').toResult()
   expect(result.css).toEqual(expected)
   expect(result.warnings().length).toBe(0)
 })
@@ -36,7 +36,7 @@ test('it handles a function as the prefix', () => {
     return ''
   }
 
-  const result = applyClassPrefix(input, prefixFunc).toResult()
+  const result = prefixTree(input, prefixFunc).toResult()
   expect(result.css).toEqual(expected)
   expect(result.warnings().length).toBe(0)
 })

__tests__/processPlugins.test.js

@@ -393,3 +393,28 @@ test('plugins can add multiple sets of utilities and components', () => {
     }
   `)
 })
+
+test("plugins can apply the user's chosen prefix", () => {
+  const [, utilities] = processPlugins({
+    plugins: [
+      function({ rule, addUtilities, prefix }) {
+        addUtilities([
+          rule(prefix('.skew-12deg'), {
+            transform: 'skewY(-12deg)',
+          }),
+        ])
+      },
+    ],
+    options: {
+      prefix: 'tw-',
+    },
+  })
+
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      .tw-skew-12deg {
+        transform: skewY(-12deg)
+      }
+    }
+  `)
+})

src/lib/substituteTailwindAtRules.js

@@ -2,7 +2,7 @@ import fs from 'fs'
 import postcss from 'postcss'
 import container from '../generators/container'
 import utilityModules from '../utilityModules'
-import applyClassPrefix from '../util/applyClassPrefix'
+import prefixTree from '../util/prefixTree'
 import generateModules from '../util/generateModules'
 import processPlugins from '../util/processPlugins'
 
@@ -29,7 +29,7 @@ export default function(config) {
           nodes: pluginComponents,
         })
 
-        applyClassPrefix(tailwindComponentTree, unwrappedConfig.options.prefix)
+        prefixTree(tailwindComponentTree, unwrappedConfig.options.prefix)
 
         tailwindComponentTree.walk(node => (node.source = atRule.source))
         pluginComponentTree.walk(node => (node.source = atRule.source))
@@ -54,7 +54,7 @@ export default function(config) {
           nodes: pluginUtilities,
         })
 
-        applyClassPrefix(tailwindUtilityTree, unwrappedConfig.options.prefix)
+        prefixTree(tailwindUtilityTree, unwrappedConfig.options.prefix)
 
         tailwindUtilityTree.walk(node => (node.source = atRule.source))
         pluginUtilityTree.walk(node => (node.source = atRule.source))

src/util/applyClassPrefix.js

@@ -0,0 +1,5 @@
+export default function(prefix, selector) {
+  const getPrefix = typeof prefix === 'function' ? prefix : () => prefix
+
+  return `.${getPrefix(selector)}${selector.slice(1)}`
+}

src/util/prefixSelector.js

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

src/util/prefixTree.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import postcss from 'postcss'
 import escapeClassName from '../util/escapeClassName'
+import prefixSelector from '../util/prefixSelector'
 import wrapWithVariants from '../util/wrapWithVariants'
 
 function defineRule(selector, properties) {
@@ -41,6 +42,9 @@ export default function(config) {
       addComponents: components => {
         pluginComponents.push(...components)
       },
+      prefix: selector => {
+        return prefixSelector(config.options.prefix, selector)
+      },
     })
   })