diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js index 49a354d..65538d0 100644 --- a/src/lib/setupContext.js +++ b/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 { diff --git a/tests/prefix.fn.test.css b/tests/prefix.fn.test.css new file mode 100644 index 0000000..e1e60a0 --- /dev/null +++ b/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 +} diff --git a/tests/prefix.fn.test.html b/tests/prefix.fn.test.html new file mode 100644 index 0000000..9647a5d --- /dev/null +++ b/tests/prefix.fn.test.html @@ -0,0 +1,3 @@ +
+ + diff --git a/tests/prefix.fn.test.js b/tests/prefix.fn.test.js new file mode 100644 index 0000000..8e5d80e --- /dev/null +++ b/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) + }) +})