add analysis for container names (#462)

closes #332

Author: bartveneman

src/atrules/atrules.test.js

@@ -792,7 +792,85 @@ AtRules('analyzes container queries', () => {
       'card (inline-size > 30em) and (--responsive = true)': 1,
       'type(inline-size)': 1,
     },
-    uniquenessRatio: 7 / 7
+    uniquenessRatio: 7 / 7,
+    names: {
+      total: 3,
+      totalUnique: 3,
+      unique: {
+        'card': 1,
+        'page-layout': 1,
+        'component-library': 1,
+      },
+      uniquenessRatio: 1 / 1,
+    },
+  }
+
+  assert.equal(actual, expected)
+})
+
+AtRules('finds named containers in @container', () => {
+  const fixture = `
+    @container test1 (inline-size > 30em) {}
+    @container test2 (inline-size > 30em) and style(--responsive: true) {}
+    @container style(--responsive: true) {}
+  `
+  const actual = analyze(fixture).atrules.container.names
+  const TOTAL = 2
+  const UNIQUE = 2
+  const expected = {
+    total: TOTAL,
+    totalUnique: TOTAL,
+    unique: {
+      'test1': 1,
+      'test2': 1,
+    },
+    uniquenessRatio: UNIQUE / TOTAL,
+  }
+
+  assert.equal(actual, expected)
+})
+
+AtRules('finds named containers in the `container-name` property', () => {
+  const fixture = `
+    a {
+      container-name: my-layout;
+      container-name: my-component;
+    }
+  `
+  const actual = analyze(fixture).atrules.container.names
+  const TOTAL = 2
+  const UNIQUE = 2
+  const expected = {
+    total: TOTAL,
+    totalUnique: TOTAL,
+    unique: {
+      'my-layout': 1,
+      'my-component': 1,
+    },
+    uniquenessRatio: UNIQUE / TOTAL,
+  }
+
+  assert.equal(actual, expected)
+})
+
+AtRules('finds named containers in the `container` shorthand', () => {
+  const fixture = `
+    a {
+      container: my-layout / size;
+      container: my-component / inline-size;
+    }
+  `
+  const actual = analyze(fixture).atrules.container.names
+  const TOTAL = 2
+  const UNIQUE = 2
+  const expected = {
+    total: TOTAL,
+    totalUnique: TOTAL,
+    unique: {
+      'my-layout': 1,
+      'my-component': 1,
+    },
+    uniquenessRatio: UNIQUE / TOTAL,
   }
 
   assert.equal(actual, expected)

src/index.js

@@ -126,6 +126,7 @@ export function analyze(css, options = {}) {
   let keyframes = new Collection(useLocations)
   let prefixedKeyframes = new Collection(useLocations)
   let containers = new Collection(useLocations)
+  let containerNames = new Collection(useLocations)
   let registeredProperties = new Collection(useLocations)
 
   // Rules
@@ -264,6 +265,12 @@ export function analyze(css, options = {}) {
             charsets.p(preludeStr, loc)
           } else if (atRuleName === 'container') {
             containers.p(preludeStr, loc)
+
+            if (prelude.children.first?.type === 'Identifier') {
+              let containerName = prelude.children.first.name
+              console.log(containerName)
+              containerNames.p(containerName, loc)
+            }
             // TODO: calculate complexity of container 'declaration'
           } else if (atRuleName === 'property') {
             registeredProperties.p(preludeStr, loc)
@@ -546,7 +553,18 @@ export function analyze(css, options = {}) {
             timingFunctions.p(stringifyNode(node), loc)
           }
           break
-        } else if (border_radius_properties.has(basename(property))) {
+        }
+        else if (isProperty('container-name', property)) {
+          containerNames.p(stringifyNode(node), loc)
+        }
+        else if (isProperty('container', property)) {
+          // The first identifier is the container name
+          // Example: container: my-layout / inline-size;
+          if (children.first?.type === 'Identifier') {
+            containerNames.p(children.first.name, loc)
+          }
+        }
+        else if (border_radius_properties.has(basename(property))) {
           if (!isValueKeyword(node)) {
             borderRadiuses.push(stringifyNode(node), property, loc)
           }
@@ -769,7 +787,12 @@ export function analyze(css, options = {}) {
           ratio: ratio(prefixedKeyframes.size(), keyframes.size())
         }),
       }),
-      container: containers.c(),
+      container: assign(
+        containers.c(),
+        {
+          names: containerNames.c(),
+        }
+      ),
       layer: layers.c(),
       property: registeredProperties.c(),
       total: totalAtRules,

src/index.test.js

@@ -153,6 +153,12 @@ Api("handles empty input gracefully", () => {
         totalUnique: 0,
         unique: {},
         uniquenessRatio: 0,
+        names: {
+          total: 0,
+          totalUnique: 0,
+          unique: {},
+          uniquenessRatio: 0,
+        },
       },
       layer: {
         total: 0,