Repository: GoogleChrome/lighthouse
Pull request #9479 (2019-07-29 20:01:07)

core(unused-css): allow up to 10KB of unused CSS per file
**Summary**
Bumping the allowable limit to 10KB of unused CSS per file per discussion in https://github.com/GoogleChrome/lighthouse/issues/9353#issue-466944871. Should have minimal impact on displayed results since the 8KB difference would be unlikely to significantly impact any metrics to appear in the first place.

**Related Issues/PRs**
closes https://github.com/GoogleChrome/lighthouse/issues/9353



Patch:
diff --git a/lighthouse-core/audits/byte-efficiency/unused-css-rules.js b/lighthouse-core/audits/byte-efficiency/unused-css-rules.js
index c7d4be676..d2b7344d7 100644
--- a/lighthouse-core/audits/byte-efficiency/unused-css-rules.js
+++ b/lighthouse-core/audits/byte-efficiency/unused-css-rules.js
@@ -19,7 +19,9 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
-const IGNORE_THRESHOLD_IN_BYTES = 2048;
+// Allow 10KB of unused CSS to permit `:hover` and other styles not used on a non-interactive load.
+// @see https://github.com/GoogleChrome/lighthouse/issues/9353 for more discussion.
+const IGNORE_THRESHOLD_IN_BYTES = 10 * 1024;
 const PREVIEW_LENGTH = 100;
 
 /** @typedef {LH.Artifacts.CSSStyleSheetInfo & {networkRecord: LH.Artifacts.NetworkRequest, usedRules: Array<LH.Crdp.CSS.RuleUsage>}} StyleSheetInfo */
diff --git a/lighthouse-core/audits/seo/link-text.js b/lighthouse-core/audits/seo/link-text.js
index 6021555e6..e14ee89a9 100644
--- a/lighthouse-core/audits/seo/link-text.js
+++ b/lighthouse-core/audits/seo/link-text.js
@@ -44,6 +44,15 @@ const BLOCKLIST = new Set([
   'enlace',
   'este enlace',
   'empezar',
+  // Portuguese
+  'clique aqui',
+  'inicio',
+  'início',
+  'ir',
+  'mais informação',
+  'mais informações',
+  'mais',
+  'veja mais',
 ]);
 const i18n = require('../../lib/i18n/i18n.js');
 


Test patch:
diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
index 15df1431b..08a8b8884 100644
--- a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
+++ b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -158,9 +158,9 @@ setTimeout(() => {
 // PASS: unused but too small savings
 generateInlineStyleWithSize(512, '.too-small { background: none; }\n');
 // PASS: used
-generateInlineStyleWithSize(5000, '.mostly-used { background: none; }\n', true);
+generateInlineStyleWithSize(12000, '.mostly-used { background: none; }\n', true);
 // FAIL: unused and a bit of savings
-generateInlineStyleWithSize(5000, '.kinda-unused { background: none; }\n');
+generateInlineStyleWithSize(12000, '.kinda-unused { background: none; }\n');
 // FAIL: unused and lots of savings
 generateInlineStyleWithSize(30000, '.definitely-unused { background: none; }\n');
 </script>
diff --git a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
index 7b69fdae3..9a00707a1 100644
--- a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
+++ b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
@@ -48,7 +48,7 @@ module.exports = [
         },
         'unused-css-rules': {
           details: {
-            overallSavingsBytes: '>35000',
+            overallSavingsBytes: '>40000',
             items: {
               length: 2,
             },
diff --git a/lighthouse-core/test/audits/byte-efficiency/unused-css-rules-test.js b/lighthouse-core/test/audits/byte-efficiency/unused-css-rules-test.js
index 693ea43e7..ff3c7c236 100644
--- a/lighthouse-core/test/audits/byte-efficiency/unused-css-rules-test.js
+++ b/lighthouse-core/test/audits/byte-efficiency/unused-css-rules-test.js
@@ -121,7 +121,7 @@ describe('Best Practices: unused css rules audit', () => {
     const networkRecords = [
       {
         url: 'file://a.css',
-        transferSize: 10 * 1024,
+        transferSize: 100 * 1024,
         resourceType: 'Stylesheet',
       },
     ];
@@ -184,7 +184,7 @@ describe('Best Practices: unused css rules audit', () => {
         ]},
       }), networkRecords).then(result => {
         assert.equal(result.items.length, 2);
-        assert.equal(result.items[0].totalBytes, 10 * 1024);
+        assert.equal(result.items[0].totalBytes, 100 * 1024);
         assert.equal(result.items[1].totalBytes, 40000 * 3 * 0.2);
         assert.equal(result.items[0].wastedPercent, 75);
         assert.equal(result.items[1].wastedPercent, 50);
diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
index 477a984ce..85ac26f97 100644
--- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
@@ -251,4 +251,51 @@ describe('ReportRenderer', () => {
       .querySelectorAll('.lh-audit--notapplicable').length;
     assert.strictEqual(notApplicableCount, notApplicableElementCount);
   });
+
+  describe('axe-core', () => {
+    let axe;
+
+    beforeAll(() =>{
+      // Needed by axe-core
+      // https://github.com/dequelabs/axe-core/blob/581c441c/doc/examples/jsdom/test/a11y.js#L24
+      global.window = global.self;
+      global.Node = global.self.Node;
+      global.Element = global.self.Element;
+
+      // axe-core must be required after the global polyfills
+      axe = require('axe-core');
+    });
+
+    afterAll(() => {
+      global.window = undefined;
+      global.Node = undefined;
+      global.Element = undefined;
+    });
+
+    it('renders without axe violations', (done) => {
+      const container = renderer._dom._document.body;
+      const output = renderer.renderReport(sampleResults, container);
+
+      const config = {
+        rules: {
+          // Reports may have duplicate ids
+          // https://github.com/GoogleChrome/lighthouse/issues/9432
+          'duplicate-id': {enabled: false},
+          // The following rules are disable for axe-core + jsdom compatibility
+          // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#to-run-the-example
+          'color-contrast': {enabled: false},
+          'link-in-text-block': {enabled: false},
+        },
+      };
+
+      axe.run(output, config, (error, {violations}) => {
+        assert.ifError(error);
+        assert.ok(violations.length === 0, JSON.stringify(violations, null, 1));
+        done();
+      });
+
+    // Set timeout to 10s to give axe-core enough time to complete
+    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
+    }, /* timeout= */ 10 * 1000);
+  });
 });