Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow returning parallel variants from addVariant or matchVariant callback functions #8455

Merged
merged 9 commits into from
May 31, 2022
Prev Previous commit
Next Next commit
add parallel variant with function test
  • Loading branch information
RobinMalfait committed May 27, 2022
commit 6b15caa39c7b7268190c18e12845cae0d63cd24b
43 changes: 43 additions & 0 deletions tests/parallel-variants.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,46 @@ test('basic parallel variants', async () => {
`)
})
})

test('parallel variants can be generated using a function that returns parallel variants', async () => {
let config = {
content: [
{
raw: html`<div
class="hover:test:font-black test:font-bold test:font-medium font-normal"
></div>`,
},
],
plugins: [
function test({ addVariant }) {
addVariant('test', ['& *::test', '&::test'])
},
],
}

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-normal {
font-weight: 400;
}
.test\:font-bold *::test {
font-weight: 700;
}
.test\:font-medium *::test {
font-weight: 500;
}
.hover\:test\:font-black *:hover::test {
font-weight: 900;
}
.test\:font-bold::test {
font-weight: 700;
}
.test\:font-medium::test {
font-weight: 500;
}
.hover\:test\:font-black:hover::test {
font-weight: 900;
}
`)
})
})