Skip to content

Commit

Permalink
Sort arbitrary properties alphabetically across multiple class lists (#…
Browse files Browse the repository at this point in the history 
…12911)

* Sort arbitrary properties alphabetically across multiple files

* Update test
  • Loading branch information
@thecrypticace @KrisBraun
thecrypticace authored and KrisBraun committed Feb 23, 2024
1 parent 89f0f54 commit b8c3123
Showing 1 changed file with 51 additions and 177 deletions.
228 changes: 51 additions & 177 deletions tests/variants.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,57 @@ import { crosscheck, run, html, css, defaults } from './util/run'

crosscheck(({ stable, oxide }) => {
test('variants', () => {
let config = {
darkMode: 'selector',
content: [path.resolve(__dirname, './variants.test.html')],
corePlugins: { preflight: false },
}

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

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(
fs.readFileSync(path.resolve(__dirname, './variants.test.css'), 'utf8')
)
})
})

test('order matters and produces different behaviour', () => {
let config = {
content: [
{
raw: html`
<div class="hover:file:[--value:1]"></div>
<div class="file:hover:[--value:2]"></div>
`,
},
],
}

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.hover\:file\:\[--value\:1\]::-webkit-file-upload-button:hover {
--value: 1;
}
.hover\:file\:\[--value\:1\]::file-selector-button:hover {
--value: 1;
}
.file\:hover\:\[--value\:2\]:hover::-webkit-file-upload-button {
--value: 2;
}
.file\:hover\:\[--value\:2\]:hover::file-selector-button {
--value: 2;
}
`)
})
})

describe('custom advanced variants', () => {
test('at-rules without params', () => {
let config = {
darkMode: 'selector',
content: [path.resolve(__dirname, './variants.test.html')],
Expand Down Expand Up @@ -1070,181 +1121,4 @@ crosscheck(({ stable, oxide }) => {
`)
})
})

test('variants with slashes support modifiers', () => {
let config = {
content: [
{
raw: html` <div class="ar-1/10/20:text-red-500">ar-1/10</div> `,
},
],
corePlugins: { preflight: false },
plugins: [
function ({ matchVariant }) {
matchVariant(
'ar',
(value, { modifier }) => {
return [`@media (min-aspect-ratio: ${value}) and (foo: ${modifier})`]
},
{ values: { '1/10': '1/10' } }
)
},
],
}

let input = css`
@tailwind utilities;
`

return run(input, config).then((result) => {
stable.expect(result.css).toMatchFormattedCss(css`
@media (min-aspect-ratio: 1 / 10) and (foo: 20) {
.ar-1\/10\/20\:text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
}
`)
oxide.expect(result.css).toMatchFormattedCss(css`
@media (min-aspect-ratio: 1 / 10) and (foo: 20) {
.ar-1\/10\/20\:text-red-500 {
color: #ef4444;
}
}
`)
})
})

test('arbitrary variant selectors should not re-order scrollbar pseudo classes', async () => {
let config = {
content: [
{
raw: html`
<div class="[&::-webkit-scrollbar:hover]:underline" />
<div class="[&::-webkit-scrollbar-button:hover]:underline" />
<div class="[&::-webkit-scrollbar-thumb:hover]:underline" />
<div class="[&::-webkit-scrollbar-track:hover]:underline" />
<div class="[&::-webkit-scrollbar-track-piece:hover]:underline" />
<div class="[&::-webkit-scrollbar-corner:hover]:underline" />
<div class="[&::-webkit-resizer:hover]:underline" />
`,
},
],
corePlugins: { preflight: false },
}

let input = css`
@tailwind utilities;
`

let result = await run(input, config)

expect(result.css).toMatchFormattedCss(css`
.\[\&\:\:-webkit-resizer\:hover\]\:underline::-webkit-resizer:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar-button\:hover\]\:underline::-webkit-scrollbar-button:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar-corner\:hover\]\:underline::-webkit-scrollbar-corner:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:underline::-webkit-scrollbar-thumb:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar-track-piece\:hover\]\:underline::-webkit-scrollbar-track-piece:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar-track\:hover\]\:underline::-webkit-scrollbar-track:hover {
text-decoration-line: underline;
}
.\[\&\:\:-webkit-scrollbar\:hover\]\:underline::-webkit-scrollbar:hover {
text-decoration-line: underline;
}
`)
})

test('stacking dark and rtl variants', async () => {
let config = {
darkMode: 'selector',
content: [
{
raw: html`<div class="dark:rtl:italic" />`,
},
],
corePlugins: { preflight: false },
}

let input = css`
@tailwind utilities;
`

let result = await run(input, config)

expect(result.css).toMatchFormattedCss(css`
.dark\:rtl\:italic:where([dir='rtl'], [dir='rtl'] *):where(.dark, .dark *) {
font-style: italic;
}
`)
})

test('stacking dark and rtl variants with pseudo elements', async () => {
let config = {
darkMode: 'selector',
content: [
{
raw: html`<div class="dark:rtl:placeholder:italic" />`,
},
],
corePlugins: { preflight: false },
}

let input = css`
@tailwind utilities;
`

let result = await run(input, config)

expect(result.css).toMatchFormattedCss(css`
.dark\:rtl\:placeholder\:italic:where([dir='rtl'], [dir='rtl'] *):where(
.dark,
.dark *
)::placeholder {
font-style: italic;
}
`)
})

test('* is matched by the parser as the children variant', async () => {
let config = {
content: [
{
raw: html`
<div class="*:italic" />
<div class="*:hover:italic" />
<div class="hover:*:italic" />
<div class="data-[slot=label]:*:hover:italic" />
<div class="[&_p]:*:hover:italic" />
`,
},
],
corePlugins: { preflight: false },
}

let input = css`
@tailwind utilities;
`

let result = await run(input, config)

expect(result.css).toMatchFormattedCss(css`
.\*\:italic > *,
.\*\:hover\:italic:hover > *,
.hover\:\*\:italic > :hover,
.data-\[slot\=label\]\:\*\:hover\:italic:hover > [data-slot='label'],
.\[\&_p\]\:\*\:hover\:italic:hover > * p {
font-style: italic;
}
`)
})
})

0 comments on commit b8c3123

Please sign in to comment.