mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
c8bf2d49b6
* disable color opacity plugins by default for the `oxide` engine * update tests to reflect this change in the `oxide` engine * update changelog * reflect changes in integration tests
857 lines
22 KiB
JavaScript
857 lines
22 KiB
JavaScript
import resolveConfig from '../src/public/resolve-config'
|
|
import { createContext } from '../src/lib/setupContextUtils'
|
|
|
|
import { crosscheck, run, html, css } from './util/run'
|
|
|
|
crosscheck(({ stable, oxide }) => {
|
|
test('partial arbitrary variants', () => {
|
|
let config = {
|
|
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) => {
|
|
stable.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));
|
|
}
|
|
`)
|
|
oxide.expect(result.css).toMatchFormattedCss(css`
|
|
.potato-baked .potato-\[baked\]\:w-3 {
|
|
width: 0.75rem;
|
|
}
|
|
.potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
|
|
background-color: #fef08a;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('partial arbitrary variants with at-rules', () => {
|
|
let config = {
|
|
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) => {
|
|
stable.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));
|
|
}
|
|
}
|
|
`)
|
|
oxide.expect(result.css).toMatchFormattedCss(css`
|
|
@media (potato: baked) {
|
|
.potato-\[baked\]\:w-3 {
|
|
width: 0.75rem;
|
|
}
|
|
}
|
|
@media (potato: yellow) {
|
|
.potato-\[yellow\]\:bg-yellow-200 {
|
|
background-color: #fef08a;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('partial arbitrary variants with at-rules and placeholder', () => {
|
|
let config = {
|
|
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) => {
|
|
stable.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));
|
|
}
|
|
}
|
|
`)
|
|
oxide.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 {
|
|
background-color: #fef08a;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('partial arbitrary variants with default values', () => {
|
|
let config = {
|
|
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 = {
|
|
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'],
|
|
.alphabet-b\:underline[data-value='b'],
|
|
.alphabet-c\:underline[data-value='c'],
|
|
.alphabet-d\:underline[data-value='d'] {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matchVariant can return an array of format strings from the function', () => {
|
|
let config = {
|
|
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\,b\,c\]\:underline.a > *,
|
|
.test-\[a\,b\,c\]\:underline.b > *,
|
|
.test-\[a\,b\,c\]\:underline.c > * {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to sort variants', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="testmin-[500px]:underline testmin-[700px]:italic"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 500px) {
|
|
.testmin-\[500px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (min-width: 700px) {
|
|
.testmin-\[700px\]\:italic {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to compare arbitrary variants and hardcoded variants', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div
|
|
class="testmin-[700px]:italic testmin-example:italic testmin-[500px]:italic"
|
|
></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
values: {
|
|
example: '600px',
|
|
},
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 500px) {
|
|
.testmin-\[500px\]\:italic {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
@media (min-width: 600px) {
|
|
.testmin-example\:italic {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
@media (min-width: 700px) {
|
|
.testmin-\[700px\]\:italic {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to sort stacked arbitrary variants correctly', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<!-- 4 -->
|
|
<div class="testmin-[150px]:testmax-[400px]:underline"></div>
|
|
<!-- 2 -->
|
|
<div class="testmin-[100px]:testmax-[350px]:underline"></div>
|
|
<!-- 1 -->
|
|
<div class="testmin-[100px]:testmax-[300px]:underline"></div>
|
|
<!-- 3 -->
|
|
<div class="testmin-[100px]:testmax-[400px]:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
|
|
matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(z.value) - parseInt(a.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 100px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (max-width: 350px) {
|
|
.testmin-\[100px\]\:testmax-\[350px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (max-width: 300px) {
|
|
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 150px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[150px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should maintain sort from other variants, if sort functions of arbitrary variants return 0', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="testmin-[100px]:testmax-[200px]:focus:underline"></div>
|
|
<div class="testmin-[100px]:testmax-[200px]:hover:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
|
|
matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(z.value) - parseInt(a.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 100px) {
|
|
@media (max-width: 200px) {
|
|
.testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover,
|
|
.testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should sort arbitrary variants left to right (1)', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="testmin-[200px]:testmax-[400px]:underline"></div>
|
|
<div class="testmin-[200px]:testmax-[300px]:underline"></div>
|
|
<div class="testmin-[100px]:testmax-[400px]:underline"></div>
|
|
<div class="testmin-[100px]:testmax-[300px]:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(z.value) - parseInt(a.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 100px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (max-width: 300px) {
|
|
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 200px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[200px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (max-width: 300px) {
|
|
.testmin-\[200px\]\:testmax-\[300px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should sort arbitrary variants left to right (2)', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="testmax-[400px]:testmin-[200px]:underline"></div>
|
|
<div class="testmax-[300px]:testmin-[200px]:underline"></div>
|
|
<div class="testmax-[400px]:testmin-[100px]:underline"></div>
|
|
<div class="testmax-[300px]:testmin-[100px]:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(a.value) - parseInt(z.value)
|
|
},
|
|
})
|
|
matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
|
|
sort(a, z) {
|
|
return parseInt(z.value) - parseInt(a.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (max-width: 400px) {
|
|
@media (min-width: 100px) {
|
|
.testmax-\[400px\]\:testmin-\[100px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (min-width: 200px) {
|
|
.testmax-\[400px\]\:testmin-\[200px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
@media (min-width: 100px) {
|
|
.testmax-\[300px\]\:testmin-\[100px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
@media (min-width: 200px) {
|
|
.testmax-\[300px\]\:testmin-\[200px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should guarantee that we are not passing values from other variants to the wrong function', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="testmin-[200px]:testmax-[400px]:underline"></div>
|
|
<div class="testmin-[200px]:testmax-[300px]:underline"></div>
|
|
<div class="testmin-[100px]:testmax-[400px]:underline"></div>
|
|
<div class="testmin-[100px]:testmax-[300px]:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
|
|
sort(a, z) {
|
|
let lookup = ['100px', '200px']
|
|
if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
|
|
throw new Error('We are seeing values that should not be there!')
|
|
}
|
|
return lookup.indexOf(a.value) - lookup.indexOf(z.value)
|
|
},
|
|
})
|
|
matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
|
|
sort(a, z) {
|
|
let lookup = ['300px', '400px']
|
|
if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
|
|
throw new Error('We are seeing values that should not be there!')
|
|
}
|
|
return lookup.indexOf(z.value) - lookup.indexOf(a.value)
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@media (min-width: 100px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 200px) {
|
|
@media (max-width: 400px) {
|
|
.testmin-\[200px\]\:testmax-\[400px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
.testmin-\[200px\]\:testmax-\[300px\]\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should default to the DEFAULT value for variants', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="foo:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('foo', (value) => `.foo${value} &`, {
|
|
values: {
|
|
DEFAULT: '.bar',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo.bar .foo\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should not generate anything if the matchVariant does not have a DEFAULT value configured', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="foo:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('foo', (value) => `.foo${value} &`)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css``)
|
|
})
|
|
})
|
|
|
|
it('should be possible to use `null` as a DEFAULT value', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="foo:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
|
|
values: { DEFAULT: null },
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo-good .foo\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to use `undefined` as a DEFAULT value', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="foo:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
|
|
values: { DEFAULT: undefined },
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo-good .foo\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should be possible to use `undefined` as a DEFAULT value', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div class="foo:underline"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
({ matchVariant }) => {
|
|
matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
|
|
values: { DEFAULT: undefined },
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo-good .foo\:underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should not break things', () => {
|
|
let config = {}
|
|
|
|
let context = createContext(resolveConfig(config))
|
|
let [[, fn]] = context.variantMap.get('group')
|
|
|
|
let format
|
|
|
|
expect(
|
|
fn({
|
|
format(input) {
|
|
format = input
|
|
},
|
|
})
|
|
).toBe(undefined)
|
|
|
|
expect(format).toBe(':merge(.group) &')
|
|
})
|
|
})
|