Add support for prefix as a function (#177)

* Refactor

* Add support for prefix function

This has the limitation that you must handle selector prefixes. The prefix function will get called with `.ml` before it gets called with `.ml-1`

Author: thecrypticace

src/lib/setupContext.js

@@ -401,7 +401,15 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       return '*'
     }
 
-    return options.respectPrefix ? context.tailwindConfig.prefix + identifier : identifier
+    if (! options.respectPrefix) {
+      return identifier
+    }
+
+    if (typeof context.tailwindConfig.prefix === 'function') {
+      return prefixSelector(context.tailwindConfig.prefix, `.${identifier}`).substr(1)
+    }
+
+    return context.tailwindConfig.prefix + identifier
   }
 
   return {

tests/prefix.fn.test.css

@@ -0,0 +1,9 @@
+.tw-ml-1 {
+  margin-left: 0.25rem;
+}
+.flex {
+  display: flex;
+}
+.tw-align-bottom {
+  vertical-align: bottom
+}

tests/prefix.fn.test.html

@@ -0,0 +1,3 @@
+<div class="flex"></div>
+<div class="tw-align-bottom"></div>
+<div class="tw-ml-1"></div>

tests/prefix.fn.test.js

@@ -0,0 +1,34 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('prefix fn', () => {
+  let config = {
+    prefix(selector) {
+      if (['.align-bottom', '.ml'].some(prefix => selector.startsWith(prefix))) {
+        return 'tw-';
+      }
+
+      return '';
+    },
+    purge: [path.resolve(__dirname, './prefix.fn.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+  }
+
+  let css = `
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './prefix.fn.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})