From 76151d4293e92e6a4f0e3a9cfa400fd512de8d01 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 8 Jan 2025 21:44:02 +0100
Subject: [PATCH] Allow negative utility names in `@utilty` (#15573)

This PR fixes an issue where static utilities defined via `@utility`
wasn't possible if the name starts with `-`.

There are plenty of static utilities that start with `-`, but it wasn't
possible to register them via the `@utility` directive, only via the JS
API.

Example of a core utility that is now valid:
```css
@utility -inset-full {
  inset: -100%;
}
```
---
 CHANGELOG.md                               |  1 +
 packages/tailwindcss/src/utilities.test.ts | 21 +++++++++++++++++++++
 packages/tailwindcss/src/utilities.ts      |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b73a76fb..bc1c82e79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Only compile arbitrary values ending in `]` ([#15503](https://github.com/tailwindlabs/tailwindcss/pull/15503))
 - Improve performance and memory usage ([#15529](https://github.com/tailwindlabs/tailwindcss/pull/15529))
 - Ensure `@apply` rules are processed in the correct order ([#15542](https://github.com/tailwindlabs/tailwindcss/pull/15542))
+- Allow negative utility names in `@utilty` ([#15573](https://github.com/tailwindlabs/tailwindcss/pull/15573))
 - _Upgrade (experimental)_: Do not extract class names from functions (e.g. `shadow` in `filter: 'drop-shadow(…)'`) ([#15566](https://github.com/tailwindlabs/tailwindcss/pull/15566))
 
 ### Changed
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index f4530db74..b942ebadb 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -17106,6 +17106,27 @@ describe('custom utilities', () => {
     `)
   })
 
+  test('custom static utility (negative)', async () => {
+    let { build } = await compile(css`
+      @layer utilities {
+        @tailwind utilities;
+      }
+
+      @utility -example {
+        value: -1;
+      }
+    `)
+    let compiled = build(['-example', 'lg:-example'])
+
+    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .-example {
+          value: -1;
+        }
+      }"
+    `)
+  })
+
   test('Multiple static utilities are merged', async () => {
     let { build } = await compile(css`
       @layer utilities {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index a3e68e1cb..650ad55e0 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -24,7 +24,7 @@ import { replaceShadowColors } from './utils/replace-shadow-colors'
 import { segment } from './utils/segment'
 import * as ValueParser from './value-parser'
 
-const IS_VALID_STATIC_UTILITY_NAME = /^[a-z][a-zA-Z0-9/%._-]*$/
+const IS_VALID_STATIC_UTILITY_NAME = /^-?[a-z][a-zA-Z0-9/%._-]*$/
 const IS_VALID_FUNCTIONAL_UTILITY_NAME = /^-?[a-z][a-zA-Z0-9/%._-]*-\*$/
 
 type CompileFn<T extends Candidate['kind']> = (