Plugin API: Allow custom utilities to start with @

Author: philipp-spiess

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+### Fixed
+
+- Ensure support for JS plugins that contribute utilities starting with `@` ([#14793](https://github.com/tailwindlabs/tailwindcss/pull/14793))
+
 ## [4.0.0-alpha.30] - 2024-10-24
 
 ### Added

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -2973,6 +2973,70 @@ describe('matchUtilities()', () => {
     ).toEqual('')
   })
 
+  test('custom functional utilities can start with @', async () => {
+    async function run(candidates: string[]) {
+      let compiled = await compile(
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+
+        {
+          async loadModule(id, base) {
+            return {
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { '@container': (value) => ({ container: value }) },
+                  {
+                    values: {
+                      DEFAULT: 'inline-size',
+                      normal: 'normal',
+                    },
+                  },
+                )
+              },
+            }
+          },
+        },
+      )
+
+      return compiled.build(candidates)
+    }
+
+    // Classes are emitted twice because we have a core utility already adding `@container`
+    expect(optimizeCss(await run(['@container', '@container-normal', 'hover:@container'])).trim())
+      .toMatchInlineSnapshot(`
+        ".\\@container {
+          container-type: inline-size;
+        }
+
+        .\\@container-normal {
+          container-type: normal;
+        }
+
+        .\\@container {
+          container: inline-size;
+        }
+
+        .\\@container-normal {
+          container: normal;
+        }
+
+        @media (hover: hover) {
+          .hover\\:\\@container:hover {
+            container-type: inline-size;
+          }
+        }
+
+        @media (hover: hover) {
+          .hover\\:\\@container:hover {
+            container: inline-size;
+          }
+        }"
+      `)
+  })
+
   test('custom functional utilities can return an array of rules', async () => {
     let compiled = await compile(
       css`

packages/tailwindcss/src/compat/plugin-api.ts

@@ -75,7 +75,7 @@ export type PluginAPI = {
   prefix(className: string): string
 }
 
-const IS_VALID_UTILITY_NAME = /^[a-z][a-zA-Z0-9/%._-]*$/
+const IS_VALID_UTILITY_NAME = /^[a-z@][a-zA-Z0-9/%._-]*$/
 
 export function buildPluginApi(
   designSystem: DesignSystem,