wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix tests for AOT mode

Browse source
This commit is contained in:
Robin Malfait 2021-09-08 17:40:43 +02:00
parent bf248cb0de
commit cbcb50f27b
No known key found for this signature in database
GPG key ID: 92F53D68B9041AFE
1 changed files with 56 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

67
tests/plugins/divide.test.js
View file

@ -1,20 +1,42 @@
import { run, html, css } from '../util/run'
import path from 'path'
import postcss from 'postcss'
import tailwind from '../../src'
function run(input, config, plugin = tailwind) {
let { currentTestName } = expect.getState()
return postcss(plugin(config)).process(input, {
from: `${path.resolve(__filename)}?test=${currentTestName}`,
})
}
function syntax(templates) {
return templates.join('')
}
let css = syntax
let html = syntax
it('should add the divide styles for divide-y and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-y"></div>` }],
purge: {
enabled: true,
content: [{ raw: html`<div class="divide-y"></div>` }],
},
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
expect(result.css).toIncludeCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
`)
expect(result.css).toIncludeCss(css`
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@ -26,19 +48,24 @@ it('should add the divide styles for divide-y and a default border color', () =>
it('should add the divide styles for divide-x and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-x"></div>` }],
purge: {
enabled: true,
content: [{ raw: html`<div class="divide-x"></div>` }],
},
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
expect(result.css).toIncludeCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
`)
expect(result.css).toIncludeCss(css`
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
@ -50,19 +77,24 @@ it('should add the divide styles for divide-x and a default border color', () =>
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>` }],
purge: {
enabled: true,
content: [{ raw: html`<div class="divide-y-reverse"></div>` }],
},
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
expect(result.css).toIncludeCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
`)
expect(result.css).toIncludeCss(css`
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 1;
}
@ -72,19 +104,24 @@ it('should add the divide styles for divide-y-reverse and a default border color
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>` }],
purge: {
enabled: true,
content: [{ raw: html`<div class="divide-x-reverse"></div>` }],
},
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
expect(result.css).toIncludeCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
`)
expect(result.css).toIncludeCss(css`
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 1;
}
@ -94,25 +131,33 @@ it('should add the divide styles for divide-x-reverse and a default border color
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>` }],
purge: {
enabled: true,
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).toMatchCss(css`
expect(result.css).toIncludeCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
`)
expect(result.css).toIncludeCss(css`
.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));
}
`)
expect(result.css).toIncludeCss(css`
.border-r {
border-right-width: 1px;
}