From 23b1a6e99be033d2956dbd8c21a03d9c3ba332da Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:33:53 +0200 Subject: [PATCH] Analyze `@property` atrules #339 (#341) --- src/__fixtures__/bol-com-20190617.json | 6 ++ src/__fixtures__/bootstrap-5.0.0.json | 6 ++ src/__fixtures__/cnn-20220403.json | 6 ++ src/__fixtures__/css-tricks-20190319.json | 6 ++ src/__fixtures__/facebook-20190319.json | 6 ++ src/__fixtures__/gazelle-20210905.json | 6 ++ src/__fixtures__/github-20210501.json | 6 ++ src/__fixtures__/indiatimes-20230219.json | 6 ++ src/__fixtures__/lego-20190617.json | 6 ++ .../smashing-magazine-20190319.json | 6 ++ src/__fixtures__/trello-20190617.json | 6 ++ src/atrules/atrules.test.js | 65 +++++++++++++++++++ src/index.js | 8 +++ src/index.test.js | 6 ++ 14 files changed, 145 insertions(+) diff --git a/src/__fixtures__/bol-com-20190617.json b/src/__fixtures__/bol-com-20190617.json index fdeb58d..e42109d 100644 --- 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 index a97d6cc..065de50 100644 --- 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 index 3dcf9a3..0bd21a5 100644 --- 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 index a1ccb49..2734287 100644 --- 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 index f80312e..c4a0a1d 100644 --- 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 index 3101d6f..e29b889 100644 --- 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 index 98fbc3e..a33d056 100644 --- 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 index b74698f..f6e35a7 100644 --- 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 index 4a7d782..819987f 100644 --- 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 index 6ee831c..464d99b 100644 --- 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 index f2fdd7e..8b300d2 100644 --- 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 index a4cda5a..a9e6f2a 100644 --- 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: ''; + initial-value: 100%; + inherits: false; + } + + @property --hue { + syntax: ''; + initial-value: .5turn; + inherits: false; + } + + @property --surface { + syntax: ''; + initial-value: #333; + inherits: true; + } + + @property --surface-over { + syntax: ''; + initial-value: #444; + inherits: true; + } + + @property --surface-under { + syntax: ''; + initial-value: #222; + inherits: true; + } + /* end nerdy.dev examples */ + + @media all { + @layer test { + @property --test-dupe { + syntax: ''; + inherits: false; + } + @property --test-dupe { + syntax: ''; + 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() \ No newline at end of file diff --git a/src/index.js b/src/index.js index 85cb677..a20a7ed 100644 --- 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 index 179fbf3..a0dd16c 100644 --- 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": {