From ed3df192ab51993464c1883c73db01223a4e3c04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Mon, 27 Oct 2014 16:53:20 +0100 Subject: [PATCH 1/2] CSS parsing error now included in phantomas --- app/lib/phantomasWrapper.js | 1 - .../analyzeStyleYLT/analyzeStyleYLT.js | 106 ------------------ 2 files changed, 107 deletions(-) delete mode 100644 phantomas_custom/modules/analyzeStyleYLT/analyzeStyleYLT.js diff --git a/app/lib/phantomasWrapper.js b/app/lib/phantomasWrapper.js index d039ca1..98ebeaf 100644 --- a/app/lib/phantomasWrapper.js +++ b/app/lib/phantomasWrapper.js @@ -28,7 +28,6 @@ var PhantomasWrapper = function() { 'analyze-css': true, 'skip-modules': [ 'blockDomains', // not needed - 'analyzeCss', // overriden 'domComplexity', // overriden 'domMutations', // not compatible with webkit 'domQueries', // overriden diff --git a/phantomas_custom/modules/analyzeStyleYLT/analyzeStyleYLT.js b/phantomas_custom/modules/analyzeStyleYLT/analyzeStyleYLT.js deleted file mode 100644 index e26fd2d..0000000 --- a/phantomas_custom/modules/analyzeStyleYLT/analyzeStyleYLT.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * Adds CSS related metrics using analyze-css NPM module - * - * @see https://github.com/macbre/analyze-css - * - * Run phantomas with --analyze-css option to use this module - * - * setMetric('cssBase64Length') @desc total length of base64-encoded data in CSS source (will warn about base64-encoded data bigger than 4 kB) @optional @offenders - * setMetric('cssRedundantBodySelectors') @desc number of redundant body selectors (e.g. body .foo, section body h2, but not body > h1) @optional @offenders - * setMetric('cssComments') @desc number of comments in CSS source @optional @offenders - * setMetric('cssCommentsLength') @desc length of comments content in CSS source @optional - * setMetric('cssComplexSelectors') @desc number of complex selectors (consisting of more than three expressions, e.g. header ul li .foo) @optional @offenders - * setMetric('cssDuplicatedSelectors') @desc number of CSS selectors defined more than once in CSS source @optional @offenders - * setMetric('cssEmptyRules') @desc number of rules with no properties (e.g. .foo { }) @optional @offenders - * setMetric('cssExpressions') @desc number of rules with CSS expressions (e.g. expression( document.body.clientWidth > 600 ? "600px" : "auto" )) @optional @offenders - * setMetric('cssOldIEFixes') @desc number of fixes for old versions of Internet Explorer (e.g. * html .foo {} and .foo { *zoom: 1 }) @optional @offenders - * setMetric('cssImportants') @desc number of properties with value forced by !important @optional @offenders - * setMetric('cssMediaQueries') @desc number of media queries (e.g. @media screen and (min-width: 1370px)) @optional @offenders - * setMetric('cssOldPropertyPrefixes') @desc number of properties with no longer needed vendor prefix, powered by data provided by autoprefixer (e.g. --moz-border-radius) @optional @offenders - * setMetric('cssQualifiedSelectors') @desc number of qualified selectors (e.g. header#nav, .foo#bar, h1.title) @optional @offenders - * setMetric('cssSpecificityIdAvg') @desc average specificity for ID @optional - * setMetric('cssSpecificityIdTotal') @desc total specificity for ID @optional - * setMetric('cssSpecificityClassAvg') @desc average specificity for class, pseudo-class or attribute @optional - * setMetric('cssSpecificityClassTotal') @desc total specificity for class, pseudo-class or attribute @optional - * setMetric('cssSpecificityTagAvg') @desc average specificity for element @optional - * setMetric('cssSpecificityTagTotal') @desc total specificity for element @optional - * setMetric('cssSelectorsByAttribute') @desc number of selectors by attribute (e.g. .foo[value=bar]) @optional - * setMetric('cssSelectorsByClass') @desc number of selectors by class @optional - * setMetric('cssSelectorsById') @desc number of selectors by ID @optional - * setMetric('cssSelectorsByPseudo') @desc number of pseudo-selectors (e,g. :hover) @optional - * setMetric('cssSelectorsByTag') @desc number of selectors by tag name @optional - * setMetric('cssUniversalSelectors') @desc number of selectors trying to match every element (e.g. .foo > *) @optional @offenders - * setMetric('cssLength') @desc length of CSS source (in bytes) @optional - * setMetric('cssRules') @desc number of rules (e.g. .foo, .bar { color: red } is counted as one rule) @optional - * setMetric('cssSelectors') @desc number of selectors (e.g. .foo, .bar { color: red } is counted as two selectors - .foo and .bar) @optional - * setMetric('cssDeclarations') @desc number of declarations (e.g. .foo, .bar { color: red } is counted as one declaration - color: red) @optional - * setMetric('cssParsingErrors') @desc number of CSS files (or embeded CSS) that failed to be parse by analyse-css @optional - */ - -exports.version = '0.3.a'; - -exports.module = function(phantomas) { - 'use strict'; - - if (!phantomas.getParam('analyze-css')) { - phantomas.log('To enable CSS in-depth metrics please run phantomas with --analyze-css option'); - return; - } - - function ucfirst(str) { - // http://kevin.vanzonneveld.net - // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) - // + bugfixed by: Onno Marsman - // + improved by: Brett Zamir (http://brett-zamir.me) - // * example 1: ucfirst('kevin van zonneveld'); - // * returns 1: 'Kevin van zonneveld' - str += ''; - var f = str.charAt(0).toUpperCase(); - return f + str.substr(1); - } - - var isWindows = (require('system').os.name === 'windows'), - binary = isWindows ? 'analyze-css.cmd' : 'analyze-css'; - - phantomas.on('recv', function(entry, res) { - if (entry.isCSS) { - phantomas.log('CSS: analyzing <%s>...', entry.url); - - // run analyze-css "binary" installed by npm - phantomas.runScript('node_modules/.bin/' + binary, ['--url', entry.url, '--json'], function(err, results) { - if (err !== null) { - phantomas.log('analyzeCss: sub-process failed!'); - - var offender = entry.url; - if (err.indexOf('near line') > 0) { - offender += ' (' + err + ')'; - } - - phantomas.incrMetric('cssParsingErrors'); - phantomas.addOffender('cssParsingErrors', offender); - - return; - } - - phantomas.log('analyzeCss: using ' + results.generator); - - var metrics = results.metrics || {}, - offenders = results.offenders || {}; - - Object.keys(metrics).forEach(function(metric) { - var metricPrefixed = 'css' + ucfirst(metric); - - // increase metrics - phantomas.incrMetric(metricPrefixed, metrics[metric]); - - // and add offenders - if (typeof offenders[metric] !== 'undefined') { - offenders[metric].forEach(function(msg) { - phantomas.addOffender(metricPrefixed, msg); - }); - } - }); - }); - } - }); -}; From 9937670a2e0516435af9eba76e209b96dd56818e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Mon, 27 Oct 2014 16:57:51 +0100 Subject: [PATCH 2/2] Add rules for cssComplexSelectorsByAttribute and cssDuplicatedProperties --- app/node_views/results.html | 37 ++++++++++++++++++++++++++++++- app/public/scripts/resultsCtrl.js | 4 +++- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/app/node_views/results.html b/app/node_views/results.html index 3113b2c..879a17e 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -310,6 +310,28 @@ +
+
Complex attributes selector
+
+ {{phantomasResults.metrics.cssComplexSelectorsByAttribute}} + +
+
+
+ +

Complex attributes selectors are one of these: +

    +
  • .foo[type*=bar] (contains bar)
    • +
  • .foo[type^=bar] (starts with bar)
    • +
  • .foo[type|=bar] (starts with bar or bar-)
    • +
  • .foo[type$=bar] (ends with bar)
    • +
  • .foo[type~=bar baz] (bar or baz)
    • +
+

+

Their matching process needs more CPU and it has a cost on performances.

+ +
+
@@ -346,7 +368,7 @@ -
+
Duplicated selectors
{{phantomasResults.metrics.cssDuplicatedSelectors}} @@ -359,6 +381,19 @@
+
+
Duplicated properties
+
+ {{phantomasResults.metrics.cssDuplicatedProperties}} + +
+
+
+ +

This is the number of property definitions duplicated within a selector.

+ +
+
Empty rules
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js index 26248a2..d8c9aaf 100644 --- a/app/public/scripts/resultsCtrl.js +++ b/app/public/scripts/resultsCtrl.js @@ -296,7 +296,8 @@ app.controller('ResultsCtrl', function ($scope) { var note = 'A'; var score = $scope.phantomasResults.metrics.cssRules + - $scope.phantomasResults.metrics.cssComplexSelectors * 5; + $scope.phantomasResults.metrics.cssComplexSelectors * 5 + + $scope.phantomasResults.metrics.cssComplexSelectorsByAttribute * 15; if (score > 500) { note = 'B'; } @@ -324,6 +325,7 @@ app.controller('ResultsCtrl', function ($scope) { var note = 'A'; var score = $scope.phantomasResults.metrics.cssDuplicatedSelectors + + $scope.phantomasResults.metrics.cssDuplicatedProperties + $scope.phantomasResults.metrics.cssEmptyRules + $scope.phantomasResults.metrics.cssExpressions * 10 + $scope.phantomasResults.metrics.cssImportants * 2 +