fix wrong hexlength when combined with ie9 hack

projectwallace · Jan 7, 2023 · 857132f · 857132f
1 parent fb144be
commit 857132f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/src/__fixtures__/gazelle-20210905.json b/src/__fixtures__/gazelle-20210905.json
@@ -95805,17 +95805,16 @@
       },
       "formats": {
         "total": 2893,
-        "totalUnique": 7,
+        "totalUnique": 6,
         "unique": {
           "hex6": 1101,
-          "hex3": 751,
+          "hex3": 752,
           "rgba": 395,
           "named": 38,
           "transparent": 231,
-          "rgb": 376,
-          "hex5": 1
+          "rgb": 376
         },
-        "uniquenessRatio": 0.0024196335983408227
+        "uniquenessRatio": 0.002073971655720705
       }
     },
     "fontFamilies": {

diff --git a/src/index.js b/src/index.js
@@ -16,6 +16,7 @@ import { strEquals, startsWith, endsWith } from './string-utils.js'
 import { hasVendorPrefix } from './vendor-prefix.js'
 import { isCustom, isHack, isProperty } from './properties/property-utils.js'
 import { getEmbedType } from './stylesheet/stylesheet.js'
+import { isIe9Hack } from './values/browserhacks.js'
 
 function ratio(part, total) {
   if (total === 0) return 0
@@ -312,11 +313,7 @@ const analyze = (css) => {
         }
 
         // i.e. `property: value\9`
-        if (node.children
-          && node.children.last
-          && node.children.last.type === 'Identifier'
-          && endsWith('\\9', node.children.last.name)
-        ) {
+        if (isIe9Hack(node)) {
           valueBrowserhacks.push(stringifyNode(node))
         }
 
@@ -378,7 +375,10 @@ const analyze = (css) => {
         walk(node, function (valueNode) {
           switch (valueNode.type) {
             case 'Hash': {
-              const hexLength = valueNode.value.length
+              let hexLength = valueNode.value.length
+              if (endsWith('\\9', valueNode.value)) {
+                hexLength = hexLength - 2
+              }
               colors.push('#' + valueNode.value, property)
               colorFormats.push(`hex` + hexLength)
 

diff --git a/src/values/browserhacks.js b/src/values/browserhacks.js
@@ -0,0 +1,8 @@
+import { endsWith } from "../string-utils.js"
+
+export function isIe9Hack(node) {
+	return node.children
+		&& node.children.last
+		&& node.children.last.type === 'Identifier'
+		&& endsWith('\\9', node.children.last.name)
+}
diff --git a/src/values/colors.test.js b/src/values/colors.test.js
@@ -121,6 +121,41 @@ Colors('finds hex colors', () => {
   assert.equal(actual, expected)
 })
 
+Colors('Counts hex format correctly when combined with a browserhack', () => {
+  let actual = analyze(`
+    a {
+      color: #000\\9;
+    }
+  `)
+  let expected = {
+    total: 1,
+    totalUnique: 1,
+    unique: {
+      '#000\\9': 1,
+    },
+    uniquenessRatio: 1,
+    itemsPerContext: {
+      color: {
+        total: 1,
+        totalUnique: 1,
+        uniquenessRatio: 1,
+        unique: {
+          '#000\\9': 1,
+        },
+      },
+    },
+    formats: {
+      total: 1,
+      totalUnique: 1,
+      unique: {
+        hex3: 1,
+      },
+      uniquenessRatio: 1,
+    }
+  }
+  assert.equal(actual.values.colors, expected);
+})
+
 Colors('finds hsl(a) colors', () => {
   const actual = analyze(`
     test {