From 0c2f1a64727d8f2c5fbc8425001aaf47940cf5a2 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 19 Oct 2021 15:22:49 +0200 Subject: [PATCH] Remove `prefix` as a function (#5829) * mark `prefix` as a function as a breaking change * remove `prefix` as a function related code * remove `prefix` as a function related tests * update changelog --- CHANGELOG.md | 1 + src/lib/generateRules.js | 3 ++- src/lib/setupContextUtils.js | 4 ---- src/util/normalizeConfig.js | 12 ++++++++++++ src/util/prefixSelector.js | 5 +---- tests/prefix.fn.test.css | 9 --------- tests/prefix.fn.test.html | 3 --- tests/prefix.fn.test.js | 25 ------------------------- tests/prefixSelector.test.js | 9 --------- 9 files changed, 16 insertions(+), 55 deletions(-) delete mode 100644 tests/prefix.fn.test.css delete mode 100644 tests/prefix.fn.test.html delete mode 100644 tests/prefix.fn.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index a092073323a5..b26cd3a5bfa6 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 5ca5027f97c8..85fd44e82042 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 2cb40a9ae861..8a5205e67040 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 e973c673fe22..02c80d79177b 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 4816b681aee7..cf056bcabbfa 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 e1e60a050aa2..000000000000 --- 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 9647a5dff722..000000000000 --- 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 419e4735eed3..000000000000 --- 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 a1faa46d0278..92fd6194f6de 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')