fix: improve compiler warnings (#65)

Author: marklawlor

src/compiler/__tests__/compiler.test.tsx

@@ -362,3 +362,22 @@ test("container queries", () => {
     ],
   });
 });
+
+test("warnings", () => {
+  const compiled = compile(`
+.my-class {
+    invalid-property: red;
+    z-index: auto; 
+    color: random();
+}`);
+
+  expect(compiled.stylesheet()).toStrictEqual({});
+
+  expect(compiled.warnings()).toStrictEqual({
+    properties: ["invalid-property"],
+    values: {
+      "z-index": ["auto"],
+      "color": ["random()"],
+    },
+  });
+});

src/compiler/declarations.ts

@@ -270,6 +270,7 @@ function parseWithParser(declaration: Declaration, builder: StylesheetBuilder) {
 
     builder.descriptorProperty = declaration.property;
 
+    builder.setWarningProperty(declaration.property);
     const value = parser(declaration, builder, declaration.property);
 
     if (value !== undefined) {
@@ -827,6 +828,8 @@ export function parseDeclarationUnparsed(
     return;
   }
 
+  builder.setWarningProperty(property);
+
   /**
    * React Native doesn't support all the logical properties
    */
@@ -882,6 +885,7 @@ export function parseDeclarationCustom(
     property.startsWith("--") ||
     property.startsWith("-rn-")
   ) {
+    builder.setWarningProperty(property);
     builder.addDescriptor(
       property,
       parseUnparsed(declaration.value.value, builder, allowAuto.has(property)),
@@ -1061,7 +1065,7 @@ export function parseUnparsed(
             builder,
           );
         default: {
-          builder.addWarning("function", tokenOrValue.value.name);
+          builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
         }
       }
@@ -1288,7 +1292,7 @@ export function parseAngle(angle: Angle | number, builder: StylesheetBuilder) {
     case "rad":
       return `${angle.value}${angle.type}`;
     default:
-      builder.addWarning("value", "angle", angle.value);
+      builder.addWarning("value", `${angle.value} ${angle.type}`);
       return undefined;
   }
 }
@@ -1996,7 +2000,7 @@ export function parseLineHeight(
         case "percentage":
         case "calc":
           builder.addWarning(
-            "value",
+            "style",
             "line-height",
             typeof length.value === "number"
               ? length.value

src/compiler/stylesheet.ts

@@ -57,15 +57,16 @@ export class StylesheetBuilder {
       animations?: AnimationRecord;
       rem: number;
       ruleOrder: number;
+      warningProperty?: string;
       warningProperties: string[];
-      warningValues: [string, unknown][];
+      warningValues: Record<string, unknown[]>;
       warningFunctions: string[];
     } = {
       ruleSets: {},
       rem: 14,
       ruleOrder: 0,
       warningProperties: [],
-      warningValues: [],
+      warningValues: {},
       warningFunctions: [],
     },
     private selectors?: NormalizeSelector[],
@@ -172,30 +173,60 @@ export class StylesheetBuilder {
     );
   }
 
+  setWarningProperty(property: string) {
+    this.shared.warningProperty = property;
+  }
+
+  addWarning(type: "property" | "value", property: string): void;
+  addWarning(type: "style", property: string, value: unknown): void;
   addWarning(
-    type: "property" | "value" | "function",
+    type: "property" | "style" | "value",
     property: string,
     value?: unknown,
   ): void {
     switch (type) {
       case "property":
         this.shared.warningProperties.push(property);
         break;
-      case "value":
-        this.shared.warningValues.push([property, value]);
+      case "value": {
+        value = property;
+        property = this.shared.warningProperty ?? "";
+
+        if (!property) {
+          return;
+        }
+
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
         break;
-      case "function":
-        this.shared.warningFunctions.push(property);
+      }
+      case "style":
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
         break;
     }
   }
 
   getWarnings() {
-    return {
-      properties: this.shared.warningProperties,
-      values: this.shared.warningValues,
-      functions: this.shared.warningFunctions,
-    };
+    const result: {
+      properties?: string[];
+      values?: Record<string, unknown[]>;
+      functions?: string[];
+    } = {};
+
+    if (this.shared.warningProperties.length) {
+      result.properties = this.shared.warningProperties;
+    }
+
+    if (Object.keys(this.shared.warningValues).length) {
+      result.values = this.shared.warningValues;
+    }
+
+    if (this.shared.warningFunctions.length) {
+      result.functions = this.shared.warningFunctions;
+    }
+
+    return result;
   }
 
   addMapping(mapping: StyleRuleMapping) {