Skip to content

Commit

Permalink
Allow negative utility names in @utilty (#15573)
Browse files Browse the repository at this point in the history
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%;
}
```
  • Loading branch information
RobinMalfait authored Jan 8, 2025
1 parent 8d03db8 commit 76151d4
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 21 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwindcss/src/utilities.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']> = (
Expand Down

0 comments on commit 76151d4

Please sign in to comment.