README.md

@@ -1,6 +1,6 @@
 # Testing Tailwind CSS Plugins with Jest
 
-An example of how to use [Jest][jest], a JavaScript testing framework, for testing [Tailwind CSS][tailwind] plugins.
+WIP
 
 ## License
 
@@ -8,8 +8,4 @@ MIT
 
 ## Author
 
-[Oliver Davies][website] - Full Stack Developer
-
-[jest]: https://jestjs.io
-[tailwind]: https://tailwindcss.com
-[website]: https://www.oliverdavies.uk
+[Oliver Davies](https://www.oliverdavies.uk) - Full Stack Developer

index.js

@@ -1,7 +1,9 @@
-module.exports = (variants) => ({ addUtilities }) => {
-  addUtilities({
-    '.test': {
-      display: 'block'
-    }
-  }, variants)
+module.exports = (variants) => {
+  return function ({ addUtilities }) {
+    addUtilities({
+      '.test': {
+        display: 'block'
+      }
+    }, variants)
+  }
 }

package.json

@@ -6,13 +6,10 @@
   "scripts": {
     "test": "jest"
   },
-  "keywords": [
-    "tailwindcss",
-    "jest"
-  ],
+  "keywords": ["tailwindcss", "jest"],
   "author": {
     "name": "Oliver Davies",
-    "url": "https://www.oliverdavies.uk"
+    "url" : "https://www.oliverdavies.uk"
   },
   "license": "MIT",
   "devDependencies": {
@@ -20,7 +17,8 @@
     "jest-matcher-css": "^1.0.3"
   },
   "dependencies": {
+    "lodash": "^4.17.11",
     "postcss": "^7.0.14",
-    "tailwindcss": "^1.0.1"
+    "tailwindcss": "^1.0.0-beta.4"
   }
 }

test.js

@@ -1,53 +1,41 @@
+const _ = require('lodash')
 const cssMatcher = require('jest-matcher-css')
 const defaultConfig = require('tailwindcss/defaultConfig')
-const plugin = require('./index')
+const plugin = require('./index.js')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
 
-function run(options = {}) {
+const disableCorePlugins = () => {
+  return _.mapValues(defaultConfig.variants, plugin => {
+    return false
+  })
+}
+
+const generatePluginCss = () => {
   return postcss(
     tailwindcss({
-      corePlugins: false,
-      plugins: [plugin(options)]
+      corePlugins: disableCorePlugins(),
+      plugins: [plugin()]
     })
   )
   .process('@tailwind utilities;', {
     from: undefined
   })
+  .then(result => {
+    return result.css
+  })
 }
 
 expect.extend({
   toMatchCss: cssMatcher
 })
 
-test('it generates the correct classes with no variants', () => {
-  const output = `
-    .test {
-      display: block
-    }
-  `
-
-  run().then(result => {
-    expect(result.css).toMatchCss(output)
-  })
-})
-
-test('it generates the correct classes with variants', () => {
-  const output = `
-    .test {
-      display: block
-    }
-
-    .hover\\:test:hover {
-      display: block
-    }
-
-    .focus\\:test:focus {
-      display: block
-    }
-  `
-
-  run({ variants: ['hover', 'focus'] }).then(result => {
-    expect(result.css).toMatchCss(output)
+test('it generates classes', () => {
+  return generatePluginCss().then(css => {
+    expect(css).toMatchCss(`
+      .test {
+        display: block;
+      }
+    `)
   })
 })