diff --git a/src/__tests__/vendor/tailwind.test.tsx b/src/__tests__/vendor/tailwind.test.tsx index fa9f12d5..4fa8482a 100644 --- a/src/__tests__/vendor/tailwind.test.tsx +++ b/src/__tests__/vendor/tailwind.test.tsx @@ -36,6 +36,7 @@ test("transition", () => { "color", "backgroundColor", "borderColor", + "outlineColor", "textDecorationColor", "fill", "stroke", diff --git a/src/__tests__/vendor/tailwind/borders.test.tsx b/src/__tests__/vendor/tailwind/borders.test.tsx index 75462186..7435d2e4 100644 --- a/src/__tests__/vendor/tailwind/borders.test.tsx +++ b/src/__tests__/vendor/tailwind/borders.test.tsx @@ -391,34 +391,79 @@ describe.skip("Borders - Divide Style", () => { // TODO }); -describe.skip("Borders - Outline Width", () => { - // TODO -}); +describe("Borders - Outline Width", () => { + test("outline-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineWidth: 1, outlineStyle: "solid" } }, + }); + }); -describe.skip("Borders - Outline Color", () => { - // TODO + test("outline-5", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineWidth: 5, outlineStyle: "solid" } }, + }); + }); }); -describe.skip("Borders - Outline Style", () => { - // TODO -}); +describe("Borders - Outline Color", () => { + test("outline-black", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineColor: "#000" } }, + }); + }); -describe.skip("Borders - Outline Offset", () => { - // TODO + test("outline-white", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineColor: "#fff" } }, + }); + }); }); -describe.skip("Borders - Ring Width", () => { - // TODO -}); +describe("Borders - Outline Style", () => { + test("outline-solid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineStyle: "solid" } }, + }); + }); -describe.skip("Borders - Ring Color", () => { - // TODO -}); + test("outline-dashed", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineStyle: "dashed" } }, + }); + }); -describe.skip("Borders - Ring Offset Width", () => { - // TODO + test("outline-dotted", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { outlineStyle: "dotted" } }, + }); + }); + + test("outline-double", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "outline-style": "double" } }, + }); + }); }); -describe.skip("Borders - Ring Offset Color", () => { - // TODO +describe("Borders - Outline Offset", () => { + test("outline-offset-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + outlineOffset: 1, + }, + }, + }); + }); + + test("-outline-offset-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + outlineOffset: -1, + }, + }, + }); + }); }); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 0e18eab8..6460a1fd 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -204,6 +204,10 @@ const parsers: { "min-inline-size": parseSizeDeclaration, "min-width": parseSizeDeclaration, "opacity": ({ value }) => value, + "outline-color": parseColorDeclaration, + // "outline-offset": parseColorDeclaration, + "outline-style": parseOutlineStyle, + "outline-width": parseBorderSideWidthDeclaration, "overflow": parseOverflow, "padding": parsePadding, "padding-block": parsePaddingBlock, @@ -982,6 +986,12 @@ export function parseCustomDeclaration( } else if (property === "object-position") { // https://github.com/parcel-bundler/lightningcss/issues/1047 parseObjectPosition(declaration.value, builder); + } else if (property === "outline-offset") { + // https://github.com/parcel-bundler/lightningcss/issues/1048 + builder.addDescriptor( + property, + parseUnparsed(declaration.value.value, builder, property), + ); } else if ( validProperties.has(property) || property.startsWith("--") || @@ -2097,16 +2107,7 @@ function parseBorderBlockStyle( } export function parseBorderSideWidthDeclaration( - declaration: DeclarationType< - | "border-block-end-width" - | "border-block-start-width" - | "border-bottom-width" - | "border-inline-end-width" - | "border-inline-start-width" - | "border-left-width" - | "border-right-width" - | "border-top-width" - >, + declaration: Extract, builder: StylesheetBuilder, ) { builder.addDescriptor( @@ -3044,6 +3045,25 @@ function parseVisibility( } } +function parseOutlineStyle( + declaration: DeclarationType<"outline-style">, + builder: StylesheetBuilder, +) { + const allowed = ["solid", "dotted", "dashed"]; + + if ( + declaration.value.type !== "auto" && + allowed.includes(declaration.value.value) + ) { + builder.addDescriptor("outlineStyle", declaration.value.value); + } else { + builder.addWarning( + "value", + declaration.value.type === "auto" ? "auto" : declaration.value.value, + ); + } +} + function parseFilter( declaration: DeclarationType<"filter">, builder: StylesheetBuilder,