fix(core): support bracket notation in findUsedTokenNames (#125) (#334)

Support `styles['foo']` and `styles["foo"]` bracket notation in
addition to the existing `styles.foo` dot notation.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: mizdra

.changeset/support-bracket-notation.md

@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/core': patch
+---
+
+fix(core): support `styles['foo']` and `styles["foo"]` bracket notation in `findUsedTokenNames`

packages/core/src/util.test.ts

@@ -37,14 +37,14 @@ test('findUsedTokenNames', () => {
     styles.a_1;
     styles.a_1;
     styles.a_2;
-    styles['a_3'];
-    styles["a_4"];
-    styles[\`a_5\`];
+    styles['a-3'];
+    styles["a-4"];
+    styles[\`a-5\`];
     // styles.a_6; // false positive, but it is acceptable for simplicity of implementation
-    styles['a_7;
-    styles['a_8"];
+    styles['a-7;
+    styles['a-8"];
     styles;
   `;
-  const expected = new Set(['a_1', 'a_2', 'a_6']);
+  const expected = new Set(['a_1', 'a_2', 'a-3', 'a-4', 'a_6']);
   expect(findUsedTokenNames(text)).toEqual(expected);
 });

packages/core/src/util.ts

@@ -34,17 +34,18 @@ export function validateTokenName(name: string, options: ValidateTokenNameOption
 
 /**
  * The syntax pattern for consuming tokens imported from CSS Module.
- * @example `styles.foo`
+ * @example `styles.foo`, `styles['foo']`, `styles["foo"]`
  */
-// TODO(#125): Support `styles['foo']` and `styles["foo"]`
 // MEMO: The `xxxStyles.foo` format is not supported, because the css module file for current component file is usually imported with `styles`.
 //       It is sufficient to support only the `styles.foo` format.
-const TOKEN_CONSUMER_PATTERN = /styles\.([$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*)/gu;
+const TOKEN_CONSUMER_PATTERN =
+  /styles(?:\.([$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*)|\['([^']*?)'\]|\["([^"]*?)"\])/gu;
 
 export function findUsedTokenNames(componentText: string): Set<string> {
   const usedClassNames = new Set<string>();
   for (const match of componentText.matchAll(TOKEN_CONSUMER_PATTERN)) {
-    usedClassNames.add(match[1]!);
+    const name = match[1] ?? match[2] ?? match[3];
+    if (name) usedClassNames.add(name);
   }
   return usedClassNames;
 }