123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- import { run, html, css } from './util/run'
- test('basic 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 ::test:hover {
- font-weight: 900;
- }
- .test\:font-bold::test {
- font-weight: 700;
- }
- .test\:font-medium::test {
- font-weight: 500;
- }
- .hover\:test\:font-black::test:hover {
- font-weight: 900;
- }
- `)
- })
- })
- 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;
- }
- .test\:font-bold::test {
- font-weight: 700;
- }
- .test\:font-medium::test {
- font-weight: 500;
- }
- .hover\:test\:font-black ::test:hover {
- font-weight: 900;
- }
- .hover\:test\:font-black::test:hover {
- font-weight: 900;
- }
- `)
- })
- })
- test('a function that returns parallel variants can modify the container', 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', ({ container }) => {
- container.walkDecls((decl) => {
- decl.value = `calc(0 + ${decl.value})`
- })
- return ['& *::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;
- }
- .test\:font-bold::test {
- font-weight: 700;
- }
- .test\:font-medium::test {
- font-weight: 500;
- }
- .hover\:test\:font-black ::test:hover {
- font-weight: 900;
- }
- .hover\:test\:font-black::test:hover {
- font-weight: 900;
- }
- `)
- })
- })
|