100 lines
No EOL
5.2 KiB
JSON
100 lines
No EOL
5.2 KiB
JSON
{
|
|
"uuid": [
|
|
{
|
|
"value": "e9de945c-0d20-4582-a813-c0651aa10c37"
|
|
}
|
|
],
|
|
"langcode": [
|
|
{
|
|
"value": "en"
|
|
}
|
|
],
|
|
"type": [
|
|
{
|
|
"target_id": "daily_email",
|
|
"target_type": "node_type",
|
|
"target_uuid": "8bde1f2f-eef9-4f2d-ae9c-96921f8193d7"
|
|
}
|
|
],
|
|
"revision_timestamp": [
|
|
{
|
|
"value": "2025-04-16T14:13:05+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-04-16T14:13:05+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=\"http:\/\/localhost:8000\/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', () => {\n const output = `\n .test {\n display: block\n }\n `\n\n run().then(result => {\n expect(result.css).toMatchCss(output)\n })\n})\n\ntest('it generates the correct classes with variants', () => {\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 => {\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=\"http:\/\/localhost:8000\/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', () => {\n const output = `\n .test {\n display: block\n }\n `\n\n run().then(result => {\n expect(result.css).toMatchCss(output)\n })\n})\n\ntest('it generates the correct classes with variants', () => {\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 => {\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": "2025-04-16T14:13:05+00:00",
|
|
"guid": null,
|
|
"hash": "97078d97135b009882d3897a0f07b4f2",
|
|
"target_type": "feeds_feed",
|
|
"target_uuid": "90c85284-7ca8-4074-9178-97ff8384fe76"
|
|
}
|
|
]
|
|
} |