Unify test suites

jest/customMatchers.js

@@ -1,5 +1,5 @@
-import prettier from 'prettier'
-import diff from 'jest-diff'
+const prettier = require('prettier')
+const diff = require('jest-diff').default
 
 function format(input) {
   return prettier.format(input, {
@@ -54,3 +54,55 @@ expect.extend({
     return { actual: received, message, pass }
   },
 })
+
+expect.extend({
+  // Compare two CSS strings with all whitespace removed
+  // This is probably naive but it's fast and works well enough.
+  toMatchFormattedCss(received, argument) {
+    function format(input) {
+      return prettier.format(input, {
+        parser: 'css',
+        printWidth: 100,
+      })
+    }
+    const options = {
+      comment: 'stripped(received) === stripped(argument)',
+      isNot: this.isNot,
+      promise: this.promise,
+    }
+
+    let formattedReceived = format(received)
+    let formattedArgument = format(argument)
+
+    const pass = formattedReceived === formattedArgument
+
+    const message = pass
+      ? () => {
+          return (
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            `Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
+            `Received: ${this.utils.printReceived(formattedArgument)}`
+          )
+        }
+      : () => {
+          const actual = formattedReceived
+          const expected = formattedArgument
+
+          const diffString = diff(expected, actual, {
+            expand: this.expand,
+          })
+
+          return (
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            (diffString && diffString.includes('- Expect')
+              ? `Difference:\n\n${diffString}`
+              : `Expected: ${this.utils.printExpected(expected)}\n` +
+                `Received: ${this.utils.printReceived(actual)}`)
+          )
+        }
+
+    return { actual: received, message, pass }
+  },
+})

jit/tests/_customMatchers.js

@@ -1,55 +0,0 @@
-const prettier = require('prettier')
-const diff = require('jest-diff').default
-
-function format(input) {
-  return prettier.format(input, {
-    parser: 'css',
-    printWidth: 100,
-  })
-}
-
-expect.extend({
-  // Compare two CSS strings with all whitespace removed
-  // This is probably naive but it's fast and works well enough.
-  toMatchCss(received, argument) {
-    const options = {
-      comment: 'stripped(received) === stripped(argument)',
-      isNot: this.isNot,
-      promise: this.promise,
-    }
-
-    let formattedReceived = format(received)
-    let formattedArgument = format(argument)
-
-    const pass = formattedReceived === formattedArgument
-
-    const message = pass
-      ? () => {
-          return (
-            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
-            '\n\n' +
-            `Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
-            `Received: ${this.utils.printReceived(formattedArgument)}`
-          )
-        }
-      : () => {
-          const actual = formattedReceived
-          const expected = formattedArgument
-
-          const diffString = diff(expected, actual, {
-            expand: this.expand,
-          })
-
-          return (
-            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
-            '\n\n' +
-            (diffString && diffString.includes('- Expect')
-              ? `Difference:\n\n${diffString}`
-              : `Expected: ${this.utils.printExpected(expected)}\n` +
-                `Received: ${this.utils.printReceived(actual)}`)
-          )
-        }
-
-    return { actual: received, message, pass }
-  },
-})

jit/tests/apply.test.js

@@ -6,7 +6,7 @@ const path = require('path')
 function run(input, config = {}) {
   const { currentTestName } = expect.getState()
 
-  return postcss([tailwind(config)]).process(input, {
+  return postcss(tailwind(config)).process(input, {
     from: `${path.resolve(__filename)}?test=${currentTestName}`,
   })
 }
@@ -139,7 +139,7 @@ test('@apply', () => {
     let expectedPath = path.resolve(__dirname, './apply.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })
 

jit/tests/arbitrary-values.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('arbitrary values', () => {
@@ -25,6 +25,6 @@ test('arbitrary values', () => {
     let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/basic-usage.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('basic usage', () => {
@@ -25,6 +25,6 @@ test('basic usage', () => {
     let expectedPath = path.resolve(__dirname, './basic-usage.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/collapse-adjacent-rules.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('collapse adjacent rules', () => {
@@ -50,6 +50,6 @@ test('collapse adjacent rules', () => {
     let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/context-reuse.worker.js

@@ -8,7 +8,7 @@ const configPath = path.resolve(__dirname, './context-reuse.tailwind.config.js')
 function run(input, config = {}, from = null) {
   from = from || path.resolve(__filename)
 
-  return postcss([tailwind(config)]).process(input, { from })
+  return postcss(tailwind(config)).process(input, { from })
 }
 
 async function runTest() {

jit/tests/custom-extractors.test.js

@@ -5,7 +5,7 @@ const path = require('path')
 function run(input, config = {}) {
   jest.resetModules()
   const tailwind = require('../index.js')
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 function customExtractor(content) {
@@ -35,7 +35,7 @@ test('defaultExtractor', () => {
   }
 
   return run(css, config).then((result) => {
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })
 
@@ -58,6 +58,6 @@ test('extractors array', () => {
   }
 
   return run(css, config).then((result) => {
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/custom-separator.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('custom separator', () => {
@@ -23,6 +23,6 @@ test('custom separator', () => {
     let expectedPath = path.resolve(__dirname, './custom-separator.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/import-syntax.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('using @import instead of @tailwind', () => {
@@ -33,6 +33,6 @@ test('using @import instead of @tailwind', () => {
     let expectedPath = path.resolve(__dirname, './import-syntax.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/important-boolean.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('important boolean', () => {
@@ -65,6 +65,6 @@ test('important boolean', () => {
     let expectedPath = path.resolve(__dirname, './important-boolean.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/important-modifier-prefix.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('important modifier with prefix', () => {
@@ -28,6 +28,6 @@ test('important modifier with prefix', () => {
     let expectedPath = path.resolve(__dirname, './important-modifier-prefix.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/important-modifier.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('important modifier', () => {
@@ -27,6 +27,6 @@ test('important modifier', () => {
     let expectedPath = path.resolve(__dirname, './important-modifier.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/important-selector.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('important selector', () => {
@@ -65,6 +65,6 @@ test('important selector', () => {
     let expectedPath = path.resolve(__dirname, './important-selector.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/kitchen-sink.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('it works', () => {
@@ -161,6 +161,6 @@ test('it works', () => {
     let expectedPath = path.resolve(__dirname, './kitchen-sink.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/modify-selectors.test.js

@@ -5,7 +5,7 @@ const path = require('path')
 const selectorParser = require('postcss-selector-parser')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('modify selectors', () => {
@@ -45,6 +45,6 @@ test('modify selectors', () => {
     let expectedPath = path.resolve(__dirname, './modify-selectors.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/mutable.test.js

@@ -18,7 +18,7 @@ function pluginThatMutatesRules() {
 }
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test.only('plugins mutating rules after tailwind doesnt break it', async () => {
@@ -38,7 +38,7 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => {
     let expectedPath = path.resolve(__dirname, './mutable.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   }
 
   // Verify the first run produces the expected result

jit/tests/prefix.fn.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('prefix fn', () => {
@@ -29,6 +29,6 @@ test('prefix fn', () => {
     let expectedPath = path.resolve(__dirname, './prefix.fn.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/prefix.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('prefix', () => {
@@ -66,6 +66,6 @@ test('prefix', () => {
     let expectedPath = path.resolve(__dirname, './prefix.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/responsive-and-variants-atrules.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('responsive and variants atrules', () => {
@@ -83,6 +83,6 @@ test('responsive and variants atrules', () => {
     let expectedPath = path.resolve(__dirname, './responsive-and-variants-atrules.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/svelte-syntax.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('basic usage', () => {
@@ -25,6 +25,6 @@ test('basic usage', () => {
     let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })

jit/tests/variants.test.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
 }
 
 test('variants', () => {
@@ -26,6 +26,6 @@ test('variants', () => {
     let expectedPath = path.resolve(__dirname, './variants.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
-    expect(result.css).toMatchCss(expected)
+    expect(result.css).toMatchFormattedCss(expected)
   })
 })