Check if assigned CSS vars are actually used

This commit is contained in:
Jeremy Thomas 2020-08-23 13:15:42 +02:00
parent 64b89dbc63
commit 4cb72c225a
2 changed files with 22 additions and 11 deletions

View File

@ -57,7 +57,7 @@ $panel-colors: $colors !default
border-radius: var(--panel-radius)
box-shadow: var(--panel-shadow)
font-size: $size-normal
font-size: var(--panel-font-size)
&:not(:last-child)
margin-bottom: var(--panel-margin)
// Colors

View File

@ -143,35 +143,46 @@ function plugin() {
const {fileName, lines} = utils.getLines(files, filePath);
const file = files[filePath];
const contents = file.contents.toString();
let assignments = contents.match(regexAssign);
const assignments = contents.match(regexAssign);
if (!assignments) {
logThis(`${filePath} has no CSS var assignments`);
return;
}
assignments = assignments.map(assignment => assignment.replace(':', ''));
assignments = [...assignments, ...DEFAULT_ASSIGNMENTS];
const usages = contents.match(regexUsage);
const fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
const allAssignments = [...fileAssignments, ...DEFAULT_ASSIGNMENTS];
let usages = contents.match(regexUsage);
if (!usages) {
logThis(`${filePath} has no CSS var usages`);
return;
}
// var(--foobar) ==> --foobar
usages = usages.map(usage => {
usage = usage.replace('var(', '');
usage = usage.replace(')', '');
return usage;
});
let errorCount = 0;
usages.forEach(usage => {
// var(--foobar) ==> --foobar
let varName = usage.replace('var(', '');
varName = varName.replace(')', '');
if (!assignments.includes(varName)) {
if (!allAssignments.includes(usage)) {
console.log(`${usage} is not assigned`);
errorCount++;
}
});
fileAssignments.forEach(assignment => {
if (!usages.includes(assignment)) {
console.log(`${assignment} is not used`);
errorCount++;
}
});
if (errorCount) {
console.log(`There are some errors in ${filePath}`);
} else {
@ -182,7 +193,7 @@ function plugin() {
if (hasErrors) {
console.log(`There are some errors`);
} else {
console.log(`All used CSS variables are assigned correctly!`);
console.log(`All CSS variables are used and assigned correctly!`);
}
};
}