Change the way offenders are displayed for some CSS related rules
This commit is contained in:
Gaël Métais
+138
-163
@@ -462,19 +462,18 @@ var policies = {
|
||||
"cssComplexSelectors": {
|
||||
"tool": "phantomas",
|
||||
"label": "Complex selectors",
|
||||
"message": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors.</p>",
|
||||
"message": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors. The <a href=\"http://getbem.com\" target=\"_blank\">B.E.M. methodology</a> is an useful way to simplify your CSS.</p>",
|
||||
"isOkThreshold": 0,
|
||||
"isBadThreshold": 600,
|
||||
"isAbnormalThreshold": 2000,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
return splittedOffender;
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssComplexSelectorsByAttribute": {
|
||||
@@ -486,16 +485,13 @@ var policies = {
|
||||
"isAbnormalThreshold": 150,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
splittedOffender.bolded = splittedOffender.css.replace(/(\[[^ ]+[~\|\^\$\*]=["']?[^"'\]]+["']?\])/g, '<b>$1</b>');
|
||||
return splittedOffender;
|
||||
});
|
||||
|
||||
splittedOffender.bolded = splittedOffender.css.replace(/(\[[^ ]+[~\|\^\$\*]="[^"]+"\])/g, '<b>$1</b>');
|
||||
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssColors": {
|
||||
@@ -590,10 +586,7 @@ var policies = {
|
||||
"isAbnormalThreshold": 1000,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders
|
||||
};
|
||||
return offendersHelpers.orderByFile(offenders);
|
||||
}
|
||||
},
|
||||
"cssImports": {
|
||||
@@ -652,29 +645,28 @@ var policies = {
|
||||
"isAbnormalThreshold": 120,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
var parts = /^([^{]+) {([^ ]+): (.+)}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssDuplicatedProperties offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
parseError: offender
|
||||
};
|
||||
}
|
||||
var parts = /^([^{]+) {([^ ]+): (.+)}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssDuplicatedProperties offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
property: parts[2],
|
||||
rule: parts[1],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
parseError: offender
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
property: parts[2],
|
||||
rule: parts[1],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
};
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssEmptyRules": {
|
||||
@@ -686,14 +678,8 @@ var policies = {
|
||||
"isAbnormalThreshold": 100,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
var parsedOffenders = offenders.map(offendersHelpers.cssOffenderPattern);
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssExpressions": {
|
||||
@@ -705,30 +691,29 @@ var policies = {
|
||||
"isAbnormalThreshold": 20,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
var parts = /^(.*) {([^ ]+): expression\((.*)\)}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssExpressions offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
parseError: offender
|
||||
};
|
||||
}
|
||||
var parts = /^(.*) {([^ ]+): expression\((.*)\)}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssExpressions offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
rule: parts[1],
|
||||
property: parts[2],
|
||||
expression: parts[3],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
parseError: offender
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
rule: parts[1],
|
||||
property: parts[2],
|
||||
expression: parts[3],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
};
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssImportants": {
|
||||
@@ -740,30 +725,29 @@ var policies = {
|
||||
"isAbnormalThreshold": 200,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
var parts = /^(.*) {([^ ]+): (.*) ?\!important}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssImportants offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
parseError: offender
|
||||
};
|
||||
}
|
||||
var parts = /^(.*) {([^ ]+): (.*) ?\!important}$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssImportants offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
rule: parts[1],
|
||||
property: parts[2],
|
||||
value: parts[3],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
parseError: offender
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
rule: parts[1],
|
||||
property: parts[2],
|
||||
value: parts[3],
|
||||
file: splittedOffender.file,
|
||||
line: splittedOffender.line,
|
||||
column: splittedOffender.column
|
||||
};
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssOldIEFixes": {
|
||||
@@ -775,52 +759,51 @@ var policies = {
|
||||
"isAbnormalThreshold": 300,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
var parts = /^([^{]*)( {([^ ]+): (.*)})?$/.exec(splittedOffender.css);
|
||||
var parts = /^([^{]*)( {([^ ]+): (.*)})?$/.exec(splittedOffender.css);
|
||||
|
||||
if (!parts) {
|
||||
debug('cssOldIEFixes offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
parseError: offender
|
||||
};
|
||||
}
|
||||
if (!parts) {
|
||||
debug('cssOldIEFixes offenders transform function error with "%s"', offender);
|
||||
return {
|
||||
parseError: offender
|
||||
};
|
||||
}
|
||||
|
||||
var rule = parts[1];
|
||||
var property = parts[3];
|
||||
var value = parts[4];
|
||||
var browser = null;
|
||||
var rule = parts[1];
|
||||
var property = parts[3];
|
||||
var value = parts[4];
|
||||
var browser = null;
|
||||
|
||||
if (rule.indexOf('* html') === 0) {
|
||||
rule = rule.replace(/^\* html/, '<b>* html</b>');
|
||||
browser = 'IE6';
|
||||
} else if (rule.indexOf('html>body') === 0) {
|
||||
rule = rule.replace(/^html>body/, '<b>html>body</b>');
|
||||
browser = 'IE6';
|
||||
} else if (property.indexOf('*') === 0) {
|
||||
property = '<b>' + property + '</b>';
|
||||
browser = 'IE7';
|
||||
} else if (value.match(/\!ie$/)) {
|
||||
value = value.replace(/\!ie$/, '<b>!ie</b>');
|
||||
browser = 'IE7';
|
||||
} else if (property === '-ms-filter') {
|
||||
property = '<b>-ms-filter</b>';
|
||||
browser = 'IE9';
|
||||
} else if (value.indexOf('progid:DXImageTransform.Microsoft') >= 0) {
|
||||
value = value.replace(/progid:DXImageTransform\.Microsoft/, '<b>progid:DXImageTransform.Microsoft</b>');
|
||||
browser = 'IE9';
|
||||
}
|
||||
if (rule.indexOf('* html') === 0) {
|
||||
rule = rule.replace(/^\* html/, '<b>* html</b>');
|
||||
browser = 'IE6';
|
||||
} else if (rule.indexOf('html>body') === 0) {
|
||||
rule = rule.replace(/^html>body/, '<b>html>body</b>');
|
||||
browser = 'IE6';
|
||||
} else if (property.indexOf('*') === 0) {
|
||||
property = '<b>' + property + '</b>';
|
||||
browser = 'IE7';
|
||||
} else if (value.match(/\!ie$/)) {
|
||||
value = value.replace(/\!ie$/, '<b>!ie</b>');
|
||||
browser = 'IE7';
|
||||
} else if (property === '-ms-filter') {
|
||||
property = '<b>-ms-filter</b>';
|
||||
browser = 'IE9';
|
||||
} else if (value.indexOf('progid:DXImageTransform.Microsoft') >= 0) {
|
||||
value = value.replace(/progid:DXImageTransform\.Microsoft/, '<b>progid:DXImageTransform.Microsoft</b>');
|
||||
browser = 'IE9';
|
||||
}
|
||||
|
||||
var propertyAndValue = (property && value) ? ' {' + property + ': ' + value + '}' : '';
|
||||
splittedOffender.bolded = rule + propertyAndValue;
|
||||
splittedOffender.browser = browser;
|
||||
var propertyAndValue = (property && value) ? ' {' + property + ': ' + value + '}' : '';
|
||||
splittedOffender.bolded = rule + propertyAndValue;
|
||||
splittedOffender.browser = browser;
|
||||
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
return splittedOffender;
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssOldPropertyPrefixes": {
|
||||
@@ -885,13 +868,9 @@ var policies = {
|
||||
"isAbnormalThreshold": 150,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
var parsedOffenders = offenders.map(offendersHelpers.cssOffenderPattern);
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssRedundantBodySelectors": {
|
||||
@@ -903,16 +882,13 @@ var policies = {
|
||||
"isAbnormalThreshold": 200,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
splittedOffender.bolded = splittedOffender.css.replace(/body/, '<b>body</b>');
|
||||
return splittedOffender;
|
||||
});
|
||||
|
||||
splittedOffender.bolded = splittedOffender.css.replace(/body/, '<b>body</b>');
|
||||
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"cssRedundantChildNodesSelectors": {
|
||||
@@ -924,29 +900,28 @@ var policies = {
|
||||
"isAbnormalThreshold": 200,
|
||||
"hasOffenders": true,
|
||||
"offendersTransformFn": function(offenders) {
|
||||
return {
|
||||
count: offenders.length,
|
||||
list: offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
var parsedOffenders = offenders.map(function(offender) {
|
||||
var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
|
||||
|
||||
var rule = splittedOffender.css || '';
|
||||
var redundanters = [
|
||||
['ul', 'li'],
|
||||
['ol', 'li'],
|
||||
['select', 'option'],
|
||||
['table', 'tr'],
|
||||
['table', 'th'],
|
||||
];
|
||||
var rule = splittedOffender.css || '';
|
||||
var redundanters = [
|
||||
['ul', 'li'],
|
||||
['ol', 'li'],
|
||||
['select', 'option'],
|
||||
['table', 'tr'],
|
||||
['table', 'th'],
|
||||
];
|
||||
|
||||
redundanters.forEach(function(couple) {
|
||||
rule = rule.replace(new RegExp('(^| |>)' + couple[0] + '([^ >]*)?([ >]| > )' + couple[1] + '([^\\w-]|$)', 'g'), '$1<b>' + couple[0] + '</b>$2$3<b>' + couple[1] + '</b>$4');
|
||||
});
|
||||
redundanters.forEach(function(couple) {
|
||||
rule = rule.replace(new RegExp('(^| |>)' + couple[0] + '([^ >]*)?([ >]| > )' + couple[1] + '([^\\w-]|$)', 'g'), '$1<b>' + couple[0] + '</b>$2$3<b>' + couple[1] + '</b>$4');
|
||||
});
|
||||
|
||||
splittedOffender.bolded = rule;
|
||||
splittedOffender.bolded = rule;
|
||||
|
||||
return splittedOffender;
|
||||
})
|
||||
};
|
||||
return splittedOffender;
|
||||
});
|
||||
|
||||
return offendersHelpers.orderByFile(parsedOffenders);
|
||||
}
|
||||
},
|
||||
"totalWeight": {
|
||||
|
||||
@@ -185,6 +185,27 @@ var OffendersHelpers = function() {
|
||||
}
|
||||
};
|
||||
|
||||
this.orderByFile = function(offenders) {
|
||||
var byFile = {};
|
||||
|
||||
offenders.forEach(function(offender) {
|
||||
var file = offender.file || 'Inline CSS';
|
||||
delete offender.file;
|
||||
|
||||
if (!byFile[file]) {
|
||||
byFile[file] = {
|
||||
count: 0,
|
||||
offenders: []
|
||||
};
|
||||
}
|
||||
|
||||
byFile[file].count ++;
|
||||
byFile[file].offenders.push(offender);
|
||||
});
|
||||
|
||||
return {byFile: byFile};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
module.exports = new OffendersHelpers();
|
||||
Reference in New Issue
Block a user