diff --git a/README.md b/README.md index 17b9cb9..f25dfd0 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 6946e9d..2d2c94f 100644 --- a/index.js +++ b/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) + } } diff --git a/package.json b/package.json index 785016b..671566a 100644 --- a/package.json +++ b/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" } } diff --git a/test.js b/test.js index 6ed76e5..fb41ce2 100644 --- a/test.js +++ b/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; + } + `) }) })