feat: border shorthand

Author: marklawlor

src/compiler/declarations.ts

@@ -758,6 +758,7 @@ export function parseDeclaration(
           parseOptions,
         ),
         "border-style": parseBorderStyle(declaration.value.style, parseOptions),
+        "border-color": parseColor(declaration.value.color, parseOptions),
       });
       return;
     case "border-top":
@@ -3144,7 +3145,12 @@ function kebabCase(str: string) {
   );
 }
 
-const runtimeShorthands = new Set(["animation", "text-shadow", "transform"]);
+const runtimeShorthands = new Set([
+  "animation",
+  "text-shadow",
+  "transform",
+  "border",
+]);
 
 const namedColors = new Set([
   "aliceblue",

src/runtime/native/styles/border.ts

@@ -0,0 +1,10 @@
+import { shorthandHandler } from "./shorthand";
+
+const width = ["borderWidth", "number"] as const;
+const style = ["borderStyle", "string"] as const;
+const color = ["borderColor", "color", "color"] as const;
+
+export const border = shorthandHandler(
+  [[width, style, color], [style, color], [width, style], [style]],
+  [],
+);

src/runtime/native/styles/resolve.ts

@@ -7,6 +7,7 @@ import type {
 import type { RenderGuard } from "../conditions/guards";
 import { type Getter, type VariableContextValue } from "../reactivity";
 import { animation } from "./animation";
+import { border } from "./border";
 import { calc } from "./calc";
 import { transformKeys } from "./defaults";
 import {
@@ -34,6 +35,12 @@ export type StyleFunctionResolver = (
   options: ResolveValueOptions,
 ) => any;
 
+const shorthands: Record<`@${string}`, StyleFunctionResolver> = {
+  "@textShadow": textShadow,
+  "@transform": transform,
+  "@border": border,
+};
+
 const functions: Record<string, StyleFunctionResolver> = {
   calc,
   em,
@@ -46,9 +53,8 @@ const functions: Record<string, StyleFunctionResolver> = {
   fontScale,
   pixelSizeForLayoutSize,
   roundToNearestPixel,
-  "@textShadow": textShadow,
-  "@transform": transform,
   animationName: animation,
+  ...shorthands,
 };
 
 export type ResolveValueOptions = {