happy-css-modules 3.0.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "happy-css-modules",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Creates .d.ts files from CSS Modules .css files",
   "type": "module",
   "main": "dist/index.js",

package/src/emitter/dts.test.ts

@@ -211,9 +211,9 @@ describe('generateDtsContentWithSourceMap', () => {
   });
   test('emit other directory', async () => {
     createFixtures({
-      '/test/1.css': `.a {}`,
+      '/test/src/1.css': `.a {}`,
     });
-    const result = await locator.load(filePath);
+    const result = await locator.load(getFixturePath('/test/src/1.css'));
     const { dtsContent, sourceMap } = generateDtsContentWithSourceMap(
       getFixturePath('/test/src/1.css'),
       getFixturePath('/test/dist/1.css.d.ts'),
@@ -224,7 +224,7 @@ describe('generateDtsContentWithSourceMap', () => {
     );
     expect(dtsContent).toMatchInlineSnapshot(`
       "declare const styles:
-        & Readonly<Pick<(typeof import("../1.css"))["default"], "a">>
+        & Readonly<{ "a": string }>
       ;
       export default styles;
       "

package/src/emitter/dts.ts

@@ -28,18 +28,26 @@ function dashesCamelCase(str: string): string {
 }
 
 function formatTokens(tokens: Token[], localsConvention: LocalsConvention): Token[] {
+  function formatToken(token: Token, formatter: (str: string) => string): Token {
+    if ('importedName' in token && typeof token.importedName === 'string') {
+      return { ...token, name: formatter(token.name), importedName: formatter(token.importedName) };
+    } else {
+      return { ...token, name: formatter(token.name) };
+    }
+  }
+
   const result: Token[] = [];
   for (const token of tokens) {
     if (localsConvention === 'camelCaseOnly') {
-      result.push({ ...token, name: camelcase(token.name) });
+      result.push(formatToken(token, camelcase));
     } else if (localsConvention === 'camelCase') {
       result.push(token);
-      result.push({ ...token, name: camelcase(token.name) });
+      result.push(formatToken(token, camelcase));
     } else if (localsConvention === 'dashesOnly') {
-      result.push({ ...token, name: dashesCamelCase(token.name) });
+      result.push(formatToken(token, dashesCamelCase));
     } else if (localsConvention === 'dashes') {
       result.push(token);
-      result.push({ ...token, name: dashesCamelCase(token.name) });
+      result.push(formatToken(token, dashesCamelCase));
     } else {
       result.push(token); // asIs
     }
@@ -62,41 +70,55 @@ function generateTokenDeclarations(
     // This is due to the sourcemap specification. Therefore, we output multiple type definitions
     // with the same name and assign a separate original position to each.
 
-    for (let originalLocation of token.originalLocations) {
-      if (originalLocation.filePath === undefined) {
-        // If the original location is not specified, fallback to the source file.
-        originalLocation = {
-          filePath,
-          start: { line: 1, column: 1 },
-          end: { line: 1, column: 1 },
-        };
-      }
+    let originalLocation = token.originalLocation;
+    if (originalLocation.filePath === undefined) {
+      // If the original location is not specified, fallback to the source file.
+      originalLocation = {
+        filePath,
+        start: { line: 1, column: 1 },
+        end: { line: 1, column: 1 },
+      };
+    }
 
-      result.push(
-        originalLocation.filePath === filePath || isExternalFile(originalLocation.filePath)
-          ? new SourceNode(null, null, null, [
-              '& Readonly<{ ',
-              new SourceNode(
-                originalLocation.start.line ?? null,
-                // The SourceNode's column is 0-based, but the originalLocation's column is 1-based.
-                originalLocation.start.column - 1 ?? null,
-                getRelativePath(sourceMapFilePath, originalLocation.filePath),
-                `"${token.name}"`,
-                token.name,
-              ),
-              ': string }>',
-            ])
-          : // Imported tokens in non-external files are typed by dynamic import.
-            // See https://github.com/mizdra/happy-css-modules/issues/106.
-            new SourceNode(null, null, null, [
-              '& Readonly<Pick<(typeof import(',
-              `"${getRelativePath(filePath, originalLocation.filePath)}"`,
-              '))["default"], ',
+    result.push(
+      originalLocation.filePath === filePath || isExternalFile(originalLocation.filePath)
+        ? new SourceNode(null, null, null, [
+            '& Readonly<{ ',
+            new SourceNode(
+              originalLocation.start.line ?? null,
+              // The SourceNode's column is 0-based, but the originalLocation's column is 1-based.
+              originalLocation.start.column - 1 ?? null,
+              getRelativePath(sourceMapFilePath, originalLocation.filePath),
               `"${token.name}"`,
-              '>>',
-            ]),
-      );
-    }
+              token.name,
+            ),
+            ': string }>',
+          ])
+        : typeof token.importedName === 'string'
+        ? new SourceNode(null, null, null, [
+            `& Readonly<{ `,
+            new SourceNode(
+              originalLocation.start.line ?? null,
+              // The SourceNode's column is 0-based, but the originalLocation's column is 1-based.
+              originalLocation.start.column - 1 ?? null,
+              getRelativePath(sourceMapFilePath, originalLocation.filePath),
+              `"${token.name}"`,
+              token.name,
+            ),
+            `: (typeof import(`,
+            `"${getRelativePath(filePath, originalLocation.filePath)}"`,
+            `))["default"]["${token.importedName}"] }>`,
+          ])
+        : // Imported tokens in non-external files are typed by dynamic import.
+          // See https://github.com/mizdra/happy-css-modules/issues/106.
+          new SourceNode(null, null, null, [
+            '& Readonly<Pick<(typeof import(',
+            `"${getRelativePath(filePath, originalLocation.filePath)}"`,
+            '))["default"], ',
+            `"${token.name}"`,
+            '>>',
+          ]),
+    );
   }
   return result;
 }

package/src/emitter/index.test.ts

@@ -25,7 +25,7 @@ test('isSubDirectoryFile', () => {
 describe('emitGeneratedFiles', () => {
   const defaultArgs = {
     filePath: getFixturePath('/test/1.css'),
-    tokens: [fakeToken({ name: 'foo', originalLocations: [{ start: { line: 1, column: 1 } }] })],
+    tokens: [fakeToken({ name: 'foo', originalLocation: { start: { line: 1, column: 1 } } })],
     emitDeclarationMap: true,
     dtsFormatOptions: undefined,
     cwd: getFixturePath('/test'),
@@ -55,7 +55,7 @@ describe('emitGeneratedFiles', () => {
     expect(await exists(getFixturePath('/test/1.css.d.ts.map'))).toBeFalsy();
   });
   test('skips writing to disk if the generated files are the same', async () => {
-    const tokens1 = [fakeToken({ name: 'foo', originalLocations: [{ start: { line: 1, column: 1 } }] })];
+    const tokens1 = [fakeToken({ name: 'foo', originalLocation: { start: { line: 1, column: 1 } } })];
     await emitGeneratedFiles({ ...defaultArgs, tokens: tokens1 });
     const mtimeForDts1 = (await stat(getFixturePath('/test/1.css.d.ts'))).mtime;
     const mtimeForSourceMap1 = (await stat(getFixturePath('/test/1.css.d.ts.map'))).mtime;
@@ -68,7 +68,7 @@ describe('emitGeneratedFiles', () => {
     expect(mtimeForSourceMap1).toEqual(mtimeForSourceMap2); // skipped
 
     await waitForAsyncTask(1); // so that mtime changes.
-    const tokens2 = [fakeToken({ name: 'bar', originalLocations: [{ start: { line: 1, column: 1 } }] })];
+    const tokens2 = [fakeToken({ name: 'bar', originalLocation: { start: { line: 1, column: 1 } } })];
     await emitGeneratedFiles({ ...defaultArgs, tokens: tokens2 });
     const mtimeForDts3 = (await stat(getFixturePath('/test/1.css.d.ts'))).mtime;
     const mtimeForSourceMap3 = (await stat(getFixturePath('/test/1.css.d.ts.map'))).mtime;

package/src/locator/index.test.ts

@@ -22,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 },
+          },
         },
       ],
     }
@@ -74,27 +78,35 @@ 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 },
+          },
         },
       ],
     }
@@ -120,16 +132,69 @@ test('does not track other files by `composes`', 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 },
+          },
+        },
+      ],
+    }
+  `);
+});
+
+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: ["<fixtures>/test/2.css", "<fixtures>/test/3.css", "<fixtures>/test/4.css"],
+      tokens: [
+        {
+          name: "a",
+          originalLocation: {
+            filePath: "<fixtures>/test/2.css",
+            start: { line: 1, column: 8 },
+            end: { line: 1, column: 9 },
+          },
+        },
+        {
+          name: "b",
+          originalLocation: {
+            filePath: "<fixtures>/test/3.css",
+            start: { line: 1, column: 8 },
+            end: { line: 1, column: 9 },
+          },
+        },
+        {
+          name: "c",
+          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 */
@@ -142,9 +207,6 @@ test('normalizes tokens', async () => {
     .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(`
@@ -153,17 +215,35 @@ test('normalizes tokens', async () => {
       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: 5, column: 1 }, end: { line: 5, 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: "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 },
+          },
         },
       ],
     }
@@ -233,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 },
+            },
           },
         ],
       }
@@ -272,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

@@ -4,7 +4,15 @@ import type { Resolver } from '../resolver/index.js';
 import { createDefaultResolver } from '../resolver/index.js';
 import { createDefaultTransformer, type Transformer } from '../transformer/index.js';
 import { unique, uniqueBy } from '../util.js';
-import { getOriginalLocation, generateLocalTokenNames, parseAtImport, type Location, collectNodes } from './postcss.js';
+import {
+  getOriginalLocationOfClassSelector,
+  getOriginalLocationOfAtValue,
+  generateLocalTokenNames,
+  parseAtImport,
+  type Location,
+  collectNodes,
+  parseAtValue,
+} from './postcss.js';
 
 export { collectNodes, type Location } from './postcss.js';
 
@@ -20,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 = {
@@ -37,22 +47,6 @@ export type LoadResult = {
   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;
@@ -158,7 +152,7 @@ export class Locator {
 
     const tokens: Token[] = [];
 
-    const { atImports, classSelectors } = collectNodes(ast);
+    const { atImports, atValues, classSelectors } = collectNodes(ast);
 
     // Load imported sheets recursively.
     for (const atImport of atImports) {
@@ -180,17 +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,
       });
     }
 
+    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;