diff --git a/src/compiler/__tests__/compiler.test.tsx b/src/compiler/__tests__/compiler.test.tsx index eede8624..f64355b3 100644 --- a/src/compiler/__tests__/compiler.test.tsx +++ b/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()"], + }, + }); +}); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 1f6c463c..d8a4c3a0 100644 --- a/src/compiler/declarations.ts +++ b/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 diff --git a/src/compiler/stylesheet.ts b/src/compiler/stylesheet.ts index 96905af0..d34e69cc 100644 --- a/src/compiler/stylesheet.ts +++ b/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; warningFunctions: string[]; } = { ruleSets: {}, rem: 14, ruleOrder: 0, warningProperties: [], - warningValues: [], + warningValues: {}, warningFunctions: [], }, private selectors?: NormalizeSelector[], @@ -172,8 +173,14 @@ 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 { @@ -181,21 +188,45 @@ export class StylesheetBuilder { 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; + 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) {