64 lines
1.6 KiB
Markdown
64 lines
1.6 KiB
Markdown
---
|
|
title: >
|
|
Testable Tailwind CSS plugins
|
|
pubDate: 2023-01-04
|
|
permalink: >-
|
|
archive/2023/01/04/testable-tailwind-css-plugins
|
|
tags:
|
|
- tailwind-css
|
|
---
|
|
|
|
A great thing about [Tailwind CSS plugins]({{site.url}}/archive/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features) being written in JavaScript is that they can be tested using tools like Jest.
|
|
|
|
Here's an example from https://github.com/opdavies/tailwindcss-plugin-jest-example (it may need updating to work with the latest Tailwind versions or to use the latest best practices):
|
|
|
|
```javascript
|
|
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)
|
|
})
|
|
});
|
|
```
|
|
|
|
Within the test, Tailwind can be run using PostCSS and generates styles based on a provided configuration, which is then checked against some expected output. If the generated styles match what was expected, the tests pass and the plugin is working as expected.
|