mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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:
parent
8d03db8178
commit
76151d4293
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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']> = (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user