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/prefix.fn.test.css

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

tests/prefix.fn.test.html

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

tests/prefix.fn.test.js

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

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