Add rule about CSS @import (ready for analyze-css 0.7.0)

app/node_views/results.html

@@ -283,7 +283,7 @@
                     <div class="notation">CSS complexity</div>
                     <div class="criteria">
                         <div class="table">
-                            <div ng-if="phantomasResults.metrics.cssRules" ng-class="{'warning': phantomasResults.metrics.cssRules > 3000}">
+                            <div ng-if="phantomasResults.metrics.cssRules" ng-class="{'warning': phantomasResults.metrics.cssRules > 4000}">
                                 <div class="label">Rules count</div>
                                 <div class="result">
                                     {{phantomasResults.metrics.cssRules}}
@@ -332,6 +332,20 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="phantomasResults.metrics.cssImports" class="warning">
+                                <div class="label">Uses of @import</div>
+                                <div class="result">
+                                    {{phantomasResults.metrics.cssImports}}
+                                    <show-offenders modal-title="Uses of @import" metric-name="cssImports" phantomas-results="phantomasResults"></show-offenders>
+                                </div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssImportsTooltip = true"></div>
+                                    <modal-dialog show="cssImportsTooltip" dialog-title="Don't use @import">
+                                        <p>It’s bad for performance to use @import because CSS files don't get downloaded in parallel.</p>
+                                        <p>You should use &lt;link rel='stylesheet' href='a.css'&gt; instead.</p>
+                                    </modal-dialog>
+                                </div>
+                            </div>
                             <div ng-if="phantomasResults.metrics.cssDuplicatedSelectors" ng-class="{'warning': phantomasResults.metrics.cssDuplicatedSelectors > 100}">
                                 <div class="label">Duplicated selectors</div>
                                 <div class="result">

app/public/scripts/resultsCtrl.js

@@ -296,7 +296,7 @@ app.controller('ResultsCtrl', function ($scope) {
 
         var note = 'A';
         var score = $scope.phantomasResults.metrics.cssRules +
-                    $scope.phantomasResults.metrics.cssComplexSelectors * 10;
+                    $scope.phantomasResults.metrics.cssComplexSelectors * 5;
         if (score > 500) {
             note = 'B';
         }
@@ -306,10 +306,10 @@ app.controller('ResultsCtrl', function ($scope) {
         if (score > 2000) {
             note = 'D';
         }
-        if (score > 4500) {
+        if (score > 4000) {
             note = 'E';
         }
-        if (score > 7000) {
+        if (score > 6000) {
             note = 'F';
         }
         return note;
@@ -330,20 +330,21 @@ app.controller('ResultsCtrl', function ($scope) {
                     $scope.phantomasResults.metrics.cssOldIEFixes * 10 +
                     $scope.phantomasResults.metrics.cssOldPropertyPrefixes +
                     $scope.phantomasResults.metrics.cssUniversalSelectors * 5 +
-                    $scope.phantomasResults.metrics.cssRedundantBodySelectors;
-        if (score > 20) {
+                    $scope.phantomasResults.metrics.cssRedundantBodySelectors +
+                    $scope.phantomasResults.metrics.cssImports * 50;
+        if (score > 50) {
             note = 'B';
         }
-        if (score > 50) {
+        if (score > 10) {
             note = 'C';
         }
-        if (score > 100) {
+        if (score > 200) {
             note = 'D';
         }
-        if (score > 200) {
+        if (score > 500) {
             note = 'E';
         }
-        if (score > 500) {
+        if (score > 1000) {
             note = 'F';
         }
         return note;