Report all global CSS keywords usage (#389)

bartveneman · web-flow · commit efdb357c60bf · 2024-02-01T20:33:52.000+01:00
closes #387
diff --git a/src/__fixtures__/bol-com-20231008.json b/src/__fixtures__/bol-com-20231008.json
@@ -56587,6 +56587,18 @@
       "median": 1,
       "range": 1,
       "sum": 10452
+    },
+    "keywords": {
+      "total": 930,
+      "totalUnique": 5,
+      "unique": {
+        "none": 574,
+        "inherit": 89,
+        "auto": 231,
+        "initial": 33,
+        "unset": 3
+      },
+      "uniquenessRatio": 0.005376344086021506
     }
   }
 }
diff --git a/src/__fixtures__/bootstrap-5.3.2.json b/src/__fixtures__/bootstrap-5.3.2.json
@@ -30656,6 +30656,17 @@
       "median": 1,
       "range": 1,
       "sum": 5643
+    },
+    "keywords": {
+      "total": 538,
+      "totalUnique": 4,
+      "unique": {
+        "inherit": 34,
+        "none": 208,
+        "auto": 292,
+        "initial": 4
+      },
+      "uniquenessRatio": 0.007434944237918215
     }
   }
 }
diff --git a/src/__fixtures__/cnn-20231008.json b/src/__fixtures__/cnn-20231008.json
@@ -33714,6 +33714,18 @@
       "median": 1,
       "range": 1,
       "sum": 5964
+    },
+    "keywords": {
+      "total": 663,
+      "totalUnique": 5,
+      "unique": {
+        "auto": 116,
+        "none": 429,
+        "inherit": 43,
+        "initial": 13,
+        "unset": 62
+      },
+      "uniquenessRatio": 0.007541478129713424
     }
   }
 }
diff --git a/src/__fixtures__/css-tricks-20231008.json b/src/__fixtures__/css-tricks-20231008.json
@@ -14876,6 +14876,16 @@
       "median": 1,
       "range": 1,
       "sum": 2701
+    },
+    "keywords": {
+      "total": 182,
+      "totalUnique": 3,
+      "unique": {
+        "none": 113,
+        "auto": 59,
+        "inherit": 10
+      },
+      "uniquenessRatio": 0.016483516483516484
     }
   }
 }
diff --git a/src/__fixtures__/gazelle-20231008.json b/src/__fixtures__/gazelle-20231008.json
@@ -90344,6 +90344,18 @@
       "median": 1,
       "range": 1,
       "sum": 18098
+    },
+    "keywords": {
+      "total": 1196,
+      "totalUnique": 5,
+      "unique": {
+        "none": 767,
+        "auto": 347,
+        "inherit": 40,
+        "initial": 36,
+        "unset": 6
+      },
+      "uniquenessRatio": 0.004180602006688963
     }
   }
 }
diff --git a/src/__fixtures__/github-20231008.json b/src/__fixtures__/github-20231008.json
@@ -102120,6 +102120,19 @@
       "median": 1,
       "range": 1,
       "sum": 26314
+    },
+    "keywords": {
+      "total": 1518,
+      "totalUnique": 6,
+      "unique": {
+        "none": 961,
+        "inherit": 150,
+        "auto": 364,
+        "initial": 19,
+        "revert": 3,
+        "unset": 21
+      },
+      "uniquenessRatio": 0.003952569169960474
     }
   }
 }
diff --git a/src/__fixtures__/indiatimes-20231008.json b/src/__fixtures__/indiatimes-20231008.json
@@ -58267,6 +58267,17 @@
       "median": 1,
       "range": 1,
       "sum": 6161
+    },
+    "keywords": {
+      "total": 266,
+      "totalUnique": 4,
+      "unique": {
+        "none": 95,
+        "auto": 135,
+        "inherit": 35,
+        "unset": 1
+      },
+      "uniquenessRatio": 0.015037593984962405
     }
   }
 }
diff --git a/src/__fixtures__/smashing-magazine-20231008.json b/src/__fixtures__/smashing-magazine-20231008.json
@@ -51551,6 +51551,18 @@
       "median": 1,
       "range": 1,
       "sum": 11962
+    },
+    "keywords": {
+      "total": 980,
+      "totalUnique": 5,
+      "unique": {
+        "inherit": 80,
+        "auto": 281,
+        "none": 588,
+        "initial": 27,
+        "unset": 4
+      },
+      "uniquenessRatio": 0.00510204081632653
     }
   }
 }
diff --git a/src/__fixtures__/trello-20231008.json b/src/__fixtures__/trello-20231008.json
@@ -11656,6 +11656,16 @@
       "median": 1,
       "range": 1,
       "sum": 3825
+    },
+    "keywords": {
+      "total": 300,
+      "totalUnique": 3,
+      "unique": {
+        "inherit": 19,
+        "none": 141,
+        "auto": 140
+      },
+      "uniquenessRatio": 0.01
     }
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -5,7 +5,7 @@ import { isSupportsBrowserhack, isMediaBrowserhack } from './atrules/atrules.js'
 import { getCombinators, getComplexity, isAccessibility, isPrefixed } from './selectors/utils.js'
 import { colorFunctions, colorKeywords, namedColors, systemColors } from './values/colors.js'
 import { destructure, isSystemFont } from './values/destructure-font-shorthand.js'
-import { isValueKeyword } from './values/values.js'
+import { isValueKeyword, keywords } from './values/values.js'
 import { analyzeAnimation } from './values/animations.js'
 import { isValuePrefixed } from './values/vendor-prefix.js'
 import { ContextCollection } from './context-collection.js'
@@ -175,6 +175,7 @@ export function analyze(css, options = {}) {
   let colorFormats = new Collection(useLocations)
   let units = new ContextCollection(useLocations)
   let gradients = new Collection(useLocations)
+  let valueKeywords = new Collection(useLocations)
 
   walk(ast, function (node) {
     switch (node.type) {
@@ -412,6 +413,7 @@ export function analyze(css, options = {}) {
       case Value: {
         if (isValueKeyword(node)) {
           valueComplexities.push(1)
+          valueKeywords.p(stringifyNode(node), node.loc)
           break
         }
 
@@ -450,7 +452,11 @@ export function analyze(css, options = {}) {
         } else if (isProperty('font', property)) {
           if (isSystemFont(node)) return
 
-          let { font_size, line_height, font_family } = destructure(node, stringifyNode)
+          let { font_size, line_height, font_family } = destructure(node, stringifyNode, function (item) {
+            if (item.type === 'keyword') {
+              valueKeywords.p(item.value, loc)
+            }
+          })
 
           if (font_family) {
             fontFamilies.p(font_family, loc)
@@ -481,6 +487,8 @@ export function analyze(css, options = {}) {
               timingFunctions.p(stringifyNode(item.value), loc)
             } else if (item.type === 'duration') {
               durations.p(stringifyNode(item.value), loc)
+            } else if (item.type === 'keyword') {
+              valueKeywords.p(stringifyNode(item.value), loc)
             }
           })
           break
@@ -533,6 +541,10 @@ export function analyze(css, options = {}) {
               return this.skip
             }
             case Identifier: {
+              if (keywords.has(nodeName)) {
+                valueKeywords.p(nodeName, loc)
+              }
+
               // Bail out if it can't be a color name
               // 20 === 'lightgoldenrodyellow'.length
               // 3 === 'red'.length
@@ -870,6 +882,7 @@ export function analyze(css, options = {}) {
       browserhacks: valueBrowserhacks.c(),
       units: units.count(),
       complexity: valueComplexity,
+      keywords: valueKeywords.c(),
     },
     __meta__: {
       parseTime: startAnalysis - startParse,
diff --git a/src/index.test.js b/src/index.test.js
@@ -460,7 +460,13 @@ Api("handles empty input gracefully", () => {
         median: 0,
         range: 0,
         sum: 0,
-      }
+      },
+      keywords: {
+        total: 0,
+        totalUnique: 0,
+        unique: {},
+        uniquenessRatio: 0,
+      },
     },
   }
 
diff --git a/src/smoke.test.js b/src/smoke.test.js
@@ -30,7 +30,6 @@ Object.entries({
   const expected = JSON.parse(json)
 
   // writeFileSync(`./src/__fixtures__/${fileName}.json`, JSON.stringify(actual, null, 2))
-
   Smoke(`${name} - Stylesheet`, () => assert.equal(actual.stylesheet, expected.stylesheet))
   Smoke(`${name} - Atrules`, () => assert.equal(actual.atrules, expected.atrules))
   Smoke(`${name} - Rules`, () => assert.equal(actual.rules, expected.rules))
diff --git a/src/values/animations.js b/src/values/animations.js
@@ -1,4 +1,5 @@
 import { KeywordSet } from "../keyword-set.js"
+import { keywords } from "./values.js"
 import {
   Operator,
   Dimension,
@@ -38,11 +39,18 @@ export function analyzeAnimation(children, cb) {
         type: 'duration',
         value: child,
       })
-    } else if (type === Identifier && TIMING_KEYWORDS.has(name)) {
-      cb({
-        type: 'fn',
-        value: child,
-      })
+    } else if (type === Identifier) {
+      if (TIMING_KEYWORDS.has(name)) {
+        cb({
+          type: 'fn',
+          value: child,
+        })
+      } else if (keywords.has(name)) {
+        cb({
+          type: 'keyword',
+          value: child,
+        })
+      }
     } else if (type === Func && TIMING_FUNCTION_VALUES.has(name)) {
       cb({
         type: 'fn',
diff --git a/src/values/destructure-font-shorthand.js b/src/values/destructure-font-shorthand.js
@@ -1,4 +1,5 @@
 import { KeywordSet } from '../keyword-set.js'
+import { keywords } from './values.js'
 import { Identifier, Nr, Operator } from '../css-tree-node-types.js'
 
 const SYSTEM_FONTS = new KeywordSet([
@@ -38,7 +39,7 @@ export function isSystemFont(node) {
  * @param {import('css-tree').Value} value
  * @param {*} stringifyNode
  */
-export function destructure(value, stringifyNode) {
+export function destructure(value, stringifyNode, cb) {
 	let font_family = Array.from({ length: 2 })
 	let font_size
 	let line_height
@@ -47,6 +48,13 @@ export function destructure(value, stringifyNode) {
 		let prev = item.prev ? item.prev.data : undefined
 		let next = item.next ? item.next.data : undefined
 
+		if (node.type === Identifier && keywords.has(node.name)) {
+			cb({
+				type: 'keyword',
+				value: node.name,
+			})
+		}
+
 		// any node that comes before the '/' is the font-size
 		if (next && next.type === Operator && next.value.charCodeAt(0) === SLASH) {
 			font_size = stringifyNode(node)
diff --git a/src/values/keywords.test.js b/src/values/keywords.test.js
diff --git a/src/values/values.js b/src/values/values.js

Original file line number	Diff line number	Diff line change
`@@ -56587,6 +56587,18 @@`
`56587`	`56587`	`"median": 1,`
`56588`	`56588`	`"range": 1,`
`56589`	`56589`	`"sum": 10452`
	`56590`	`+ },`
	`56591`	`+ "keywords": {`
	`56592`	`+ "total": 930,`
	`56593`	`+ "totalUnique": 5,`
	`56594`	`+ "unique": {`
	`56595`	`+ "none": 574,`
	`56596`	`+ "inherit": 89,`
	`56597`	`+ "auto": 231,`
	`56598`	`+ "initial": 33,`
	`56599`	`+ "unset": 3`
	`56600`	`+ },`
	`56601`	`+ "uniquenessRatio": 0.005376344086021506`
`56590`	`56602`	`}`
`56591`	`56603`	`}`
`56592`	`56604`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30656,6 +30656,17 @@`
`30656`	`30656`	`"median": 1,`
`30657`	`30657`	`"range": 1,`
`30658`	`30658`	`"sum": 5643`
	`30659`	`+ },`
	`30660`	`+ "keywords": {`
	`30661`	`+ "total": 538,`
	`30662`	`+ "totalUnique": 4,`
	`30663`	`+ "unique": {`
	`30664`	`+ "inherit": 34,`
	`30665`	`+ "none": 208,`
	`30666`	`+ "auto": 292,`
	`30667`	`+ "initial": 4`
	`30668`	`+ },`
	`30669`	`+ "uniquenessRatio": 0.007434944237918215`
`30659`	`30670`	`}`
`30660`	`30671`	`}`
`30661`	`30672`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33714,6 +33714,18 @@`
`33714`	`33714`	`"median": 1,`
`33715`	`33715`	`"range": 1,`
`33716`	`33716`	`"sum": 5964`
	`33717`	`+ },`
	`33718`	`+ "keywords": {`
	`33719`	`+ "total": 663,`
	`33720`	`+ "totalUnique": 5,`
	`33721`	`+ "unique": {`
	`33722`	`+ "auto": 116,`
	`33723`	`+ "none": 429,`
	`33724`	`+ "inherit": 43,`
	`33725`	`+ "initial": 13,`
	`33726`	`+ "unset": 62`
	`33727`	`+ },`
	`33728`	`+ "uniquenessRatio": 0.007541478129713424`
`33717`	`33729`	`}`
`33718`	`33730`	`}`
`33719`	`33731`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14876,6 +14876,16 @@`
`14876`	`14876`	`"median": 1,`
`14877`	`14877`	`"range": 1,`
`14878`	`14878`	`"sum": 2701`
	`14879`	`+ },`
	`14880`	`+ "keywords": {`
	`14881`	`+ "total": 182,`
	`14882`	`+ "totalUnique": 3,`
	`14883`	`+ "unique": {`
	`14884`	`+ "none": 113,`
	`14885`	`+ "auto": 59,`
	`14886`	`+ "inherit": 10`
	`14887`	`+ },`
	`14888`	`+ "uniquenessRatio": 0.016483516483516484`
`14879`	`14889`	`}`
`14880`	`14890`	`}`
`14881`	`14891`	`}`
Original file line number	Diff line number	Diff line change
`@@ -90344,6 +90344,18 @@`
`90344`	`90344`	`"median": 1,`
`90345`	`90345`	`"range": 1,`
`90346`	`90346`	`"sum": 18098`
	`90347`	`+ },`
	`90348`	`+ "keywords": {`
	`90349`	`+ "total": 1196,`
	`90350`	`+ "totalUnique": 5,`
	`90351`	`+ "unique": {`
	`90352`	`+ "none": 767,`
	`90353`	`+ "auto": 347,`
	`90354`	`+ "inherit": 40,`
	`90355`	`+ "initial": 36,`
	`90356`	`+ "unset": 6`
	`90357`	`+ },`
	`90358`	`+ "uniquenessRatio": 0.004180602006688963`
`90347`	`90359`	`}`
`90348`	`90360`	`}`
`90349`	`90361`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58267,6 +58267,17 @@`
`58267`	`58267`	`"median": 1,`
`58268`	`58268`	`"range": 1,`
`58269`	`58269`	`"sum": 6161`
	`58270`	`+ },`
	`58271`	`+ "keywords": {`
	`58272`	`+ "total": 266,`
	`58273`	`+ "totalUnique": 4,`
	`58274`	`+ "unique": {`
	`58275`	`+ "none": 95,`
	`58276`	`+ "auto": 135,`
	`58277`	`+ "inherit": 35,`
	`58278`	`+ "unset": 1`
	`58279`	`+ },`
	`58280`	`+ "uniquenessRatio": 0.015037593984962405`
`58270`	`58281`	`}`
`58271`	`58282`	`}`
`58272`	`58283`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51551,6 +51551,18 @@`
`51551`	`51551`	`"median": 1,`
`51552`	`51552`	`"range": 1,`
`51553`	`51553`	`"sum": 11962`
	`51554`	`+ },`
	`51555`	`+ "keywords": {`
	`51556`	`+ "total": 980,`
	`51557`	`+ "totalUnique": 5,`
	`51558`	`+ "unique": {`
	`51559`	`+ "inherit": 80,`
	`51560`	`+ "auto": 281,`
	`51561`	`+ "none": 588,`
	`51562`	`+ "initial": 27,`
	`51563`	`+ "unset": 4`
	`51564`	`+ },`
	`51565`	`+ "uniquenessRatio": 0.00510204081632653`
`51554`	`51566`	`}`
`51555`	`51567`	`}`
`51556`	`51568`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11656,6 +11656,16 @@`
`11656`	`11656`	`"median": 1,`
`11657`	`11657`	`"range": 1,`
`11658`	`11658`	`"sum": 3825`
	`11659`	`+ },`
	`11660`	`+ "keywords": {`
	`11661`	`+ "total": 300,`
	`11662`	`+ "totalUnique": 3,`
	`11663`	`+ "unique": {`
	`11664`	`+ "inherit": 19,`
	`11665`	`+ "none": 141,`
	`11666`	`+ "auto": 140`
	`11667`	`+ },`
	`11668`	`+ "uniquenessRatio": 0.01`
`11659`	`11669`	`}`
`11660`	`11670`	`}`
`11661`	`11671`	`}`