From 2e79b2aaafabd63dcdef30adf1819dca15cbd565 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Wed, 20 Aug 2025 23:16:01 +1000 Subject: [PATCH] fix: ignore 'initial' keyword --- src/__tests__/vendor/tailwind/_tailwind.tsx | 2 +- .../vendor/tailwind/backgrounds.test.tsx | 356 ++++++++++++++++++ ...queries.tsx => container-queries.test.tsx} | 0 .../tailwind/{groups.tsx => groups.test.tsx} | 0 .../vendor/tailwind/transform.test.ts | 25 ++ src/compiler/declarations.ts | 2 +- 6 files changed, 383 insertions(+), 2 deletions(-) create mode 100644 src/__tests__/vendor/tailwind/backgrounds.test.tsx rename src/__tests__/vendor/tailwind/{container-queries.tsx => container-queries.test.tsx} (100%) rename src/__tests__/vendor/tailwind/{groups.tsx => groups.test.tsx} (100%) diff --git a/src/__tests__/vendor/tailwind/_tailwind.tsx b/src/__tests__/vendor/tailwind/_tailwind.tsx index c8307473..1011808e 100644 --- a/src/__tests__/vendor/tailwind/_tailwind.tsx +++ b/src/__tests__/vendor/tailwind/_tailwind.tsx @@ -85,7 +85,7 @@ export async function render( console.log(`Output CSS:\n---\n${output}\n---\n`); } - const compiled = registerCSS(output, { debug }); + const compiled = registerCSS(output, { debug: false }); return Object.assign( {}, diff --git a/src/__tests__/vendor/tailwind/backgrounds.test.tsx b/src/__tests__/vendor/tailwind/backgrounds.test.tsx new file mode 100644 index 00000000..7f28fa1d --- /dev/null +++ b/src/__tests__/vendor/tailwind/backgrounds.test.tsx @@ -0,0 +1,356 @@ +import { renderCurrentTest, renderSimple } from "./_tailwind"; + +describe("Backgrounds - Background Attachment", () => { + test("bg-fixed", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-attachment"] }, + }); + }); + test("bg-local", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-attachment"] }, + }); + }); + test("bg-scroll", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-attachment"] }, + }); + }); +}); + +describe("Backgrounds - Background Clip", () => { + test("bg-clip-border", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-clip"] }, + }); + }); + test("bg-clip-padding", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-clip"] }, + }); + }); + test("bg-clip-content", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-clip"] }, + }); + }); + test("bg-clip-text", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-clip"] }, + }); + }); +}); + +describe("Backgrounds - Background Color", () => { + test("bg-current", async () => { + expect( + await renderSimple({ className: "bg-current text-red-500" }), + ).toStrictEqual({ + props: { + style: { + color: "#fb2c36", + backgroundColor: "#fb2c36", + }, + }, + }); + }); + + test("bg-transparent", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { backgroundColor: "#0000" } }, + }); + }); + + test("bg-white", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { backgroundColor: "#fff" } }, + }); + }); +}); + +describe("Backgrounds - Background Origin", () => { + test("bg-origin-border", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-origin"] }, + }); + }); + test("bg-origin-padding", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-origin"] }, + }); + }); + test("bg-origin-content", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-origin"] }, + }); + }); +}); + +describe("Backgrounds - Background Position", () => { + test("bg-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-left-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-left-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-right-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-right-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); + test("bg-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-position"] }, + }); + }); +}); + +describe("Backgrounds - Background Repeat", () => { + test("bg-repeat", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-repeat"] }, + }); + }); +}); + +describe("Backgrounds - Background Size", () => { + test("bg-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-size"] }, + }); + }); + test("bg-cover", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-size"] }, + }); + }); + test("bg-contain", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-size"] }, + }); + }); +}); + +describe("Backgrounds - Background Image", () => { + test("bg-none", async () => { + expect( + await renderSimple({ + className: "bg-none", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: ["none"], + }, + }, + }); + }); + test("bg-gradient-to-t", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-t from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to top in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-tr", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-tr from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to top right in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-r", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-r from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to right in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-br", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-br from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to bottom right in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-b", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-b from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to bottom in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-bl", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-bl from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to bottom left in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-l", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-l from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to left in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); + test("bg-gradient-to-tl", async () => { + expect( + await renderSimple({ + className: "bg-gradient-to-tl from-red-500 to-blue-500", + }), + ).toStrictEqual({ + props: { + style: { + experimental_backgroundImage: + "linear-gradient(to top left in oklab, #fb2c36 0%, #2b7fff 100%)", + }, + }, + warnings: { + values: { + "background-image": ["initial", "initial", "initial"], + }, + }, + }); + }); +}); + +describe.skip("Backgrounds - Gradient Color Stops", () => { + // TODO +}); diff --git a/src/__tests__/vendor/tailwind/container-queries.tsx b/src/__tests__/vendor/tailwind/container-queries.test.tsx similarity index 100% rename from src/__tests__/vendor/tailwind/container-queries.tsx rename to src/__tests__/vendor/tailwind/container-queries.test.tsx diff --git a/src/__tests__/vendor/tailwind/groups.tsx b/src/__tests__/vendor/tailwind/groups.test.tsx similarity index 100% rename from src/__tests__/vendor/tailwind/groups.tsx rename to src/__tests__/vendor/tailwind/groups.test.tsx diff --git a/src/__tests__/vendor/tailwind/transform.test.ts b/src/__tests__/vendor/tailwind/transform.test.ts index 5c9a17a3..3071649c 100644 --- a/src/__tests__/vendor/tailwind/transform.test.ts +++ b/src/__tests__/vendor/tailwind/transform.test.ts @@ -170,6 +170,11 @@ describe("Transforms - Skew", () => { transform: [{ skewX: "0deg" }], }, }, + warnings: { + values: { + transform: ["initial", "initial", "initial", "initial", "initial"], + }, + }, }); }); test("skew-y-0", async () => { @@ -179,6 +184,11 @@ describe("Transforms - Skew", () => { transform: [{ skewY: "0deg" }], }, }, + warnings: { + values: { + transform: ["initial", "initial", "initial", "initial", "initial"], + }, + }, }); }); test("skew-x-1", async () => { @@ -188,6 +198,11 @@ describe("Transforms - Skew", () => { transform: [{ skewX: "1deg" }], }, }, + warnings: { + values: { + transform: ["initial", "initial", "initial", "initial", "initial"], + }, + }, }); }); test("skew-y-1", async () => { @@ -197,6 +212,11 @@ describe("Transforms - Skew", () => { transform: [{ skewY: "1deg" }], }, }, + warnings: { + values: { + transform: ["initial", "initial", "initial", "initial", "initial"], + }, + }, }); }); }); @@ -217,6 +237,11 @@ describe("Transforms - Mixed", () => { ], }, }, + warnings: { + values: { + transform: ["initial", "initial", "initial", "initial", "initial"], + }, + }, }); }); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index b0415292..b60dd11a 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -1198,7 +1198,7 @@ export function parseUnparsed( return; } - if (value === "inherit") { + if (value === "inherit" || value === "initial") { builder.addWarning("value", value); return; } else if (value === "currentcolor") {