oliverdavies.uk/content/node.79fdad19-834d-463e-89f6-059c0865a034.json

{
    "uuid": [
        {
            "value": "79fdad19-834d-463e-89f6-059c0865a034"
        }
    ],
    "langcode": [
        {
            "value": "en"
        }
    ],
    "type": [
        {
            "target_id": "daily_email",
            "target_type": "node_type",
            "target_uuid": "8bde1f2f-eef9-4f2d-ae9c-96921f8193d7"
        }
    ],
    "revision_timestamp": [
        {
            "value": "2025-05-11T09:00:48+00:00"
        }
    ],
    "revision_uid": [
        {
            "target_type": "user",
            "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849"
        }
    ],
    "revision_log": [],
    "status": [
        {
            "value": true
        }
    ],
    "uid": [
        {
            "target_type": "user",
            "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849"
        }
    ],
    "title": [
        {
            "value": "Testable Tailwind CSS plugins\n"
        }
    ],
    "created": [
        {
            "value": "2023-01-04T00:00:00+00:00"
        }
    ],
    "changed": [
        {
            "value": "2025-05-11T09:00:48+00:00"
        }
    ],
    "promote": [
        {
            "value": false
        }
    ],
    "sticky": [
        {
            "value": false
        }
    ],
    "default_langcode": [
        {
            "value": true
        }
    ],
    "revision_translation_affected": [
        {
            "value": true
        }
    ],
    "path": [
        {
            "alias": "\/daily\/2023\/01\/04\/testable-tailwind-css-plugins",
            "langcode": "en"
        }
    ],
    "body": [
        {
            "value": "\n          <p>A great thing about <a href=\"https:\/\/www.oliverdavies.uk\/daily\/2023\/01\/03\/tailwind-css-extensibility-is-one-of-its-best-features\">Tailwind CSS plugins<\/a> being written in JavaScript is that they can be tested using tools like Jest.<\/p>\n\n<p>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):<\/p>\n\n<pre><code class=\"javascript\">function run(options = {}) {\n  return postcss(\n    tailwindcss({\n      corePlugins: false,\n      plugins: [plugin(options)]\n    })\n  )\n  .process('@tailwind utilities;', {\n    from: undefined\n  })\n}\n\nexpect.extend({\n  toMatchCss: cssMatcher\n})\n\ntest('it generates the correct classes with no variants', () =&gt; {\n  const output = `\n    .test {\n      display: block\n    }\n  `\n\n  run().then(result =&gt; {\n    expect(result.css).toMatchCss(output)\n  })\n})\n\ntest('it generates the correct classes with variants', () =&gt; {\n  const output = `\n    .test {\n      display: block\n    }\n    .hover\\\\:test:hover {\n      display: block\n    }\n    .focus\\\\:test:focus {\n      display: block\n    }\n  `\n\n  run({ variants: ['hover', 'focus'] }).then(result =&gt; {\n    expect(result.css).toMatchCss(output)\n  })\n});\n<\/code><\/pre>\n\n<p>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.<\/p>\n\n        ",
            "format": "full_html",
            "processed": "\n          <p>A great thing about <a href=\"https:\/\/www.oliverdavies.uk\/daily\/2023\/01\/03\/tailwind-css-extensibility-is-one-of-its-best-features\">Tailwind CSS plugins<\/a> being written in JavaScript is that they can be tested using tools like Jest.<\/p>\n\n<p>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):<\/p>\n\n<pre><code class=\"javascript\">function run(options = {}) {\n  return postcss(\n    tailwindcss({\n      corePlugins: false,\n      plugins: [plugin(options)]\n    })\n  )\n  .process('@tailwind utilities;', {\n    from: undefined\n  })\n}\n\nexpect.extend({\n  toMatchCss: cssMatcher\n})\n\ntest('it generates the correct classes with no variants', () =&gt; {\n  const output = `\n    .test {\n      display: block\n    }\n  `\n\n  run().then(result =&gt; {\n    expect(result.css).toMatchCss(output)\n  })\n})\n\ntest('it generates the correct classes with variants', () =&gt; {\n  const output = `\n    .test {\n      display: block\n    }\n    .hover\\\\:test:hover {\n      display: block\n    }\n    .focus\\\\:test:focus {\n      display: block\n    }\n  `\n\n  run({ variants: ['hover', 'focus'] }).then(result =&gt; {\n    expect(result.css).toMatchCss(output)\n  })\n});\n<\/code><\/pre>\n\n<p>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.<\/p>\n\n        ",
            "summary": null
        }
    ],
    "feeds_item": [
        {
            "imported": "1970-01-01T00:33:45+00:00",
            "guid": null,
            "hash": "66179cf5075396d9979accd64d8ccb0d",
            "target_type": "feeds_feed",
            "target_uuid": "90c85284-7ca8-4074-9178-97ff8384fe76"
        }
    ]
}