feat: add --allowArbitraryExtensions option (compatible with the TS 5…

….0 feature of the same name)
skovy · Jan 1, 2025 · 59c3422 · 59c3422
1 parent c60f74e
commit 59c3422
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -352,6 +352,16 @@ Define a [single custom SASS importer or an array of SASS importers](https://git
 
 Refer to [`lib/sass/importer.ts`](/blob/master/lib/sass/importer.ts) for more details and the `node-sass` and `sass` importer type definitions.
 
+### `--allowArbitraryExtensions`
+
+- **Type**: `boolean`
+- **Default**: `false`
+- **Example**: `typed-scss-modules src --allowArbitraryExtensions`
+
+Output filenames that will be compatible with the "arbitrary file extensions" feature that was introduced in TypeScript 5.0. See [the docs](https://www.typescriptlang.org/tsconfig#allowArbitraryExtensions) for more info.
+
+In essence, the `*.scss.d.ts` extension now becomes `*.d.scss.ts` so that you can import CSS modules in projects using ESM module resolution.
+
 ## Examples
 
 For examples of how this tool can be used and configured, see the `examples` directory:

diff --git a/__tests__/core/generate.test.ts b/__tests__/core/generate.test.ts
@@ -27,6 +27,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(fs.writeFileSync).toHaveBeenCalledTimes(6);

diff --git a/__tests__/core/list-different.test.ts b/__tests__/core/list-different.test.ts
@@ -38,6 +38,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(exit).toHaveBeenCalledWith(1);
@@ -67,6 +68,7 @@ describeAllImplementations((implementation) => {
         logLevel: "verbose",
         nameFormat: ["kebab"],
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(console.log).toHaveBeenCalledTimes(1);
@@ -93,6 +95,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(exit).not.toHaveBeenCalled();
@@ -116,6 +119,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(exit).toHaveBeenCalledWith(1);
@@ -146,6 +150,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(exit).not.toHaveBeenCalled();

diff --git a/__tests__/core/list-files-and-perform-sanity-check.test.ts b/__tests__/core/list-files-and-perform-sanity-check.test.ts
@@ -15,6 +15,7 @@ const options: ConfigOptions = {
   updateStaleOnly: false,
   logLevel: "verbose",
   outputFolder: null,
+  allowArbitraryExtensions: false,
 };
 
 describe("listAllFilesAndPerformSanityCheck", () => {

diff --git a/__tests__/core/write-file.test.ts b/__tests__/core/write-file.test.ts
@@ -35,6 +35,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       const expectedPath = path.join(
@@ -51,6 +52,40 @@ describeAllImplementations((implementation) => {
       );
     });
 
+    it("writes the corresponding type definitions for a file and logs when allowArbitraryExtensions is set", async () => {
+      const testFile = path.resolve(__dirname, "..", "dummy-styles/style.scss");
+
+      await writeFile(testFile, {
+        banner: "",
+        watch: false,
+        ignoreInitial: false,
+        exportType: "named",
+        exportTypeName: "ClassNames",
+        exportTypeInterface: "Styles",
+        listDifferent: false,
+        ignore: [],
+        implementation,
+        quoteType: "single",
+        updateStaleOnly: false,
+        logLevel: "verbose",
+        outputFolder: null,
+        allowArbitraryExtensions: true,
+      });
+
+      const expectedPath = path.join(
+        process.cwd(),
+        "__tests__/dummy-styles/style.d.scss.ts"
+      );
+
+      expect(fs.writeFileSync).toHaveBeenCalledWith(
+        expectedPath,
+        "export declare const someClass: string;\n"
+      );
+      expect(console.log).toHaveBeenCalledWith(
+        expect.stringContaining(`[GENERATED TYPES] ${expectedPath}`)
+      );
+    });
+
     it("skips files with no classes", async () => {
       const testFile = path.resolve(__dirname, "..", "dummy-styles/empty.scss");
 
@@ -68,6 +103,7 @@ describeAllImplementations((implementation) => {
         updateStaleOnly: false,
         logLevel: "verbose",
         outputFolder: null,
+        allowArbitraryExtensions: false,
       });
 
       expect(fs.writeFileSync).not.toHaveBeenCalled();
@@ -111,6 +147,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: false,
           logLevel: "verbose",
           outputFolder: null,
+          allowArbitraryExtensions: false,
         });
 
         expect(fs.unlinkSync).toHaveBeenCalledWith(existingTypes);
@@ -142,6 +179,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: false,
           logLevel: "verbose",
           outputFolder: "__generated__",
+          allowArbitraryExtensions: false,
         });
 
         const expectedPath = path.join(
@@ -200,6 +238,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: true,
           logLevel: "verbose",
           outputFolder: null,
+          allowArbitraryExtensions: false,
         });
 
         expect(fs.writeFileSync).not.toHaveBeenCalled();
@@ -235,6 +274,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: true,
           logLevel: "verbose",
           outputFolder: null,
+          allowArbitraryExtensions: false,
         });
 
         expect(fs.writeFileSync).toHaveBeenCalled();
@@ -259,6 +299,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: true,
           logLevel: "verbose",
           outputFolder: null,
+          allowArbitraryExtensions: false,
         });
 
         expect(fs.writeFileSync).not.toHaveBeenCalled();
@@ -281,6 +322,7 @@ describeAllImplementations((implementation) => {
           updateStaleOnly: true,
           logLevel: "verbose",
           outputFolder: null,
+          allowArbitraryExtensions: false,
         });
 
         expect(fs.statSync).not.toHaveBeenCalledWith(testFile);

diff --git a/__tests__/load.test.ts b/__tests__/load.test.ts
@@ -51,6 +51,7 @@ describe("#mergeOptions", () => {
           logLevel: "silent",
           outputFolder: "__generated__",
           banner: "// override",
+          allowArbitraryExtensions: true,
         },
         {}
       )
@@ -69,6 +70,7 @@ describe("#mergeOptions", () => {
       logLevel: "silent",
       outputFolder: "__generated__",
       banner: "// override",
+      allowArbitraryExtensions: true,
     });
   });
 
@@ -94,6 +96,7 @@ describe("#mergeOptions", () => {
           banner: "// override",
           outputFolder: "__generated__",
           importer,
+          allowArbitraryExtensions: true,
         }
       )
     ).toEqual({
@@ -112,6 +115,7 @@ describe("#mergeOptions", () => {
       banner: "// override",
       outputFolder: "__generated__",
       importer,
+      allowArbitraryExtensions: true,
     });
   });
 
@@ -135,6 +139,7 @@ describe("#mergeOptions", () => {
           logLevel: "silent",
           banner: "// override",
           outputFolder: "__cli-generated__",
+          allowArbitraryExtensions: true,
         },
         {
           nameFormat: ["param"],
@@ -170,6 +175,7 @@ describe("#mergeOptions", () => {
       banner: "// override",
       outputFolder: "__cli-generated__",
       importer,
+      allowArbitraryExtensions: true,
     });
   });
 
@@ -195,6 +201,7 @@ describe("#mergeOptions", () => {
           logLevel: "silent",
           banner: undefined,
           outputFolder: "__cli-generated__",
+          allowArbitraryExtensions: true,
         },
         {
           aliases: {},
@@ -214,6 +221,7 @@ describe("#mergeOptions", () => {
           banner: "// banner",
           outputFolder: "__generated__",
           importer,
+          allowArbitraryExtensions: false,
         }
       )
     ).toEqual({
@@ -234,6 +242,7 @@ describe("#mergeOptions", () => {
       banner: "// banner",
       outputFolder: "__cli-generated__",
       importer,
+      allowArbitraryExtensions: true,
     });
   });
 });
diff --git a/lib/cli.ts b/lib/cli.ts
@@ -142,6 +142,11 @@ const { _: patterns, ...rest } = yargs
     describe:
       "Inserts text at the top of every output file for documentation purposes.",
   })
+  .options("allowArbitraryExtensions", {
+    boolean: true,
+    describe:
+      'Output filenames that will be compatible with the "arbitrary file extensions" feature that was introduced in TypeScript 5.0.',
+  })
   .parseSync();
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises

diff --git a/lib/core/types.ts b/lib/core/types.ts
@@ -16,6 +16,7 @@ export interface CLIOptions extends Exclude<SASSOptions, CLIOnlyOptions> {
   watch: boolean;
   logLevel: LogLevel;
   outputFolder: string | null;
+  allowArbitraryExtensions: boolean;
 }
 
 export interface ConfigOptions extends CLIOptions, SASSOptions {}
diff --git a/lib/load.ts b/lib/load.ts
@@ -79,6 +79,7 @@ export const DEFAULT_OPTIONS: CLIOptions = {
   logLevel: logLevelDefault,
   banner: bannerTypeDefault,
   outputFolder: null,
+  allowArbitraryExtensions: false,
 };
 
 const removedUndefinedValues = <Obj extends Record<string, unknown>>(

diff --git a/lib/typescript/get-type-definition-path.ts b/lib/typescript/get-type-definition-path.ts
@@ -13,16 +13,24 @@ export const getTypeDefinitionPath = (
   file: string,
   options: ConfigOptions
 ): string => {
+  let resolvedPath = file;
+
   if (options.outputFolder) {
     const relativePath = path.relative(CURRENT_WORKING_DIRECTORY, file);
-    const resolvedPath = path.resolve(
+    resolvedPath = path.resolve(
       CURRENT_WORKING_DIRECTORY,
       options.outputFolder,
       relativePath
     );
+  }
 
-    return `${resolvedPath}.d.ts`;
+  if (options.allowArbitraryExtensions) {
+    const resolvedDirname = path.dirname(resolvedPath);
+    // Note: `ext` includes a leading period (e.g. '.scss')
+    const { name, ext } = path.parse(resolvedPath);
+    // @see https://www.typescriptlang.org/tsconfig/#allowArbitraryExtensions
+    return path.join(resolvedDirname, `${name}.d${ext}.ts`);
   } else {
-    return `${file}.d.ts`;
+    return `${resolvedPath}.d.ts`;
   }
 };