deps: update cssstyle to parse more named colors, CSS4 colors (#7283)

lighthouse-core/test/audits/themed-omnibox-test.js

@@ -126,6 +126,15 @@ describe('PWA: themed omnibox audit', () => {
     });
   });
 
+  it('succeeds when theme-color has a CSS4 nickname content value', async () => {
+    const artifacts = generateMockArtifacts();
+    artifacts.MetaElements = [{name: 'theme-color', content: 'rebeccapurple'}]; // <3
+    const context = generateMockAuditContext();
+
+    const result = await ThemedOmniboxAudit.audit(artifacts, context);
+    assert.equal(result.rawValue, true);
+    assert.equal(result.explanation, undefined);
+  });
 
   it('fails if HTML theme color is good, but manifest themecolor is bad', () => {
     const artifacts = generateMockArtifacts();

lighthouse-core/test/lib/manifest-parser-test.js

@@ -455,4 +455,99 @@ describe('Manifest Parser', function() {
       assert.equal(url0, undefined);
     });
   });
+
+  describe('background_color, theme_color', () => {
+    /**
+     * Create a manifest with the specified colors and return the parsed result.
+     * @param {string} backgroundColor
+     * @param {string} themeColor
+     */
+    function getParsedManifest(backgroundColor, themeColor) {
+      return manifestParser(`{
+        "background_color": "${backgroundColor}",
+        "theme_color": "${themeColor}"
+      }`, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL);
+    }
+
+    it('correctly parses hex colors', () => {
+      const bgColor = '#123';
+      const themeColor = '#1a5e25';
+      const parsedManifest = getParsedManifest(bgColor, themeColor).value;
+
+      assert.strictEqual(parsedManifest.background_color.value, bgColor);
+      assert.strictEqual(parsedManifest.background_color.warning, undefined);
+      assert.strictEqual(parsedManifest.theme_color.value, themeColor);
+      assert.strictEqual(parsedManifest.theme_color.warning, undefined);
+    });
+
+    it('correctly parses CSS3 and CSS4 nickname colors', () => {
+      const bgColor = 'cornflowerblue';
+      const themeColor = 'rebeccapurple'; // <3
+      const parsedManifest = getParsedManifest(bgColor, themeColor).value;
+
+      assert.strictEqual(parsedManifest.background_color.value, bgColor);
+      assert.strictEqual(parsedManifest.background_color.warning, undefined);
+      assert.strictEqual(parsedManifest.theme_color.value, themeColor);
+      assert.strictEqual(parsedManifest.theme_color.warning, undefined);
+    });
+
+    it('correctly parses RGB/RGBA colors', () => {
+      const bgColor = 'rgb(222, 184, 135)';
+      const themeColor = 'rgba(5%, 10%, 20%, 0.4)';
+      const parsedManifest = getParsedManifest(bgColor, themeColor).value;
+
+      assert.strictEqual(parsedManifest.background_color.value, bgColor);
+      assert.strictEqual(parsedManifest.background_color.warning, undefined);
+      assert.strictEqual(parsedManifest.theme_color.value, themeColor);
+      assert.strictEqual(parsedManifest.theme_color.warning, undefined);
+    });
+
+    it('correctly parses HSL/HSLA colors', () => {
+      const bgColor = 'hsl(120, 100%, 50%)';
+      const themeColor = 'hsla(120, 20%, 56%, 0.4)';
+      const parsedManifest = getParsedManifest(bgColor, themeColor).value;
+
+      assert.strictEqual(parsedManifest.background_color.value, bgColor);
+      assert.strictEqual(parsedManifest.background_color.warning, undefined);
+      assert.strictEqual(parsedManifest.theme_color.value, themeColor);
+      assert.strictEqual(parsedManifest.theme_color.warning, undefined);
+    });
+
+    it('warns on invalid colors', () => {
+      const bgColor = 'notarealcolor';
+      const themeColor = '#0123456789';
+      const parsedManifest = getParsedManifest(bgColor, themeColor).value;
+
+      assert.deepStrictEqual(parsedManifest.background_color, {
+        raw: bgColor,
+        value: undefined,
+        warning: 'ERROR: color parsing failed.',
+      });
+      assert.deepStrictEqual(parsedManifest.theme_color, {
+        raw: themeColor,
+        value: undefined,
+        warning: 'ERROR: color parsing failed.',
+      });
+    });
+
+    it('warns when colors are not strings', () => {
+      const bgColor = 15;
+      const themeColor = false;
+      const parsedManifest = manifestParser(`{
+        "background_color": ${bgColor},
+        "theme_color": ${themeColor}
+      }`, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL).value;
+
+      assert.deepStrictEqual(parsedManifest.background_color, {
+        raw: bgColor,
+        value: undefined,
+        warning: 'ERROR: expected a string.',
+      });
+      assert.deepStrictEqual(parsedManifest.theme_color, {
+        raw: themeColor,
+        value: undefined,
+        warning: 'ERROR: expected a string.',
+      });
+    });
+  });
 });

package.json

@@ -140,7 +140,7 @@
     "axe-core": "3.1.2",
     "chrome-launcher": "^0.10.5",
     "configstore": "^3.1.1",
-    "cssstyle": "1.1.1",
+    "cssstyle": "1.2.1",
     "details-element-polyfill": "2.2.0",
     "esprima": "^4.0.1",
     "http-link-header": "^0.8.0",

yarn.lock

@@ -2336,10 +2336,10 @@ cssom@^0.3.4:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
   integrity sha512-+7prCSORpXNeR4/fUP3rL+TzqtiFfhMvTd7uEqMdgPvLPt4+uzFUeufx5RHjGTACCargg/DiEt/moMQmvnfkog==
 
-cssstyle@1.1.1, cssstyle@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb"
-  integrity sha512-364AI1l/M5TYcFH83JnOH/pSqgaNnKmYgKrm0didZMGKWjQB60dymwWy1rKUgL3J1ffdq9xVi2yGLHdSjjSNog==
+cssstyle@1.2.1, cssstyle@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.2.1.tgz#3aceb2759eaf514ac1a21628d723d6043a819495"
+  integrity sha512-7DYm8qe+gPx/h77QlCyFmX80+fGaE/6A/Ekl0zaszYOubvySO2saYFdQ78P29D0UsULxFKCetDGNaNRUdSF+2A==
   dependencies:
     cssom "0.3.x"