Validate prefixes

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -13,6 +13,8 @@ import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api
 import { registerScreensConfig } from './screens-config'
 import { registerThemeVariantOverrides } from './theme-variants'
 
+const IS_VALID_PREFIX = /^[a-z]+$/
+
 export async function applyCompatibilityHooks({
   designSystem,
   base,
@@ -209,7 +211,21 @@ export async function applyCompatibilityHooks({
   registerScreensConfig(resolvedUserConfig, designSystem)
 
   // If a prefix has already been set in CSS don't override it
-  if (!designSystem.theme.prefix) {
+  if (!designSystem.theme.prefix && resolvedConfig.prefix) {
+    if (resolvedConfig.prefix.endsWith('-')) {
+      resolvedConfig.prefix = resolvedConfig.prefix.slice(0, -1)
+
+      console.warn(
+        `The prefix "${resolvedConfig.prefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only and is written as a variant before all utilities. We have fixed up the prefix for you. Remove the trailing \`-\` to silence this warning.`,
+      )
+    }
+
+    if (!IS_VALID_PREFIX.test(resolvedConfig.prefix)) {
+      throw new Error(
+        `The prefix "${resolvedConfig.prefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.`,
+      )
+    }
+
     designSystem.theme.prefix = resolvedConfig.prefix
   }
 

packages/tailwindcss/src/compat/config.test.ts

@@ -1236,9 +1236,8 @@ test('utilities must be prefixed', async () => {
   })
 
   // Prefixed utilities are generated
-  expect(
-    compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']),
-  ).toMatchInlineSnapshot(`
+  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
+    .toMatchInlineSnapshot(`
     ".tw\\:custom {
       color: red;
     }
@@ -1352,3 +1351,23 @@ test('Prefixes configured in CSS take precedence over those defined in JS config
     "
   `)
 })
+
+test('a prefix must be letters only', async () => {
+  await expect(() =>
+    compile(
+      css`
+        @config "./plugin.js";
+      `,
+      {
+        async loadModule(id, base) {
+          return {
+            base,
+            module: { prefix: '__' },
+          }
+        },
+      },
+    ),
+  ).rejects.toThrowErrorMatchingInlineSnapshot(
+    `[Error: The prefix "__" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.]`,
+  )
+})

packages/tailwindcss/src/compat/prefix.test.ts

@@ -17,9 +17,8 @@ test('utilities must be prefixed', async () => {
   let compiler = await compile(input)
 
   // Prefixed utilities are generated
-  expect(
-    compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']),
-  ).toMatchInlineSnapshot(`
+  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
+    .toMatchInlineSnapshot(`
     ".tw\\:custom {
       color: red;
     }
@@ -269,3 +268,13 @@ test('a prefix can be configured via @import prefix(…)', async () => {
 
   expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
 })
+
+test('a prefix must be letters only', async () => {
+  let input = css`
+    @theme reference prefix(__);
+  `
+
+  await expect(() => compile(input)).rejects.toThrowErrorMatchingInlineSnapshot(
+    `[Error: The prefix "__" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.]`,
+  )
+})

packages/tailwindcss/src/index.ts

@@ -23,6 +23,7 @@ import { Theme, ThemeOptions } from './theme'
 import { segment } from './utils/segment'
 export type Config = UserConfig
 
+const IS_VALID_PREFIX = /^[a-z]+$/
 const IS_VALID_UTILITY_NAME = /^[a-z][a-zA-Z0-9/%._-]*$/
 
 type CompileOptions = {
@@ -236,6 +237,12 @@ async function parseCss(
     let [themeOptions, themePrefix] = parseThemeOptions(node.selector)
 
     if (themePrefix) {
+      if (!IS_VALID_PREFIX.test(themePrefix)) {
+        throw new Error(
+          `The prefix "${themePrefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.`,
+        )
+      }
+
       theme.prefix = themePrefix
     }