diff --git a/CHANGELOG.md b/CHANGELOG.md index a09207332..b26cd3a5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don't use pointer cursor on disabled buttons by default ([#5772](https://github.com/tailwindlabs/tailwindcss/pull/5772)) - Set default content value in preflight instead of within each before/after utility ([#5820](https://github.com/tailwindlabs/tailwindcss/pull/5820)) +- Remove `prefix` as a function ([#5829](https://github.com/tailwindlabs/tailwindcss/pull/5829)) ### Added diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 5ca5027f9..85fd44e82 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -253,7 +253,8 @@ function* resolveMatchedPlugins(classCandidate, context) { let candidatePrefix = classCandidate let negative = false - const twConfigPrefix = context.tailwindConfig.prefix || '' + const twConfigPrefix = context.tailwindConfig.prefix + const twConfigPrefixLen = twConfigPrefix.length if (candidatePrefix[twConfigPrefixLen] === '-') { negative = true diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 2cb40a9ae..8a5205e67 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -206,10 +206,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs return identifier } - if (typeof context.tailwindConfig.prefix === 'function') { - return prefixSelector(context.tailwindConfig.prefix, `.${identifier}`).substr(1) - } - return context.tailwindConfig.prefix + identifier } diff --git a/src/util/normalizeConfig.js b/src/util/normalizeConfig.js index e973c673f..02c80d791 100644 --- a/src/util/normalizeConfig.js +++ b/src/util/normalizeConfig.js @@ -140,6 +140,18 @@ export function normalizeConfig(config) { return [] })() + // Normalize prefix option + if (typeof config.prefix === 'function') { + log.warn('prefix-function', [ + 'As of Tailwind CSS v3.0, `prefix` cannot be a function.', + 'Update `prefix` in your configuration to be a string to eliminate this warning.', + // TODO: Add https://tw.wtf/prefix-function + ]) + config.prefix = '' + } else { + config.prefix = config.prefix ?? '' + } + // Normalize the `content` config.content = { files: (() => { diff --git a/src/util/prefixSelector.js b/src/util/prefixSelector.js index 4816b681a..cf056bcab 100644 --- a/src/util/prefixSelector.js +++ b/src/util/prefixSelector.js @@ -2,13 +2,10 @@ import parser from 'postcss-selector-parser' import { tap } from './tap' export default function (prefix, selector) { - const getPrefix = - typeof prefix === 'function' ? prefix : () => (prefix === undefined ? '' : prefix) - return parser((selectors) => { selectors.walkClasses((classSelector) => { tap(classSelector.value, (baseClass) => { - classSelector.value = `${getPrefix('.' + baseClass)}${baseClass}` + classSelector.value = `${prefix}${baseClass}` }) }) }).processSync(selector) diff --git a/tests/prefix.fn.test.css b/tests/prefix.fn.test.css deleted file mode 100644 index e1e60a050..000000000 --- a/tests/prefix.fn.test.css +++ /dev/null @@ -1,9 +0,0 @@ -.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 deleted file mode 100644 index 9647a5dff..000000000 --- a/tests/prefix.fn.test.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
diff --git a/tests/prefix.fn.test.js b/tests/prefix.fn.test.js deleted file mode 100644 index 419e4735e..000000000 --- a/tests/prefix.fn.test.js +++ /dev/null @@ -1,25 +0,0 @@ -import fs from 'fs' -import path from 'path' - -import { run } from './util/run' - -test('prefix fn', () => { - let config = { - prefix(selector) { - if (['.align-bottom', '.ml'].some((prefix) => selector.startsWith(prefix))) { - return 'tw-' - } - - return '' - }, - content: [path.resolve(__dirname, './prefix.fn.test.html')], - corePlugins: { preflight: false }, - } - - return run('@tailwind utilities', config).then((result) => { - let expectedPath = path.resolve(__dirname, './prefix.fn.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') - - expect(result.css).toMatchFormattedCss(expected) - }) -}) diff --git a/tests/prefixSelector.test.js b/tests/prefixSelector.test.js index a1faa46d0..92fd6194f 100644 --- a/tests/prefixSelector.test.js +++ b/tests/prefixSelector.test.js @@ -4,15 +4,6 @@ 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')