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%;
}
```
This commit is contained in:
Robin Malfait 2025-01-08 21:44:02 +01:00 committed by GitHub
parent 8d03db8178
commit 76151d4293
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 1 deletions

View File

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

View File

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

View File

@ -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']> = (