Update Tailwind to 1.0

Fixes #2

README.md

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

index.js

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

package.json

@@ -6,10 +6,13 @@
   "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": {
@@ -17,8 +20,7 @@
     "jest-matcher-css": "^1.0.3"
   },
   "dependencies": {
-    "lodash": "^4.17.11",
     "postcss": "^7.0.14",
-    "tailwindcss": "^1.0.0-beta.4"
+    "tailwindcss": "^1.0.1"
   }
 }

test.js

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