diff --git a/README.md b/README.md index f25dfd0..17b9cb9 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 2d2c94f..6946e9d 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,7 @@ -module.exports = (variants) => { - return function ({ addUtilities }) { - addUtilities({ - '.test': { - display: 'block' - } - }, variants) - } +module.exports = (variants) => ({ addUtilities }) => { + addUtilities({ + '.test': { + display: 'block' + } + }, variants) } diff --git a/package.json b/package.json index 671566a..785016b 100644 --- a/package.json +++ b/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" } } diff --git a/test.js b/test.js index fb41ce2..6ed76e5 100644 --- a/test.js +++ b/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 = () => { - return _.mapValues(defaultConfig.variants, plugin => { - return false - }) -} - -const generatePluginCss = () => { +function run(options = {}) { return postcss( tailwindcss({ - corePlugins: disableCorePlugins(), - plugins: [plugin()] + corePlugins: false, + plugins: [plugin(options)] }) ) .process('@tailwind utilities;', { from: undefined }) - .then(result => { - return result.css - }) } expect.extend({ toMatchCss: cssMatcher }) -test('it generates classes', () => { - return generatePluginCss().then(css => { - expect(css).toMatchCss(` - .test { - display: block; - } - `) +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) }) })