diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index fcfb45ece..0f6f79801 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -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`
` }], + purge: { + enabled: true, + content: [{ raw: html`` }], + }, 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`` }], + purge: { + enabled: true, + content: [{ raw: html`` }], + }, 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`` }], + purge: { + enabled: true, + content: [{ raw: html`` }], + }, 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`` }], + purge: { + enabled: true, + content: [{ raw: html`` }], + }, 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`` }], + purge: { + enabled: true, + content: [{ raw: html`` }], + }, + 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; }