dba5043591
* move `preflight` tests to `plugins` test folder * move `container` tests to `plugins` test folder * add a test that ensures that all built-in plugins have tests This is based on a few assumptions: 1. All plugins exist in the `corePlugins.js` file and are exported as `corePlugins` 2. Each exported plugin in that object has a file with a corresponding name in the current (`tests/plugins/`) folder * add dedicated plugin tests in the `plugins` folder * add a test that ensures that all built-in variant plugins have tests This is based on a few assumptions: 1. All variant plugins exist in the `corePlugins.js` file and are exported as `variantPlugins` 2. Each exported plugin in that object has a file with a corresponding name in the current (`tests/plugins/variants/`) folder * add dedicated variant plugin tests in the `plugins/variants` folder * cleanup basic usage test * move existing animation tests to animation plugin tests * move `apply-important-selector` tests to more appropriate location
119 lines
3.5 KiB
JavaScript
119 lines
3.5 KiB
JavaScript
import { run, html, css, defaults, quickPluginTest } from '../util/run'
|
|
|
|
quickPluginTest('divideWidth', {
|
|
safelist: [
|
|
// Arbitrary values
|
|
'divide-x-[0]',
|
|
'divide-x-[12px]',
|
|
'divide-x-[var(--my-value)]',
|
|
'divide-y-[0]',
|
|
'divide-y-[34px]',
|
|
'divide-y-[var(--my-value)]',
|
|
],
|
|
}).toMatchSnapshot()
|
|
|
|
// With `logicalSiblingUtilities` enabled
|
|
quickPluginTest('divideWidth', {
|
|
safelist: [
|
|
// Arbitrary values
|
|
'divide-x-[0]',
|
|
'divide-x-[12px]',
|
|
'divide-x-[var(--my-value)]',
|
|
'divide-y-[0]',
|
|
'divide-y-[34px]',
|
|
'divide-y-[var(--my-value)]',
|
|
],
|
|
future: {
|
|
logicalSiblingUtilities: true,
|
|
},
|
|
}).toMatchSnapshot()
|
|
|
|
it('should add the divide styles for divide-y and a default border color', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="divide-y"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
|
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should add the divide styles for divide-x and a default border color', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="divide-x"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
.divide-x > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-right-width: calc(1px * var(--tw-divide-x-reverse));
|
|
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should add the divide styles for divide-y-reverse and a default border color', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="divide-y-reverse"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 1;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should add the divide styles for divide-x-reverse and a default border color', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="divide-x-reverse"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 1;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should only inject the base styles once if we use divide and border at the same time', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="divide-y border-r"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
}
|
|
.border-r {
|
|
border-right-width: 1px;
|
|
}
|
|
`)
|
|
})
|
|
})
|