happy-css-modules 3.0.0 → 3.1.0

package/src/locator/index.test.ts

@@ -1,29 +1,13 @@
-import fs, { readFile, writeFile } from 'fs/promises';
+import { readFile, writeFile } from 'fs/promises';
 import { randomUUID } from 'node:crypto';
 import { jest } from '@jest/globals';
 import dedent from 'dedent';
-import { createDefaultTransformer } from '../index.js';
-import { createFixtures, FIXTURE_DIR_PATH, getFixturePath } from '../test-util/util.js';
+import { Locator, createDefaultTransformer } from '../index.js';
+import { createFixtures, getFixturePath } from '../test-util/util.js';
 import { sleepSync } from '../util.js';
 
-const readFileSpy = jest.spyOn(fs, 'readFile');
-// In ESM, for some reason, we need to explicitly mock module
-jest.unstable_mockModule('fs/promises', () => ({
-  ...fs, // Inherit native functions (e.g., fs.stat)
-  readFile: readFileSpy,
-}));
-
-// After the mock of fs/promises is complete, . /index.js after the mock of fs/promises is complete.
-// ref: https://www.coolcomputerclub.com/posts/jest-hoist-await/
-const { Locator } = await import('./index.js');
-// NOTE: ../test/util.js depends on . /index.js, so it must also be imported dynamically...
-
 const locator = new Locator();
 
-afterEach(() => {
-  readFileSpy.mockClear();
-});
-
 test('basic', async () => {
   createFixtures({
     '/test/1.css': dedent`
@@ -38,15 +22,19 @@ test('basic', async () => {
       tokens: [
         {
           name: "a",
-          originalLocations: [
-            { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/1.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
         {
           name: "b",
-          originalLocations: [
-            { filePath: "<fixtures>/test/1.css", start: { line: 2, column: 1 }, end: { line: 2, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/1.css",
+            start: { line: 2, column: 1 },
+            end: { line: 2, column: 2 },
+          },
         },
       ],
     }
@@ -90,51 +78,86 @@ test('tracks other files when `@import` is present', async () => {
       tokens: [
         {
           name: "a",
-          originalLocations: [
-            { filePath: "<fixtures>/test/2.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/2.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
         {
           name: "b",
-          originalLocations: [
-            { filePath: "<fixtures>/test/3.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/3.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
         {
           name: "c",
-          originalLocations: [
-            { filePath: "<fixtures>/test/4.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/4.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
         {
           name: "d",
-          originalLocations: [
-            { filePath: "<fixtures>/test/5-recursive.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/5-recursive.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
       ],
     }
   `);
 });
 
-test('tracks other files when `composes` is present', async () => {
+test('does not track other files by `composes`', async () => {
   createFixtures({
     '/test/1.css': dedent`
     .a {
       composes: b from './2.css';
-      composes: c d from './3.css';
-      composes: e from '${getFixturePath('/test/4.css')}';
+      composes: c from './3.css'; /* non-existent file */
     }
     `,
     '/test/2.css': dedent`
     .b {}
     `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+  expect(result).toMatchInlineSnapshot(`
+    {
+      dependencies: [],
+      tokens: [
+        {
+          name: "a",
+          originalLocation: {
+            filePath: "<fixtures>/test/1.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
+        },
+      ],
+    }
+  `);
+});
+
+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`
-    .c {}
-    .d {}
+    @value b: 2;
     `,
     '/test/4.css': dedent`
-    .e {}
+    @value c: 3;
     `,
   });
   const result = await locator.load(getFixturePath('/test/1.css'));
@@ -144,103 +167,94 @@ test('tracks other files when `composes` is present', async () => {
       tokens: [
         {
           name: "a",
-          originalLocations: [
-            { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/2.css",
+            start: { line: 1, column: 8 },
+            end: { line: 1, column: 9 },
+          },
         },
         {
           name: "b",
-          originalLocations: [
-            { filePath: "<fixtures>/test/2.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/3.css",
+            start: { line: 1, column: 8 },
+            end: { line: 1, column: 9 },
+          },
         },
         {
           name: "c",
-          originalLocations: [
-            { filePath: "<fixtures>/test/3.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
-        },
-        {
-          name: "d",
-          originalLocations: [
-            { filePath: "<fixtures>/test/3.css", start: { line: 2, column: 1 }, end: { line: 2, column: 2 } },
-          ],
-        },
-        {
-          name: "e",
-          originalLocations: [
-            { filePath: "<fixtures>/test/4.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/4.css",
+            start: { line: 1, column: 8 },
+            end: { line: 1, column: 9 },
+          },
         },
       ],
     }
   `);
 });
 
-test('normalizes tokens', async () => {
+test('unique tokens', async () => {
   createFixtures({
     '/test/1.css': dedent`
     /* duplicate import */
     @import './2.css';
     @import '2.css';
-    .a {
-      /* duplicate composes */
-      composes: c from './3.css';
-      composes: c from '3.css';
-      composes: c c from './3.css';
-      /* duplicate import and composes */
-      composes: b from './2.css';
-    }
+    .a {}
     .a {} /* duplicate class selector */
     `,
     '/test/2.css': dedent`
     .a {} /* class selector that duplicates the import source */
     .b {}
     `,
-    '/test/3.css': dedent`
-    .c {}
-    `,
   });
   const result = await locator.load(getFixturePath('/test/1.css'));
   expect(result).toMatchInlineSnapshot(`
     {
-      dependencies: ["<fixtures>/test/2.css", "<fixtures>/test/3.css"],
+      dependencies: ["<fixtures>/test/2.css"],
       tokens: [
         {
           name: "a",
-          originalLocations: [
-            { filePath: "<fixtures>/test/2.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-            { filePath: "<fixtures>/test/1.css", start: { line: 4, column: 1 }, end: { line: 4, column: 2 } },
-            { filePath: "<fixtures>/test/1.css", start: { line: 12, column: 1 }, end: { line: 12, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/2.css",
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 2 },
+          },
         },
         {
           name: "b",
-          originalLocations: [
-            { filePath: "<fixtures>/test/2.css", start: { line: 2, column: 1 }, end: { line: 2, column: 2 } },
-          ],
+          originalLocation: {
+            filePath: "<fixtures>/test/2.css",
+            start: { line: 2, column: 1 },
+            end: { line: 2, column: 2 },
+          },
         },
         {
-          name: "c",
-          originalLocations: [
-            { filePath: "<fixtures>/test/3.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
+          name: "a",
+          originalLocation: {
+            filePath: "<fixtures>/test/1.css",
+            start: { line: 4, column: 1 },
+            end: { line: 4, column: 2 },
+          },
+        },
+        {
+          name: "a",
+          originalLocation: {
+            filePath: "<fixtures>/test/1.css",
+            start: { line: 5, column: 1 },
+            end: { line: 5, column: 2 },
+          },
         },
       ],
     }
   `);
 });
 
-test.failing('returns the result from the cache when the file has not been modified', async () => {
+test('returns the result from the cache when the file has not been modified', async () => {
   createFixtures({
     '/test/1.css': dedent`
     @import './2.css';
-    @import './2.css';
-    .a {
-      composes: b from './2.css';
-      composes: c from './3.css';
-      composes: d from './3.css';
-    }
+    @import './3.css';
     `,
     '/test/2.css': dedent`
     .b {}
@@ -250,12 +264,14 @@ test.failing('returns the result from the cache when the file has not been modif
     .d {}
     `,
   });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const readCSSSpy = jest.spyOn(locator, 'readCSS' as any);
   await locator.load(getFixturePath('/test/1.css'));
-  expect(readFileSpy).toHaveBeenCalledTimes(3);
-  expect(readFileSpy).toHaveBeenNthCalledWith(1, '/test/1.css', 'utf-8');
-  expect(readFileSpy).toHaveBeenNthCalledWith(2, '/test/2.css', 'utf-8');
-  expect(readFileSpy).toHaveBeenNthCalledWith(3, '/test/3.css', 'utf-8');
-  readFileSpy.mockClear();
+  expect(readCSSSpy).toHaveBeenCalledTimes(3);
+  expect(readCSSSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.css'));
+  expect(readCSSSpy).toHaveBeenNthCalledWith(2, getFixturePath('/test/2.css'));
+  expect(readCSSSpy).toHaveBeenNthCalledWith(3, getFixturePath('/test/3.css'));
+  readCSSSpy.mockClear();
 
   // update `/test/2.css`
   sleepSync(1); // wait for the file system to update the mtime
@@ -263,54 +279,17 @@ test.failing('returns the result from the cache when the file has not been modif
 
   // `3.css` is not updated, so the cache is used. Therefore, `readFile` is not called.
   await locator.load(getFixturePath('/test/3.css'));
-  expect(readFileSpy).toHaveBeenCalledTimes(0);
+  expect(readCSSSpy).toHaveBeenCalledTimes(0);
 
   // `1.css` is not updated, but dependencies are updated, so the cache is used. Therefore, `readFile` is called.
   await locator.load(getFixturePath('/test/1.css'));
-  expect(readFileSpy).toHaveBeenCalledTimes(2);
-  expect(readFileSpy).toHaveBeenNthCalledWith(1, '/test/1.css', 'utf-8');
-  expect(readFileSpy).toHaveBeenNthCalledWith(2, '/test/2.css', 'utf-8');
+  expect(readCSSSpy).toHaveBeenCalledTimes(2);
+  expect(readCSSSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.css'));
+  expect(readCSSSpy).toHaveBeenNthCalledWith(2, getFixturePath('/test/2.css'));
 
   // ``2.css` is updated, but the cache is already available because it was updated in the previous step. Therefore, `readFile` is not called.
   await locator.load(getFixturePath('/test/2.css'));
-  expect(readFileSpy).toHaveBeenCalledTimes(2);
-});
-
-test('ignores the composition of non-existent tokens', async () => {
-  // In css-loader and postcss-modules, compositions of non-existent tokens are simply ignored.
-  // Therefore, happy-css-modules follows suit.
-  // It may be preferable to warn rather than ignore, but for now, we will focus on compatibility.
-  // ref: https://github.com/css-modules/css-modules/issues/356
-  createFixtures({
-    '/test/1.css': dedent`
-    .a {
-      composes: b c from './2.css';
-    }
-    `,
-    '/test/2.css': dedent`
-    .b {}
-    `,
-  });
-  const result = await locator.load(getFixturePath('/test/1.css'));
-  expect(result.tokens.map((t) => t.name)).toStrictEqual(['a', 'b']);
-});
-
-test('throws error the composition of non-existent file', async () => {
-  // In postcss-modules, compositions of non-existent file are causes an error.
-  // Therefore, happy-css-modules follows suit.
-  createFixtures({
-    '/test/1.css': dedent`
-    .a {
-      composes: a from './2.css';
-    }
-    `,
-  });
-  await expect(async () => {
-    await locator.load(getFixturePath('/test/1.css')).catch((e) => {
-      e.message = e.message.replace(FIXTURE_DIR_PATH, '<fixtures>');
-      throw e;
-    });
-  }).rejects.toThrowError(`Could not resolve './2.css' in '<fixtures>/test/1.css'`);
+  expect(readCSSSpy).toHaveBeenCalledTimes(2);
 });
 
 describe('supports sourcemap', () => {
@@ -334,16 +313,27 @@ describe('supports sourcemap', () => {
         tokens: [
           {
             name: "nesting",
-            originalLocations: [
-              { filePath: "<fixtures>/test/1.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 8 } },
-              { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 3 }, end: { line: 3, column: 10 } },
-            ],
+            originalLocation: {
+              filePath: "<fixtures>/test/1.scss",
+              start: { line: 1, column: 1 },
+              end: { line: 1, column: 8 },
+            },
+          },
+          {
+            name: "nesting",
+            originalLocation: {
+              filePath: "<fixtures>/test/1.scss",
+              start: { line: 3, column: 3 },
+              end: { line: 3, column: 10 },
+            },
           },
           {
             name: "nesting_child",
-            originalLocations: [
-              { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 3 }, end: { line: 3, column: 16 } },
-            ],
+            originalLocation: {
+              filePath: "<fixtures>/test/1.scss",
+              start: { line: 3, column: 3 },
+              end: { line: 3, column: 16 },
+            },
           },
         ],
       }
@@ -373,18 +363,22 @@ describe('supports sourcemap', () => {
         tokens: [
           {
             name: "selector_list_a_1",
-            originalLocations: [
-              { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 18 } },
-            ],
+            originalLocation: {
+              filePath: "<fixtures>/test/1.css",
+              start: { line: 1, column: 1 },
+              end: { line: 1, column: 18 },
+            },
           },
           {
             name: "selector_list_a_2",
-            originalLocations: [
-              { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 18 } },
-            ],
+            originalLocation: {
+              filePath: "<fixtures>/test/1.css",
+              start: { line: 1, column: 1 },
+              end: { line: 1, column: 18 },
+            },
           },
-          { name: "selector_list_b_1", originalLocations: [{}] },
-          { name: "selector_list_b_2", originalLocations: [{}] },
+          { name: "selector_list_b_1", originalLocation: {} },
+          { name: "selector_list_b_2", originalLocation: {} },
         ],
       }
     `);

package/src/locator/index.ts

@@ -5,12 +5,13 @@ import { createDefaultResolver } from '../resolver/index.js';
 import { createDefaultTransformer, type Transformer } from '../transformer/index.js';
 import { unique, uniqueBy } from '../util.js';
 import {
-  getOriginalLocation,
+  getOriginalLocationOfClassSelector,
+  getOriginalLocationOfAtValue,
   generateLocalTokenNames,
   parseAtImport,
   type Location,
-  parseComposesDeclarationWithFromUrl,
   collectNodes,
+  parseAtValue,
 } from './postcss.js';
 
 export { collectNodes, type Location } from './postcss.js';
@@ -27,8 +28,10 @@ function isIgnoredSpecifier(specifier: string): boolean {
 export type Token = {
   /** The token name. */
   name: string;
-  /** The original locations of the token in the source file. */
-  originalLocations: Location[];
+  /** The name of the imported token. */
+  importedName?: string;
+  /** The original location of the token in the source file. */
+  originalLocation: Location;
 };
 
 type CacheEntry = {
@@ -38,28 +41,12 @@ type CacheEntry = {
 
 /** The result of `Locator#load`. */
 export type LoadResult = {
-  /** The path of the file imported from the source file with `@import` or `composes`. */
+  /** The path of the file imported from the source file with `@import`. */
   dependencies: string[];
   /** The tokens exported by the source file. */
   tokens: Token[];
 };
 
-function normalizeTokens(tokens: Token[]): Token[] {
-  const tokenNameToOriginalLocations = new Map<string, Location[]>();
-  for (const token of tokens) {
-    tokenNameToOriginalLocations.set(
-      token.name,
-      uniqueBy([...(tokenNameToOriginalLocations.get(token.name) ?? []), ...token.originalLocations], (location) =>
-        JSON.stringify(location),
-      ),
-    );
-  }
-  return Array.from(tokenNameToOriginalLocations.entries()).map(([name, originalLocations]) => ({
-    name,
-    originalLocations,
-  }));
-}
-
 export type LocatorOptions = {
   /** The function to transform source code. */
   transformer?: Transformer | undefined;
@@ -165,7 +152,7 @@ export class Locator {
 
     const tokens: Token[] = [];
 
-    const { atImports, classSelectors, composesDeclarations } = collectNodes(ast);
+    const { atImports, atValues, classSelectors } = collectNodes(ast);
 
     // Load imported sheets recursively.
     for (const atImport of atImports) {
@@ -187,31 +174,51 @@ export class Locator {
       // NOTE: This method has false positives. However, it works as expected in many cases.
       if (!localTokenNames.includes(classSelector.value)) continue;
 
-      const originalLocation = getOriginalLocation(rule, classSelector);
+      const originalLocation = getOriginalLocationOfClassSelector(rule, classSelector);
 
       tokens.push({
         name: classSelector.value,
-        originalLocations: [originalLocation],
+        originalLocation,
       });
     }
 
-    // Load imported tokens by the names recursively.
-    for (const composesDeclaration of composesDeclarations) {
-      const declarationDetail = parseComposesDeclarationWithFromUrl(composesDeclaration);
-      if (!declarationDetail) continue;
-      if (isIgnoredSpecifier(declarationDetail.from)) continue;
-      // eslint-disable-next-line no-await-in-loop
-      const from = await this.resolver(declarationDetail.from, { request: filePath });
-      // eslint-disable-next-line no-await-in-loop
-      const result = await this._load(from);
-      const externalTokens = result.tokens.filter((token) => declarationDetail.tokenNames.includes(token.name));
-      dependencies.push(from, ...result.dependencies);
-      tokens.push(...externalTokens);
+    for (const atValue of atValues) {
+      const parsedAtValue = parseAtValue(atValue);
+
+      if (parsedAtValue.type === 'valueDeclaration') {
+        tokens.push({
+          name: parsedAtValue.tokenName,
+          originalLocation: getOriginalLocationOfAtValue(atValue, parsedAtValue),
+        });
+      } else if (parsedAtValue.type === 'valueImportDeclaration') {
+        if (isIgnoredSpecifier(parsedAtValue.from)) continue;
+        // eslint-disable-next-line no-await-in-loop
+        const from = await this.resolver(parsedAtValue.from, { request: filePath });
+        // eslint-disable-next-line no-await-in-loop
+        const result = await this._load(from);
+        dependencies.push(from, ...result.dependencies);
+        for (const token of result.tokens) {
+          const matchedImport = parsedAtValue.imports.find((i) => i.importedTokenName === token.name);
+          if (!matchedImport) continue;
+          if (matchedImport.localTokenName === matchedImport.importedTokenName) {
+            tokens.push({
+              name: matchedImport.localTokenName,
+              originalLocation: token.originalLocation,
+            });
+          } else {
+            tokens.push({
+              name: matchedImport.localTokenName,
+              importedName: matchedImport.importedTokenName,
+              originalLocation: token.originalLocation,
+            });
+          }
+        }
+      }
     }
 
     const result: LoadResult = {
       dependencies: unique(dependencies).filter((dep) => dep !== filePath),
-      tokens: normalizeTokens(tokens),
+      tokens: uniqueBy(tokens, (token) => JSON.stringify(token)),
     };
     this.cache.set(filePath, { mtime, result });
     return result;