fix tests for AOT mode

Author: RobinMalfait

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`<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;
       }