From 042d2dce283ddd3c43ed5d71d9e4271bca91166d Mon Sep 17 00:00:00 2001 From: Vlad Tansky Date: Wed, 7 Dec 2022 01:06:48 +0200 Subject: [PATCH] test: add generated css test (#15) --- package-lock.json | 13 +++--- package.json | 1 + tests/output.test.js | 101 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 6 deletions(-) create mode 100644 tests/output.test.js diff --git a/package-lock.json b/package-lock.json index 2d01fbe..b78f7d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@swc/register": "0.1.10", "eslint": "8.29.0", "jest": "29.3.1", + "postcss": "8.4.19", "prettier": "2.8.0", "tailwindcss": "3.2.1" }, @@ -5716,9 +5717,9 @@ } }, "node_modules/postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "dev": true, "funding": [ { @@ -11369,9 +11370,9 @@ } }, "postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "dev": true, "requires": { "nanoid": "^3.3.4", diff --git a/package.json b/package.json index d2f5dcb..444b3aa 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@swc/register": "0.1.10", "eslint": "8.29.0", "jest": "29.3.1", + "postcss": "8.4.19", "prettier": "2.8.0", "tailwindcss": "3.2.1" }, diff --git a/tests/output.test.js b/tests/output.test.js new file mode 100644 index 0000000..1d4b1e6 --- /dev/null +++ b/tests/output.test.js @@ -0,0 +1,101 @@ +import postcss from "postcss"; +import vanillaRTL from "../dist"; +import tailwindcss from "tailwindcss"; + +const utilities = [ + "mx-0", + "mr-0", + "ml-0", + "px-0", + "pr-0", + "pl-0", + "inset-0", + "inset-x-0", + "right-0", + "left-0", + "space-x-0", + "scroll-mx-0", + "scroll-mr-0", + "scroll-ml-0", + "scroll-px-0", + "scroll-pr-0", + "scroll-pl-0", + "rounded-t-[JIT]", + "rounded-r-[JIT]", + "rounded-b-[JIT]", + "rounded-l-[JIT]", + "rounded-tl-[JIT]", + "rounded-tr-[JIT]", + "rounded-br-[JIT]", + "rounded-bl-[JIT]", + "border-x-0", + "border-r-0", + "border-l-0", + "border-x-black", + "border-r-black", + "border-l-black", + "divide-x-0", + "text-right", + "text-left", +]; + +const trimmer = (val) => val.replace(/\s+/g, " ").trim(); + +it("has consistent output", () => { + const output = utilities.map((className) => { + const processor = postcss([ + tailwindcss({ + content: [ + { + raw: className, + }, + ], + plugins: [vanillaRTL], + corePlugins: { + ...vanillaRTL.disabledCorePlugins, + }, + }), + ]); + const output = processor.process("@tailwind utilities").css; + return trimmer(output); + }); + + expect(output).toMatchInlineSnapshot(` + [ + ".mx-0 { margin-inline-start: 0px; margin-inline-end: 0px }", + ".mr-0 { margin-inline-end: 0px }", + ".ml-0 { margin-inline-start: 0px }", + ".px-0 { padding-inline-start: 0px; padding-inline-end: 0px }", + ".pr-0 { padding-inline-end: 0px }", + ".pl-0 { padding-inline-start: 0px }", + ".inset-0 { top: 0px; inset-inline-end: 0px; bottom: 0px; inset-inline-start: 0px }", + ".inset-x-0 { inset-inline-start: 0px; inset-inline-end: 0px }", + ".right-0 { inset-inline-end: 0px }", + ".left-0 { inset-inline-start: 0px }", + ".space-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-inline-end: calc(0px * var(--tw-space-x-reverse)); margin-inline-start: calc(0px * calc(1 - var(--tw-space-x-reverse))) }", + ".scroll-mx-0 { scroll-margin-inline-start: 0px; scroll-margin-inline-end: 0px }", + ".scroll-mr-0 { scroll-margin-inline-end: 0px }", + ".scroll-ml-0 { scroll-margin-inline-start: 0px }", + ".scroll-px-0 { scroll-padding-left: 0px; scroll-padding-inline-start: 0px; scroll-padding-right: 0px; scroll-padding-inline-end: 0px }", + ".scroll-pr-0 { scroll-padding-right: 0px; scroll-padding-inline-end: 0px }", + ".scroll-pl-0 { scroll-padding-left: 0px; scroll-padding-inline-start: 0px }", + ".rounded-t-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT; border-top-right-radius: JIT; border-start-end-radius: JIT }", + ".rounded-r-\\[JIT\\] { border-top-right-radius: JIT; border-start-end-radius: JIT; border-bottom-right-radius: JIT; border-end-end-radius: JIT }", + ".rounded-b-\\[JIT\\] { border-bottom-right-radius: JIT; border-end-end-radius: JIT; border-bottom-left-radius: JIT; border-end-start-radius: JIT }", + ".rounded-l-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT; border-bottom-left-radius: JIT; border-end-start-radius: JIT }", + ".rounded-tl-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT }", + ".rounded-tr-\\[JIT\\] { border-top-right-radius: JIT; border-start-end-radius: JIT }", + ".rounded-br-\\[JIT\\] { border-bottom-right-radius: JIT; border-end-end-radius: JIT }", + ".rounded-bl-\\[JIT\\] { border-bottom-left-radius: JIT; border-end-start-radius: JIT }", + ".border-x-0 { border-inline-start-width: 0px; border-inline-end-width: 0px }", + ".border-r-0 { border-inline-end-width: 0px }", + ".border-l-0 { border-inline-start-width: 0px }", + ".border-x-black { --tw-border-opacity: 1; border-inline-start-color: rgb(0 0 0 / var(--tw-border-opacity)); border-inline-end-color: rgb(0 0 0 / var(--tw-border-opacity)) }", + ".border-r-black { --tw-border-opacity: 1; border-inline-end-color: rgb(0 0 0 / var(--tw-border-opacity)) }", + ".border-l-black { --tw-border-opacity: 1; border-inline-start-color: rgb(0 0 0 / var(--tw-border-opacity)) }", + ".divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))) }", + ".text-right { text-align: end }", + ".text-left { text-align: start }", + ] + `); +});