Skip to content

Commit

Permalink
Add support for at rules
Browse files Browse the repository at this point in the history
  • Loading branch information
thecrypticace committed May 8, 2022
1 parent 42296f2 commit 02404ac
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/lib/generateRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as sharedState from './sharedState'
import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
import { asClass } from '../util/nameClass'
import { normalize } from '../util/dataTypes'
import { parseVariant } from './setupContextUtils'
import isValidArbitraryValue from '../util/isValidArbitraryValue'

let classNameParser = selectorParser((selectors) => {
Expand Down Expand Up @@ -128,8 +129,12 @@ function applyVariant(variant, matches, context) {
// Register arbitrary variants
if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
let selector = normalize(variant.slice(1, -1))

// TODO: Error recovery for @supports(what:ever) -- note the absence of a space
let fn = parseVariant(selector)

let sort = Array.from(context.variantOrder.values()).pop() << 1n
context.variantMap.set(variant, [[sort, () => selector]])
context.variantMap.set(variant, [[sort, fn]])
context.variantOrder.set(variant, sort)
}

Expand Down
25 changes: 25 additions & 0 deletions tests/arbitrary-variants.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,28 @@ test('using the important modifier', () => {
`)
})
})

test('at-rules', () => {
let config = {
content: [{ raw: html`<div class="[@supports_(what:ever){&:hover}]:underline"></div>` }],
corePlugins: { preflight: false },
}

let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@supports (what: ever) {
.\[\@supports_\(what\:ever\)\{\&\:hover\}\]\:underline:hover {
text-decoration-line: underline;
}
}
`)
})
})

0 comments on commit 02404ac

Please sign in to comment.