WIP

packages/happy-css-modules/src/locator/index.test.ts

@@ -177,6 +177,27 @@ test('tracks other files when `composes` is present', async () => {
   `);
 });
 
+test('tracks other files when `@value` is present', async () => {
+  createFixtures({
+    '/test/1.css': dedent`
+    @value a from './2.css';
+    @value b from '3.css';
+    @value c from '${getFixturePath('/test/4.css')}';
+    `,
+    '/test/2.css': dedent`
+    @value a: 1;
+    `,
+    '/test/3.css': dedent`
+    @value b: 2;
+    `,
+    '/test/4.css': dedent`
+    @value c: 3;
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+  expect(result).toMatchInlineSnapshot(`{ dependencies: [], tokens: [] }`);
+});
+
 test('normalizes tokens', async () => {
   createFixtures({
     '/test/1.css': dedent`

packages/happy-css-modules/src/locator/index.ts

@@ -11,6 +11,7 @@ import {
   type Location,
   parseComposesDeclarationWithFromUrl,
   collectNodes,
+  parseAtValue,
 } from './postcss.js';
 
 export { collectNodes, type Location } from './postcss.js';
@@ -210,14 +211,29 @@ export class Locator {
     }
 
     for (const atValue of atValues) {
-      const name = atValue.params.slice(0, atValue.params.indexOf(':'));
-      if (!localTokenNames.includes(name)) continue;
-
-      tokens.push({
-        name,
-        // TODO: `getOriginalLocation` expects a `ClassName`.
-        originalLocations: [],
-      });
+      const atValueData = parseAtValue(atValue);
+      if (!atValueData) continue;
+
+      if (atValueData.type === 'valueDeclaration') {
+        if (atValue.source === undefined) throw new Error('Unexpected error.');
+        tokens.push({
+          name: atValueData.tokenName,
+          originalLocations: [
+            {
+              filePath: atValue.source.input.file!,
+              start: atValue.source.start!,
+              end: atValue.source.end!,
+            },
+          ],
+        });
+      } else if (atValueData.type === 'valueImport') {
+        if (isIgnoredSpecifier(atValueData.importedSheetPath)) continue;
+        const from = await this.resolver(atValueData.importedSheetPath, { request: filePath });
+        const result = await this._load(from);
+        const externalTokens = result.tokens.filter((token) => atValueData.tokenNames.includes(token.name));
+        dependencies.push(from, ...result.dependencies);
+        tokens.push(...externalTokens);
+      }
     }
 
     const result: LoadResult = {

packages/happy-css-modules/src/locator/postcss.test.ts

@@ -43,11 +43,11 @@ describe('generateLocalTokenNames', () => {
         .composes {
           composes: composes_target;
         }
-        @value atvalue: foo;
+        @value value: #BF4040;
         `),
       ),
     ).toStrictEqual([
-      'atvalue',
+      'value',
       'basic',
       'cascading',
       'pseudo_class_1',
@@ -83,11 +83,15 @@ describe('generateLocalTokenNames', () => {
     ).toStrictEqual([]);
   });
   test('does not track styles imported by @value in other file because it is not a local token', async () => {
-    createFixtures({});
+    createFixtures({
+      '/test/1.css': dedent`
+      .a {}
+      `,
+    });
     expect(
       await generateLocalTokenNames(
         createRoot(`
-        @value something from "/test/1.css";
+        @value a from "/test/1.css";
         `),
       ),
     ).toStrictEqual([]);

packages/happy-css-modules/src/locator/postcss.ts

@@ -215,6 +215,27 @@ export function parseAtImport(atImport: AtRule): string | undefined {
   return undefined;
 }
 
+type ParsedAtValue =
+  | { type: 'valueDeclaration'; tokenName: string; value: string }
+  | { type: 'valueImport'; importedSheetPath: string; tokenNames: string[] };
+
+export function parseAtValue(atValue: AtRule): ParsedAtValue | undefined {
+  // NOTE: `@value` property syntax is...
+  // Value Declaration's syntax: `@value <token-name>[:] <value>;`
+  // Value Import's syntax: `@value <import-specifier>[, <import-specifier>]* from <module-specifier>;`
+  // - variables:
+  //   - `<token-name>`: `<identifier>`
+  //   - `<value>`: `<any>`
+  //   - `<import-specifier>`: `<identifier>` or `<identifier> as <identifier>`
+  //   - `<module-specifier>`: `<string-literal>`
+  // - ref:
+  //   - https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
+  //   - https://github.com/css-modules/postcss-modules-values/blob/master/test/index.test.js
+  const nodes = valueParser(atValue.params).nodes;
+
+  // TODO
+}
+
 /**
  * Parse `composes` declaration with `from <url>`.
  * If the declaration is not found or do not have `from <url>`, return `undefined`.