Skip to content

Commit 59d1f16

Browse files
authored
fix: improve compiler warnings (#65)
1 parent 68f8213 commit 59d1f16

File tree

3 files changed

+69
-15
lines changed

3 files changed

+69
-15
lines changed

src/compiler/__tests__/compiler.test.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,3 +362,22 @@ test("container queries", () => {
362362
],
363363
});
364364
});
365+
366+
test("warnings", () => {
367+
const compiled = compile(`
368+
.my-class {
369+
invalid-property: red;
370+
z-index: auto;
371+
color: random();
372+
}`);
373+
374+
expect(compiled.stylesheet()).toStrictEqual({});
375+
376+
expect(compiled.warnings()).toStrictEqual({
377+
properties: ["invalid-property"],
378+
values: {
379+
"z-index": ["auto"],
380+
"color": ["random()"],
381+
},
382+
});
383+
});

src/compiler/declarations.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ function parseWithParser(declaration: Declaration, builder: StylesheetBuilder) {
270270

271271
builder.descriptorProperty = declaration.property;
272272

273+
builder.setWarningProperty(declaration.property);
273274
const value = parser(declaration, builder, declaration.property);
274275

275276
if (value !== undefined) {
@@ -827,6 +828,8 @@ export function parseDeclarationUnparsed(
827828
return;
828829
}
829830

831+
builder.setWarningProperty(property);
832+
830833
/**
831834
* React Native doesn't support all the logical properties
832835
*/
@@ -882,6 +885,7 @@ export function parseDeclarationCustom(
882885
property.startsWith("--") ||
883886
property.startsWith("-rn-")
884887
) {
888+
builder.setWarningProperty(property);
885889
builder.addDescriptor(
886890
property,
887891
parseUnparsed(declaration.value.value, builder, allowAuto.has(property)),
@@ -1061,7 +1065,7 @@ export function parseUnparsed(
10611065
builder,
10621066
);
10631067
default: {
1064-
builder.addWarning("function", tokenOrValue.value.name);
1068+
builder.addWarning("value", `${tokenOrValue.value.name}()`);
10651069
return;
10661070
}
10671071
}
@@ -1288,7 +1292,7 @@ export function parseAngle(angle: Angle | number, builder: StylesheetBuilder) {
12881292
case "rad":
12891293
return `${angle.value}${angle.type}`;
12901294
default:
1291-
builder.addWarning("value", "angle", angle.value);
1295+
builder.addWarning("value", `${angle.value} ${angle.type}`);
12921296
return undefined;
12931297
}
12941298
}
@@ -1996,7 +2000,7 @@ export function parseLineHeight(
19962000
case "percentage":
19972001
case "calc":
19982002
builder.addWarning(
1999-
"value",
2003+
"style",
20002004
"line-height",
20012005
typeof length.value === "number"
20022006
? length.value

src/compiler/stylesheet.ts

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,16 @@ export class StylesheetBuilder {
5757
animations?: AnimationRecord;
5858
rem: number;
5959
ruleOrder: number;
60+
warningProperty?: string;
6061
warningProperties: string[];
61-
warningValues: [string, unknown][];
62+
warningValues: Record<string, unknown[]>;
6263
warningFunctions: string[];
6364
} = {
6465
ruleSets: {},
6566
rem: 14,
6667
ruleOrder: 0,
6768
warningProperties: [],
68-
warningValues: [],
69+
warningValues: {},
6970
warningFunctions: [],
7071
},
7172
private selectors?: NormalizeSelector[],
@@ -172,30 +173,60 @@ export class StylesheetBuilder {
172173
);
173174
}
174175

176+
setWarningProperty(property: string) {
177+
this.shared.warningProperty = property;
178+
}
179+
180+
addWarning(type: "property" | "value", property: string): void;
181+
addWarning(type: "style", property: string, value: unknown): void;
175182
addWarning(
176-
type: "property" | "value" | "function",
183+
type: "property" | "style" | "value",
177184
property: string,
178185
value?: unknown,
179186
): void {
180187
switch (type) {
181188
case "property":
182189
this.shared.warningProperties.push(property);
183190
break;
184-
case "value":
185-
this.shared.warningValues.push([property, value]);
191+
case "value": {
192+
value = property;
193+
property = this.shared.warningProperty ?? "";
194+
195+
if (!property) {
196+
return;
197+
}
198+
199+
this.shared.warningValues[property] ??= [];
200+
this.shared.warningValues[property]?.push(value);
186201
break;
187-
case "function":
188-
this.shared.warningFunctions.push(property);
202+
}
203+
case "style":
204+
this.shared.warningValues[property] ??= [];
205+
this.shared.warningValues[property]?.push(value);
189206
break;
190207
}
191208
}
192209

193210
getWarnings() {
194-
return {
195-
properties: this.shared.warningProperties,
196-
values: this.shared.warningValues,
197-
functions: this.shared.warningFunctions,
198-
};
211+
const result: {
212+
properties?: string[];
213+
values?: Record<string, unknown[]>;
214+
functions?: string[];
215+
} = {};
216+
217+
if (this.shared.warningProperties.length) {
218+
result.properties = this.shared.warningProperties;
219+
}
220+
221+
if (Object.keys(this.shared.warningValues).length) {
222+
result.values = this.shared.warningValues;
223+
}
224+
225+
if (this.shared.warningFunctions.length) {
226+
result.functions = this.shared.warningFunctions;
227+
}
228+
229+
return result;
199230
}
200231

201232
addMapping(mapping: StyleRuleMapping) {

0 commit comments

Comments
 (0)