Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Sort classes using position of first matching rule ([#11504](https://github.com/tailwindlabs/tailwindcss/pull/11504))
- Bump `jiti`, `lightningcss`, `fast-glob` and `browserlist` dependencies and reflect `lightningcss` related improvements in tests ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
- Make PostCSS plugin async to improve performance ([#11548](https://github.com/tailwindlabs/tailwindcss/pull/11548))
- Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))

### Added

Expand Down
4 changes: 2 additions & 2 deletions src/lib/setupContextUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,8 @@ export function parseVariant(variant) {
return ({ format }) => format(str)
}

let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str)
return ({ wrap }) => wrap(postcss.atRule({ name, params: params.trim() }))
let [, name, params] = /@(\S*)( .+|[({].*)?/g.exec(str)
return ({ wrap }) => wrap(postcss.atRule({ name, params: params?.trim() ?? '' }))
})
.reverse()

Expand Down
25 changes: 25 additions & 0 deletions tests/variants.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,31 @@ test('order matters and produces different behaviour', () => {
})

describe('custom advanced variants', () => {
test('at-rules without params', () => {
let config = {
content: [
{
raw: html` <div class="ogre:text-center"></div> `,
},
],
plugins: [
function ({ addVariant }) {
addVariant('ogre', '@layer')
},
],
}

return run('@tailwind components; @tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@layer {
.ogre\:text-center {
text-align: center;
}
}
`)
})
})

test('prose-headings usage on its own', () => {
let config = {
content: [
Expand Down