diff --git a/tailwindcss-plugin-jest/.gitignore b/tailwindcss-plugin-jest/.gitignore new file mode 100644 index 0000000..5e760f6 --- /dev/null +++ b/tailwindcss-plugin-jest/.gitignore @@ -0,0 +1,2 @@ +/node_modules/ +/yarn.lock diff --git a/tailwindcss-plugin-jest/.travis.yml b/tailwindcss-plugin-jest/.travis.yml new file mode 100644 index 0000000..cbcd902 --- /dev/null +++ b/tailwindcss-plugin-jest/.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 diff --git a/tailwindcss-plugin-jest/LICENSE b/tailwindcss-plugin-jest/LICENSE new file mode 100644 index 0000000..53f4980 --- /dev/null +++ b/tailwindcss-plugin-jest/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. diff --git a/tailwindcss-plugin-jest/README.md b/tailwindcss-plugin-jest/README.md new file mode 100644 index 0000000..17b9cb9 --- /dev/null +++ b/tailwindcss-plugin-jest/README.md @@ -0,0 +1,15 @@ +# Testing Tailwind CSS Plugins with Jest + +An example of how to use [Jest][jest], a JavaScript testing framework, for testing [Tailwind CSS][tailwind] plugins. + +## License + +MIT + +## Author + +[Oliver Davies][website] - Full Stack Developer + +[jest]: https://jestjs.io +[tailwind]: https://tailwindcss.com +[website]: https://www.oliverdavies.uk diff --git a/tailwindcss-plugin-jest/index.js b/tailwindcss-plugin-jest/index.js new file mode 100644 index 0000000..6946e9d --- /dev/null +++ b/tailwindcss-plugin-jest/index.js @@ -0,0 +1,7 @@ +module.exports = (variants) => ({ addUtilities }) => { + addUtilities({ + '.test': { + display: 'block' + } + }, variants) +} diff --git a/tailwindcss-plugin-jest/package.json b/tailwindcss-plugin-jest/package.json new file mode 100644 index 0000000..785016b --- /dev/null +++ b/tailwindcss-plugin-jest/package.json @@ -0,0 +1,26 @@ +{ + "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": { + "postcss": "^7.0.14", + "tailwindcss": "^1.0.1" + } +} diff --git a/tailwindcss-plugin-jest/test.js b/tailwindcss-plugin-jest/test.js new file mode 100644 index 0000000..6ed76e5 --- /dev/null +++ b/tailwindcss-plugin-jest/test.js @@ -0,0 +1,53 @@ +const cssMatcher = require('jest-matcher-css') +const defaultConfig = require('tailwindcss/defaultConfig') +const plugin = require('./index') +const postcss = require('postcss') +const tailwindcss = require('tailwindcss') + +function run(options = {}) { + return postcss( + tailwindcss({ + corePlugins: false, + plugins: [plugin(options)] + }) + ) + .process('@tailwind utilities;', { + from: undefined + }) +} + +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) + }) +})