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

@@ -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
 

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

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
  }
 

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: (() => {

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)

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')