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/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)
  })
 })