happy-css-modules 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "happy-css-modules",
-  "version": "3.0.0",
+  "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/integration-test/go-to-definition.test.ts

@@ -41,10 +41,6 @@ test('basic', async () => {
       .local_class_name_3 {}
     }
     :local(.local_class_name_4) {}
-    .composes_target {}
-    .composes {
-      composes: composes_target;
-    }
     `,
   });
   await run({ ...defaultOptions });
@@ -65,8 +61,6 @@ test('basic', async () => {
     'local_class_name_2',
     'local_class_name_3',
     'local_class_name_4',
-    'composes_target',
-    'composes',
   ]);
   // FIXME: Fix an issue where the text at definition destination was incorrect.
   expect(results).toMatchInlineSnapshot(`
@@ -208,23 +202,6 @@ test('basic', async () => {
         ],
         "identifier": "local_class_name_4",
       },
-      {
-        "definitions": [
-          {
-      file: "<fixtures>/test/1.css",
-      text: ".composes_target ",
-      start: { line: 21, offset: 1 },
-      end: { line: 21, offset: 18 },
-    },
-        ],
-        "identifier": "composes_target",
-      },
-      {
-        "definitions": [
-          { file: "<fixtures>/test/1.css", text: ".composes ", start: { line: 22, offset: 1 }, end: { line: 22, offset: 11 } },
-        ],
-        "identifier": "composes",
-      },
     ]
   `);
   const moduleDefinitions = await server.getModuleDefinitions(getFixturePath('/test/1.css'));
@@ -295,8 +272,6 @@ test('with transformer', async () => {
       // sass feature test (nesting)
       .nesting_1 { dummy: ''; }
       &_2 { dummy: ''; }
-      composes: basic; // css module feature test (composes)
-      composes: d from './4.scss'; // css module feature test (composes from other file)
     }
     `,
     '/test/2.scss': dedent`
@@ -306,9 +281,6 @@ test('with transformer', async () => {
     '/test/3.scss': dedent`
     .c { dummy: ''; }
     `,
-    '/test/4.scss': dedent`
-    .d { dummy: ''; }
-    `,
   });
   await run({ ...defaultOptions });
   const results = await server.getMultipleIdentifierDefinitions(getFixturePath(`/test/1.scss`), [
@@ -319,7 +291,6 @@ test('with transformer', async () => {
     'b_1',
     'b_2',
     'c',
-    'd',
   ]);
   expect(results).toMatchInlineSnapshot(`
     [
@@ -364,12 +335,6 @@ test('with transformer', async () => {
         ],
         "identifier": "c",
       },
-      {
-        "definitions": [
-          { file: "<fixtures>/test/4.scss", text: ".d ", start: { line: 1, offset: 1 }, end: { line: 1, offset: 4 } },
-        ],
-        "identifier": "d",
-      },
     ]
   `);
 });