From 73485e6d3d5906357a996956a7d873bdcf0d9a0b Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 20:59:01 +0100 Subject: [PATCH 01/16] Add test for classes with variants --- test.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/test.js b/test.js index fb41ce2..6251fc1 100644 --- a/test.js +++ b/test.js @@ -11,11 +11,11 @@ const disableCorePlugins = () => { }) } -const generatePluginCss = () => { +const generatePluginCss = (options = {}) => { return postcss( tailwindcss({ corePlugins: disableCorePlugins(), - plugins: [plugin()] + plugins: [plugin(options)] }) ) .process('@tailwind utilities;', { @@ -30,7 +30,7 @@ expect.extend({ toMatchCss: cssMatcher }) -test('it generates classes', () => { +test('it generates the correct classes with no variants', () => { return generatePluginCss().then(css => { expect(css).toMatchCss(` .test { @@ -39,3 +39,21 @@ test('it generates classes', () => { `) }) }) + +test('it generates the correct classes with variants', () => { + return generatePluginCss({ variants: ['hover', 'focus'] }).then(css => { + expect(css).toMatchCss(` + .test { + display: block; + } + + .hover\\:test:hover { + display: block; + } + + .focus\\:test:focus { + display: block; + } + `) + }) +}) From c5387b099f266e1bb93b0266e5457efe0ed99dd2 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 13:25:01 +0100 Subject: [PATCH 02/16] Simplify disabling core plugins --- test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test.js b/test.js index 6251fc1..0858b50 100644 --- a/test.js +++ b/test.js @@ -6,9 +6,7 @@ const postcss = require('postcss') const tailwindcss = require('tailwindcss') const disableCorePlugins = () => { - return _.mapValues(defaultConfig.variants, plugin => { - return false - }) + return _.mapValues(defaultConfig.variants, () => false) } const generatePluginCss = (options = {}) => { From 6f6617381257627e6f9122b4838ef8d02f8a19ec Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 23 Apr 2019 21:37:39 +0100 Subject: [PATCH 03/16] Update tailwindcss --- package.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 671566a..37e289a 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": { @@ -19,6 +22,6 @@ "dependencies": { "lodash": "^4.17.11", "postcss": "^7.0.14", - "tailwindcss": "^1.0.0-beta.4" + "tailwindcss": "^1.0.0-beta.5" } } From 068aecad52ef5a101be588e3033c145b225557a4 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 23 Apr 2019 21:41:00 +0100 Subject: [PATCH 04/16] Fix existing tests --- test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test.js b/test.js index 0858b50..6276d74 100644 --- a/test.js +++ b/test.js @@ -32,7 +32,7 @@ test('it generates the correct classes with no variants', () => { return generatePluginCss().then(css => { expect(css).toMatchCss(` .test { - display: block; + display: block } `) }) @@ -42,15 +42,15 @@ test('it generates the correct classes with variants', () => { return generatePluginCss({ variants: ['hover', 'focus'] }).then(css => { expect(css).toMatchCss(` .test { - display: block; + display: block } .hover\\:test:hover { - display: block; + display: block } .focus\\:test:focus { - display: block; + display: block } `) }) From 6b11d05dfde6d56ff30513e72696708d1510829f Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 23 Apr 2019 21:41:38 +0100 Subject: [PATCH 05/16] Remove disableCorePlugins --- test.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/test.js b/test.js index 6276d74..dc0eb2e 100644 --- a/test.js +++ b/test.js @@ -5,14 +5,10 @@ const plugin = require('./index.js') const postcss = require('postcss') const tailwindcss = require('tailwindcss') -const disableCorePlugins = () => { - return _.mapValues(defaultConfig.variants, () => false) -} - const generatePluginCss = (options = {}) => { return postcss( tailwindcss({ - corePlugins: disableCorePlugins(), + corePlugins: false, plugins: [plugin(options)] }) ) From 5195eb9040982f558a2a21132a259944e132b04a Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 23 Apr 2019 21:42:05 +0100 Subject: [PATCH 06/16] Remove lodash No longer needed. :) --- package.json | 1 - test.js | 1 - 2 files changed, 2 deletions(-) diff --git a/package.json b/package.json index 37e289a..68f38bf 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "jest-matcher-css": "^1.0.3" }, "dependencies": { - "lodash": "^4.17.11", "postcss": "^7.0.14", "tailwindcss": "^1.0.0-beta.5" } diff --git a/test.js b/test.js index dc0eb2e..08c56a8 100644 --- a/test.js +++ b/test.js @@ -1,4 +1,3 @@ -const _ = require('lodash') const cssMatcher = require('jest-matcher-css') const defaultConfig = require('tailwindcss/defaultConfig') const plugin = require('./index.js') From db8240c54711ef3f4ae4b53a7101121a87055e03 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 1 May 2019 19:38:06 +0100 Subject: [PATCH 07/16] Inline function --- test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test.js b/test.js index 08c56a8..e7e726b 100644 --- a/test.js +++ b/test.js @@ -14,9 +14,7 @@ const generatePluginCss = (options = {}) => { .process('@tailwind utilities;', { from: undefined }) - .then(result => { - return result.css - }) + .then(result => result.css) } expect.extend({ From f0e56bf204eaab065c38d2b5ac6ea2974e48a250 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 1 May 2019 19:38:49 +0100 Subject: [PATCH 08/16] Inline function --- index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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) } From fd3018d1e0280ddf47c88f725d8edc14a844aefa Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 1 May 2019 19:40:39 +0100 Subject: [PATCH 09/16] Unneeded file extension --- test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test.js b/test.js index e7e726b..3f80740 100644 --- a/test.js +++ b/test.js @@ -1,6 +1,6 @@ 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') From 166e4febfaf89ab746802bcfb636dcb5f7dc7652 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 1 May 2019 19:42:55 +0100 Subject: [PATCH 10/16] Update README Fixes #2 --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 From 4fc24873ac4ef7ce0731287ecf964f0dcb60dca4 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 1 May 2019 20:00:33 +0100 Subject: [PATCH 11/16] No need to return --- test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test.js b/test.js index 3f80740..3a8e29a 100644 --- a/test.js +++ b/test.js @@ -22,7 +22,7 @@ expect.extend({ }) test('it generates the correct classes with no variants', () => { - return generatePluginCss().then(css => { + generatePluginCss().then(css => { expect(css).toMatchCss(` .test { display: block @@ -32,7 +32,7 @@ test('it generates the correct classes with no variants', () => { }) test('it generates the correct classes with variants', () => { - return generatePluginCss({ variants: ['hover', 'focus'] }).then(css => { + generatePluginCss({ variants: ['hover', 'focus'] }).then(css => { expect(css).toMatchCss(` .test { display: block From 00dc589c9c2103219ad92e69d6a1f8f2138b4521 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 2 May 2019 01:47:40 +0100 Subject: [PATCH 12/16] Change function format for generatePluginCss --- test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test.js b/test.js index 3a8e29a..70b2f86 100644 --- a/test.js +++ b/test.js @@ -4,7 +4,7 @@ const plugin = require('./index') const postcss = require('postcss') const tailwindcss = require('tailwindcss') -const generatePluginCss = (options = {}) => { +function generatePluginCss(options = {}) { return postcss( tailwindcss({ corePlugins: false, From 388eb307cab8a06b9452c738b5cae1b940380b9e Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 2 May 2019 01:48:16 +0100 Subject: [PATCH 13/16] Inline result --- test.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/test.js b/test.js index 70b2f86..e51092b 100644 --- a/test.js +++ b/test.js @@ -14,7 +14,6 @@ function generatePluginCss(options = {}) { .process('@tailwind utilities;', { from: undefined }) - .then(result => result.css) } expect.extend({ @@ -22,8 +21,8 @@ expect.extend({ }) test('it generates the correct classes with no variants', () => { - generatePluginCss().then(css => { - expect(css).toMatchCss(` + generatePluginCss().then(result => { + expect(result.css).toMatchCss(` .test { display: block } @@ -32,8 +31,8 @@ test('it generates the correct classes with no variants', () => { }) test('it generates the correct classes with variants', () => { - generatePluginCss({ variants: ['hover', 'focus'] }).then(css => { - expect(css).toMatchCss(` + generatePluginCss({ variants: ['hover', 'focus'] }).then(result => { + expect(result.css).toMatchCss(` .test { display: block } From 98021467bfdd886af541bd2def46c0592339d0bf Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 2 May 2019 01:49:20 +0100 Subject: [PATCH 14/16] Extract output constants --- test.js | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/test.js b/test.js index e51092b..4911670 100644 --- a/test.js +++ b/test.js @@ -21,29 +21,33 @@ expect.extend({ }) test('it generates the correct classes with no variants', () => { + const output = ` + .test { + display: block + } + ` + generatePluginCss().then(result => { - expect(result.css).toMatchCss(` - .test { - display: block - } - `) + 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 + } + ` + generatePluginCss({ variants: ['hover', 'focus'] }).then(result => { - expect(result.css).toMatchCss(` - .test { - display: block - } - - .hover\\:test:hover { - display: block - } - - .focus\\:test:focus { - display: block - } - `) + expect(result.css).toMatchCss(output) }) }) From 81e2052ca208ec492316e86fe13c6364d22a581d Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 2 May 2019 01:51:43 +0100 Subject: [PATCH 15/16] Rename generatePluginCss to run --- test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test.js b/test.js index 4911670..6ed76e5 100644 --- a/test.js +++ b/test.js @@ -4,7 +4,7 @@ const plugin = require('./index') const postcss = require('postcss') const tailwindcss = require('tailwindcss') -function generatePluginCss(options = {}) { +function run(options = {}) { return postcss( tailwindcss({ corePlugins: false, @@ -27,7 +27,7 @@ test('it generates the correct classes with no variants', () => { } ` - generatePluginCss().then(result => { + run().then(result => { expect(result.css).toMatchCss(output) }) }) @@ -47,7 +47,7 @@ test('it generates the correct classes with variants', () => { } ` - generatePluginCss({ variants: ['hover', 'focus'] }).then(result => { + run({ variants: ['hover', 'focus'] }).then(result => { expect(result.css).toMatchCss(output) }) }) From 9935d675e37d1f61e6bbbd92ba3d0c2bd6e15b36 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Mon, 13 May 2019 19:47:34 +0100 Subject: [PATCH 16/16] Update Tailwind to 1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 68f38bf..785016b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,6 @@ }, "dependencies": { "postcss": "^7.0.14", - "tailwindcss": "^1.0.0-beta.5" + "tailwindcss": "^1.0.1" } }