docs(daily-email): add 2023-01-04

website/src/daily-emails/2023-01-04.md

@@ -0,0 +1,63 @@
+---
+title: >
+  Testable Tailwind CSSplugins
+pubDate: 2023-01-04
+permalink: >
+  archive/2023/01/04/testable-tailwind-css-plugins
+tags:
+  - tailwind-css
+---
+
+A great thing about [Tailwind CSS plugins](https://www.oliverdavies.uk/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.