Analyze @property atrules #339 (#341)

bartveneman · web-flow · commit 23b1a6e99be0 · 2023-09-06T14:33:53.000+02:00
diff --git a/src/__fixtures__/bol-com-20190617.json b/src/__fixtures__/bol-com-20190617.json
@@ -223,6 +223,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/bootstrap-5.0.0.json b/src/__fixtures__/bootstrap-5.0.0.json
@@ -140,6 +140,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/cnn-20220403.json b/src/__fixtures__/cnn-20220403.json
@@ -1075,6 +1075,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/css-tricks-20190319.json b/src/__fixtures__/css-tricks-20190319.json
@@ -155,6 +155,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/facebook-20190319.json b/src/__fixtures__/facebook-20190319.json
@@ -161,6 +161,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/gazelle-20210905.json b/src/__fixtures__/gazelle-20210905.json
@@ -268,6 +268,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/github-20210501.json b/src/__fixtures__/github-20210501.json
@@ -143,6 +143,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/indiatimes-20230219.json b/src/__fixtures__/indiatimes-20230219.json
@@ -142,6 +142,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/lego-20190617.json b/src/__fixtures__/lego-20190617.json
@@ -550,6 +550,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/smashing-magazine-20190319.json b/src/__fixtures__/smashing-magazine-20190319.json
@@ -412,6 +412,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/__fixtures__/trello-20190617.json b/src/__fixtures__/trello-20190617.json
@@ -431,6 +431,12 @@
       "totalUnique": 0,
       "unique": {},
       "uniquenessRatio": 0
+    },
+    "property": {
+      "total": 0,
+      "totalUnique": 0,
+      "unique": {},
+      "uniquenessRatio": 0
     }
   },
   "rules": {
diff --git a/src/atrules/atrules.test.js b/src/atrules/atrules.test.js
@@ -544,4 +544,69 @@ AtRules('analyzes container queries', () => {
   assert.equal(actual, expected)
 })
 
+AtRules('analyzes @property', () => {
+  const fixture = `
+    /* Examples from https://nerdy.dev/cant-break-this-design-system */
+    @property --focal-size {
+      syntax: '<length-percentage>';
+      initial-value: 100%;
+      inherits: false;
+    }
+
+    @property --hue {
+      syntax: '<angle>';
+      initial-value: .5turn;
+      inherits: false;
+    }
+
+    @property --surface {
+      syntax: '<color>';
+      initial-value: #333;
+      inherits: true;
+    }
+
+    @property --surface-over {
+      syntax: '<color>';
+      initial-value: #444;
+      inherits: true;
+    }
+
+    @property --surface-under {
+      syntax: '<color>';
+      initial-value: #222;
+      inherits: true;
+    }
+    /* end nerdy.dev examples */
+
+    @media all {
+      @layer test {
+        @property --test-dupe {
+          syntax: '<color>';
+          inherits: false;
+        }
+        @property --test-dupe {
+          syntax: '<color>';
+          inherits: false;
+        }
+      }
+    }
+  `
+  const actual = analyze(fixture).atrules.property
+  const expected = {
+    total: 7,
+    totalUnique: 6,
+    unique: {
+      '--focal-size': 1,
+      '--hue': 1,
+      '--surface': 1,
+      '--surface-over': 1,
+      '--surface-under': 1,
+      '--test-dupe': 2,
+    },
+    uniquenessRatio: 6 / 7
+  }
+
+  assert.equal(actual, expected)
+})
+
 AtRules.run()
diff --git a/src/index.js b/src/index.js
@@ -96,6 +96,7 @@ export function analyze(css, options = {}) {
   let keyframes = new Collection({ useLocations })
   let prefixedKeyframes = new Collection({ useLocations })
   let containers = new Collection({ useLocations })
+  let registeredProperties = new Collection({ useLocations })
 
   // Rules
   let totalRules = 0
@@ -218,6 +219,12 @@ export function analyze(css, options = {}) {
           prelude
             .split(',')
             .forEach(name => layers.push(name.trim(), node.prelude.loc))
+          break
+        }
+        if (atRuleName === 'property') {
+          let prelude = stringifyNode(node.prelude)
+          registeredProperties.push(prelude, node.prelude.loc)
+          break
         }
         break
       }
@@ -628,6 +635,7 @@ export function analyze(css, options = {}) {
       }),
       container: containers.count(),
       layer: layers.count(),
+      property: registeredProperties.count(),
     },
     rules: {
       total: totalRules,
diff --git a/src/index.test.js b/src/index.test.js
@@ -113,6 +113,12 @@ Api('handles empty input gracefully', () => {
         "totalUnique": 0,
         "unique": {},
         "uniquenessRatio": 0
+      },
+      "property": {
+        "total": 0,
+        "totalUnique": 0,
+        "unique": {},
+        "uniquenessRatio": 0
       }
     },
     "rules": {
