From 895b92a157d4a4bddc967f168056db4f719328be Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 13:14:27 +0100 Subject: [PATCH 01/22] init --- .gitignore | 2 ++ index.js | 9 +++++++++ package.json | 24 ++++++++++++++++++++++++ test.js | 41 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 76 insertions(+) create mode 100644 .gitignore create mode 100644 index.js create mode 100644 package.json create mode 100644 test.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5e760f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules/ +/yarn.lock diff --git a/index.js b/index.js new file mode 100644 index 0000000..ab13eac --- /dev/null +++ b/index.js @@ -0,0 +1,9 @@ +module.exports = (variants) => { + return function ({ addUtilities }) { + addUtilities({ + '.test': { + display: 'block' + }, + }, variants) + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..671566a --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "tailwindcss-plugin-jest-example", + "version": "0.1.0", + "description": "An example showing how to write tests for for Tailwind CSS plugins.", + "main": "index.js", + "scripts": { + "test": "jest" + }, + "keywords": ["tailwindcss", "jest"], + "author": { + "name": "Oliver Davies", + "url" : "https://www.oliverdavies.uk" + }, + "license": "MIT", + "devDependencies": { + "jest": "^24.7.1", + "jest-matcher-css": "^1.0.3" + }, + "dependencies": { + "lodash": "^4.17.11", + "postcss": "^7.0.14", + "tailwindcss": "^1.0.0-beta.4" + } +} diff --git a/test.js b/test.js new file mode 100644 index 0000000..fb41ce2 --- /dev/null +++ b/test.js @@ -0,0 +1,41 @@ +const _ = require('lodash') +const cssMatcher = require('jest-matcher-css') +const defaultConfig = require('tailwindcss/defaultConfig') +const plugin = require('./index.js') +const postcss = require('postcss') +const tailwindcss = require('tailwindcss') + +const disableCorePlugins = () => { + return _.mapValues(defaultConfig.variants, plugin => { + return false + }) +} + +const generatePluginCss = () => { + return postcss( + tailwindcss({ + corePlugins: disableCorePlugins(), + plugins: [plugin()] + }) + ) + .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; + } + `) + }) +}) From dd79626ab1687c6a8c854d09b6f57fb3a0b8b013 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 13:15:57 +0100 Subject: [PATCH 02/22] Add .travis.yml --- .travis.yml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..cbcd902 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,17 @@ +language: node_js + +node_js: + - '8' + +cache: + directories: + - node_modules + +before_install: + - npm update + +install: + - npm install + +script: + - npm test From 9e45f9e44539f32b361ae53b2724c11c833d43c0 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 13:17:17 +0100 Subject: [PATCH 03/22] Add README.md --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..f25dfd0 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +# Testing Tailwind CSS Plugins with Jest + +WIP + +## License + +MIT + +## Author + +[Oliver Davies](https://www.oliverdavies.uk) - Full Stack Developer From b1b82323c64114e527c4708404c04f086c5c873f Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 13:22:14 +0100 Subject: [PATCH 04/22] Remove trailing comma --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index ab13eac..2d2c94f 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ module.exports = (variants) => { addUtilities({ '.test': { display: 'block' - }, + } }, variants) } } From 3706c3fce51aac6874d892db18925c5e43d11dca Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 13:26:27 +0100 Subject: [PATCH 05/22] Create LICENSE --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..53f4980 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Oliver Davies + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 73485e6d3d5906357a996956a7d873bdcf0d9a0b Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Apr 2019 20:59:01 +0100 Subject: [PATCH 06/22] 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 07/22] 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 08/22] 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 09/22] 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 10/22] 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 11/22] 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 12/22] 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 13/22] 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 14/22] 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 15/22] 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 16/22] 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 17/22] 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 18/22] 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 19/22] 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 20/22] 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 21/22] 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" } } From d4a1c1ddea3467a45bf27c7cc2c13385ba8b2c23 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Mon, 29 Sep 2025 22:53:24 +0100 Subject: [PATCH 22/22] Move all files to tailwindcss-plugin-jest/ --- .gitignore => tailwindcss-plugin-jest/.gitignore | 0 .travis.yml => tailwindcss-plugin-jest/.travis.yml | 0 LICENSE => tailwindcss-plugin-jest/LICENSE | 0 README.md => tailwindcss-plugin-jest/README.md | 0 index.js => tailwindcss-plugin-jest/index.js | 0 package.json => tailwindcss-plugin-jest/package.json | 0 test.js => tailwindcss-plugin-jest/test.js | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename .gitignore => tailwindcss-plugin-jest/.gitignore (100%) rename .travis.yml => tailwindcss-plugin-jest/.travis.yml (100%) rename LICENSE => tailwindcss-plugin-jest/LICENSE (100%) rename README.md => tailwindcss-plugin-jest/README.md (100%) rename index.js => tailwindcss-plugin-jest/index.js (100%) rename package.json => tailwindcss-plugin-jest/package.json (100%) rename test.js => tailwindcss-plugin-jest/test.js (100%) diff --git a/.gitignore b/tailwindcss-plugin-jest/.gitignore similarity index 100% rename from .gitignore rename to tailwindcss-plugin-jest/.gitignore diff --git a/.travis.yml b/tailwindcss-plugin-jest/.travis.yml similarity index 100% rename from .travis.yml rename to tailwindcss-plugin-jest/.travis.yml diff --git a/LICENSE b/tailwindcss-plugin-jest/LICENSE similarity index 100% rename from LICENSE rename to tailwindcss-plugin-jest/LICENSE diff --git a/README.md b/tailwindcss-plugin-jest/README.md similarity index 100% rename from README.md rename to tailwindcss-plugin-jest/README.md diff --git a/index.js b/tailwindcss-plugin-jest/index.js similarity index 100% rename from index.js rename to tailwindcss-plugin-jest/index.js diff --git a/package.json b/tailwindcss-plugin-jest/package.json similarity index 100% rename from package.json rename to tailwindcss-plugin-jest/package.json diff --git a/test.js b/tailwindcss-plugin-jest/test.js similarity index 100% rename from test.js rename to tailwindcss-plugin-jest/test.js