Merge pull request #120 from activeguild/fix/typescript-5-compatible-file-format

新しい定義ファイルフォーマットの取り込み

Author: activeguild

README.md

@@ -35,6 +35,7 @@ we have confirmed that it does not work with the [sass](https://www.npmjs.com/pa
 | esmExport             | boolean                                | Specify dts export type. If enabled, going to use ESM style export `export default ...`. Otherwise `export = ...`.                                                                                                                                                                                                                                                    |
 | prettierFilePath      | string                                 | Specify the path to the prettier configuration file.                                                                                                                                                                                                                                                                                                                  |
 | useNamedExport        | boolean                                | Output also in named export.(default: false)                                                                                                                                                                                                                                                                                                                          |
+| legacyFileFormat      | boolean                                | Use legacy file naming format. If `true`, generates `*.scss.d.ts` (legacy). If `false`, generates `*.d.scss.ts` (TypeScript 5 compatible). (default: `false`)                                                                                                                                                                                                         |
 
 ## Add it to vite.config.ts
 
@@ -129,7 +130,9 @@ Saving the scss file creates a d.ts file in the `outputDir` hierarchy.
 
 > Note: if `outputDir` is not set, declaration files are output to the same directory as the source files.
 
-[dist/App.scss.d.ts]
+> **TypeScript 5 Compatibility**: By default, declaration files are generated in the format `*.d.scss.ts` (e.g., `App.module.d.scss.ts`) which is compatible with TypeScript 5's module resolution. To use the legacy format `*.scss.d.ts`, set `legacyFileFormat: true` in the plugin options.
+
+[dist/App.module.d.scss.ts]
 
 ```ts
 import globalClassNames, { ClassNames as GlobalClassNames } from './style.d'

src/type.ts

@@ -18,6 +18,7 @@ export type PluginOptions = {
   excludePath?: string | RegExp | Array<string | RegExp>
   prettierFilePath?: string
   useNamedExport?: boolean
+  legacyFileFormat?: boolean
 }
 
 export type CSS = { localStyle: string; globalStyle?: string }

src/write.ts

@@ -103,11 +103,31 @@ export const formatWriteFilePath = (file: string, options?: PluginOptions) => {
     path = path.replace(src, dist)
   }
 
-  return formatWriteFileName(path)
+  return formatWriteFileName(path, options?.legacyFileFormat)
 }
 
-export const formatWriteFileName = (file: string) =>
-  `${file}${file.endsWith('d.ts') ? '' : '.d.ts'}`
+export const formatWriteFileName = (file: string, legacyFormat = false) => {
+  if (file.endsWith('d.ts')) {
+    return file
+  }
+
+  if (legacyFormat) {
+    // Legacy format: sample.module.scss.d.ts
+    return `${file}.d.ts`
+  }
+
+  // TypeScript 5 format: sample.module.d.scss.ts
+  // Extract the file extension (e.g., .scss, .sass, .css)
+  const extensionMatch = file.match(/\.(scss|sass|css)$/)
+  if (extensionMatch) {
+    const extension = extensionMatch[1]
+    const basePath = file.slice(0, -extension.length - 1) // Remove .scss/.sass/.css
+    return `${basePath}.d.${extension}.ts`
+  }
+
+  // Fallback for unknown extensions
+  return `${file}.d.ts`
+}
 
 export const formatExportTypeFileName = (file: string) =>
   basename(file.replace('.ts', ''))