Skip to content

Commit 76151d4

Browse files
authored
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%; } ```
1 parent 8d03db8 commit 76151d4

File tree

3 files changed

+23
-1
lines changed

3 files changed

+23
-1
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2323
- Only compile arbitrary values ending in `]` ([#15503](https://github.com/tailwindlabs/tailwindcss/pull/15503))
2424
- Improve performance and memory usage ([#15529](https://github.com/tailwindlabs/tailwindcss/pull/15529))
2525
- Ensure `@apply` rules are processed in the correct order ([#15542](https://github.com/tailwindlabs/tailwindcss/pull/15542))
26+
- Allow negative utility names in `@utilty` ([#15573](https://github.com/tailwindlabs/tailwindcss/pull/15573))
2627
- _Upgrade (experimental)_: Do not extract class names from functions (e.g. `shadow` in `filter: 'drop-shadow(…)'`) ([#15566](https://github.com/tailwindlabs/tailwindcss/pull/15566))
2728

2829
### Changed

packages/tailwindcss/src/utilities.test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17106,6 +17106,27 @@ describe('custom utilities', () => {
1710617106
`)
1710717107
})
1710817108

17109+
test('custom static utility (negative)', async () => {
17110+
let { build } = await compile(css`
17111+
@layer utilities {
17112+
@tailwind utilities;
17113+
}
17114+
17115+
@utility -example {
17116+
value: -1;
17117+
}
17118+
`)
17119+
let compiled = build(['-example', 'lg:-example'])
17120+
17121+
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
17122+
"@layer utilities {
17123+
.-example {
17124+
value: -1;
17125+
}
17126+
}"
17127+
`)
17128+
})
17129+
1710917130
test('Multiple static utilities are merged', async () => {
1711017131
let { build } = await compile(css`
1711117132
@layer utilities {

packages/tailwindcss/src/utilities.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { replaceShadowColors } from './utils/replace-shadow-colors'
2424
import { segment } from './utils/segment'
2525
import * as ValueParser from './value-parser'
2626

27-
const IS_VALID_STATIC_UTILITY_NAME = /^[a-z][a-zA-Z0-9/%._-]*$/
27+
const IS_VALID_STATIC_UTILITY_NAME = /^-?[a-z][a-zA-Z0-9/%._-]*$/
2828
const IS_VALID_FUNCTIONAL_UTILITY_NAME = /^-?[a-z][a-zA-Z0-9/%._-]*-\*$/
2929

3030
type CompileFn<T extends Candidate['kind']> = (

0 commit comments

Comments
 (0)