feat: outline-width, outline-color, outline-style, outline-offset (#128)

Author: marklawlor

src/__tests__/vendor/tailwind.test.tsx

@@ -36,6 +36,7 @@ test("transition", () => {
                   "color",
                   "backgroundColor",
                   "borderColor",
+                  "outlineColor",
                   "textDecorationColor",
                   "fill",
                   "stroke",

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,
+        },
+      },
+    });
+  });
 });

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<Declaration, { value: BorderSideWidth }>,
   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,