fix: caret-color parsing for unparsed declarations (#86)

Author: marklawlor

src/compiler/__tests__/declarations.test.tsx

@@ -1,6 +1,7 @@
 import { compile } from "../compiler";
 
 const tests = [
+  ["caret-color: black", [{ d: [["#000", ["cursorColor"]]], s: [1, 1] }]],
   ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]],
 ] as const;
 

src/compiler/atRules.ts

@@ -79,7 +79,10 @@ function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
-  const mapping: StyleRuleMapping = {};
+  // Include any default mapping here
+  const mapping: StyleRuleMapping = {
+    "caret-color": ["cursorColor"],
+  };
 
   if (!rules) return mapping;
 

src/compiler/declarations.ts

@@ -142,7 +142,7 @@ const parsers: {
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
-  "caret-color": parseCaretColor,
+  "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
   "container": parseContainer,
@@ -244,17 +244,6 @@ const parsers: {
 
 const validProperties = new Set(Object.keys(parsers));
 
-function parseCaretColor(
-  declaration: DeclarationType<"caret-color">,
-  builder: StylesheetBuilder,
-) {
-  builder.addMapping({ [declaration.property]: ["cursorColor"] });
-  builder.addDescriptor(
-    "caret-color",
-    parseColorOrAutoDeclaration(declaration, builder),
-  );
-}
-
 export function parseDeclaration(
   declaration: Declaration,
   builder: StylesheetBuilder,

src/compiler/stylesheet.ts

@@ -50,6 +50,7 @@ export class StylesheetBuilder {
     private ruleTemplate: StyleRule = {
       s: [],
     },
+    // Any default mapping should be included in the @prop parsing
     private mapping: StyleRuleMapping = {},
     public descriptorProperty?: string,
     private shared: {