123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- import { run, html, css } from './util/run'
- test('partial arbitrary variants', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant({
- potato: (flavor) => `.potato-${flavor} &`,
- })
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .potato-baked .potato-\[baked\]\:w-3 {
- width: 0.75rem;
- }
- .potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 240 138 / var(--tw-bg-opacity));
- }
- `)
- })
- })
- test('partial arbitrary variants with at-rules', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant({
- potato: (flavor) => `@media (potato: ${flavor})`,
- })
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (potato: baked) {
- .potato-\[baked\]\:w-3 {
- width: 0.75rem;
- }
- }
- @media (potato: yellow) {
- .potato-\[yellow\]\:bg-yellow-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 240 138 / var(--tw-bg-opacity));
- }
- }
- `)
- })
- })
- test('partial arbitrary variants with at-rules and placeholder', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant({
- potato: (flavor) => `@media (potato: ${flavor}) { &:potato }`,
- })
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (potato: baked) {
- .potato-\[baked\]\:w-3:potato {
- width: 0.75rem;
- }
- }
- @media (potato: yellow) {
- .potato-\[yellow\]\:bg-yellow-200:potato {
- --tw-bg-opacity: 1;
- background-color: rgb(254 240 138 / var(--tw-bg-opacity));
- }
- }
- `)
- })
- })
- test('partial arbitrary variants with default values', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div class="tooltip-bottom:mt-2 tooltip-top:mb-2"></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant(
- {
- tooltip: (side) => `&${side}`,
- },
- {
- values: {
- bottom: '[data-location="bottom"]',
- top: '[data-location="top"]',
- },
- }
- )
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tooltip-bottom\:mt-2[data-location='bottom'] {
- margin-top: 0.5rem;
- }
- .tooltip-top\:mb-2[data-location='top'] {
- margin-bottom: 0.5rem;
- }
- `)
- })
- })
- test('matched variant values maintain the sort order they are registered in', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div
- class="alphabet-c:underline alphabet-a:underline alphabet-d:underline alphabet-b:underline"
- ></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant(
- {
- alphabet: (side) => `&${side}`,
- },
- {
- values: {
- a: '[data-value="a"]',
- b: '[data-value="b"]',
- c: '[data-value="c"]',
- d: '[data-value="d"]',
- },
- }
- )
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .alphabet-a\:underline[data-value='a'] {
- text-decoration-line: underline;
- }
- .alphabet-b\:underline[data-value='b'] {
- text-decoration-line: underline;
- }
- .alphabet-c\:underline[data-value='c'] {
- text-decoration-line: underline;
- }
- .alphabet-d\:underline[data-value='d'] {
- text-decoration-line: underline;
- }
- `)
- })
- })
- test('matchVariant can return an array of format strings from the function', () => {
- let config = {
- experimental: { matchVariant: true },
- content: [
- {
- raw: html`<div class="test-[a,b,c]:underline"></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant({
- test: (selector) => selector.split(',').map((selector) => `&.${selector} > *`),
- })
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[a\2c b\2c c\]\:underline.a > * {
- text-decoration-line: underline;
- }
- .test-\[a\2c b\2c c\]\:underline.b > * {
- text-decoration-line: underline;
- }
- .test-\[a\2c b\2c c\]\:underline.c > * {
- text-decoration-line: underline;
- }
- `)
- })
- })
|