support prioritizeNamedImports option

Author: mizdra

README.md

@@ -165,6 +165,26 @@ Determines whether to generate named exports in the d.ts file instead of a defau
 }
 ```
 
+### `cmkOptions.prioritizeNamedImports`
+
+Type: `boolean`, Default: `false`
+
+Whether to prioritize named imports over namespace imports when adding import statements. This option effects only `cmkOptions.namedExports` is `true`.
+
+When this option is `true`, `import { button } from '...'` will be added. When this option is `false`, `import button from '...'` will be added.
+
+```jsonc
+{
+  "compilerOptions": {
+    // ...
+  },
+  "cmkOptions": {
+    "namedExports": true,
+    "prioritizeNamedImports": true,
+  },
+}
+```
+
 ## Limitations
 
 - Sass/Less are not supported to simplify the implementation
@@ -180,3 +200,7 @@ Determines whether to generate named exports in the d.ts file instead of a defau
 This project was created as a next-generation tool to replace [happy-css-modules](https://github.com/mizdra/happy-css-modules)
 
 happy-css-modules was also a tool that provided language functionality for `*.module.css`. However, the tool was limited in the type of language features it could provide. To solve this limitation, css-modules-kit was created.
+
+```
+
+```

packages/core/src/config.test.ts

@@ -23,6 +23,7 @@ describe('normalizeConfig', () => {
     dtsOutDir: undefined,
     arbitraryExtensions: undefined,
     namedExports: undefined,
+    prioritizeNamedImports: undefined,
   };
   test('resolves options', () => {
     expect(
@@ -46,6 +47,7 @@ describe('normalizeConfig', () => {
           "/app/src",
         ],
         "namedExports": false,
+        "prioritizeNamedImports": false,
       }
     `);
   });
@@ -64,7 +66,8 @@ describe('readTsConfigFile', () => {
           "cmkOptions": {
             "dtsOutDir": "generated/cmk",
             "arbitraryExtensions": false,
-            "namedExports": true
+            "namedExports": true,
+            "prioritizeNamedImports": true
           }
         }
       `,
@@ -77,6 +80,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: false,
         namedExports: true,
+        prioritizeNamedImports: true,
       },
       compilerOptions: expect.objectContaining({
         module: ts.ModuleKind.ESNext,
@@ -106,6 +110,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: true,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       },
       compilerOptions: expect.any(Object),
       diagnostics: [],
@@ -137,6 +142,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: undefined,
         arbitraryExtensions: undefined,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       },
       compilerOptions: expect.objectContaining({
         module: undefined,
@@ -178,6 +184,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: true,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
     test('does not merge arrays and objects, but overwrites them', async () => {
@@ -202,6 +209,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: undefined,
         arbitraryExtensions: undefined,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
     test('inherits from a file recursively', async () => {
@@ -229,6 +237,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: true,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
     test('inherits from a package', async () => {
@@ -250,6 +259,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: undefined,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
     test('inherits from multiple files', async () => {
@@ -276,6 +286,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: true,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
     test('ignores un-existing files', async () => {
@@ -299,6 +310,7 @@ describe('readTsConfigFile', () => {
         dtsOutDir: 'generated/cmk',
         arbitraryExtensions: true,
         namedExports: undefined,
+        prioritizeNamedImports: undefined,
       });
     });
   });

packages/core/src/config.ts

@@ -19,8 +19,8 @@ export interface CMKConfig {
   excludes: string[];
   dtsOutDir: string;
   arbitraryExtensions: boolean;
-  /** Whether to generate named exports in the d.ts file instead of a default export. */
   namedExports: boolean;
+  prioritizeNamedImports: boolean;
   /**
    * A root directory to resolve relative path entries in the config file to.
    * This is an absolute path.
@@ -75,6 +75,7 @@ interface UnnormalizedRawConfig {
   dtsOutDir: string | undefined;
   arbitraryExtensions: boolean | undefined;
   namedExports: boolean | undefined;
+  prioritizeNamedImports: boolean | undefined;
 }
 
 /**
@@ -102,6 +103,7 @@ function parseRawData(raw: unknown, tsConfigSourceFile: ts.TsConfigSourceFile):
       dtsOutDir: undefined,
       arbitraryExtensions: undefined,
       namedExports: undefined,
+      prioritizeNamedImports: undefined,
     },
     diagnostics: [],
   };
@@ -158,6 +160,17 @@ function parseRawData(raw: unknown, tsConfigSourceFile: ts.TsConfigSourceFile):
         });
       }
     }
+    if ('prioritizeNamedImports' in raw.cmkOptions) {
+      if (typeof raw.cmkOptions.prioritizeNamedImports === 'boolean') {
+        result.config.prioritizeNamedImports = raw.cmkOptions.prioritizeNamedImports;
+      } else {
+        result.diagnostics.push({
+          category: 'error',
+          text: `\`prioritizeNamedImports\` in ${tsConfigSourceFile.fileName} must be a boolean.`,
+          // MEMO: Location information can be obtained from `tsConfigSourceFile.statements`, but this is complicated and will be omitted.
+        });
+      }
+    }
   }
   return result;
 }
@@ -249,6 +262,7 @@ export function normalizeConfig(
     dtsOutDir: join(basePath, config.dtsOutDir ?? 'generated'),
     arbitraryExtensions: config.arbitraryExtensions ?? false,
     namedExports: config.namedExports ?? false,
+    prioritizeNamedImports: config.prioritizeNamedImports ?? false,
   };
 }
 

packages/ts-plugin/src/language-plugin.ts

@@ -59,7 +59,7 @@ export function createCSSLanguagePlugin(
         matchesPattern,
         namedExports: config.namedExports,
       });
-      if (config.namedExports) {
+      if (config.namedExports && !config.prioritizeNamedImports) {
         // Export `styles` to appear in code completion suggestions
         text += 'declare const styles: {};\nexport default styles;\n';
       }

packages/ts-plugin/src/language-service/feature/code-fix.ts

@@ -21,7 +21,7 @@ export function getCodeFixesAtPosition(
       languageService.getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences) ?? [],
     );
 
-    if (config.namedExports) {
+    if (config.namedExports && !config.prioritizeNamedImports) {
       convertDefaultImportsToNamespaceImports(prior, fileName, resolver);
     }
 

packages/ts-plugin/src/language-service/feature/completion.ts

@@ -24,7 +24,7 @@ export function getCompletionsAtPosition(
         }
       }
     }
-    if (config.namedExports) {
+    if (config.namedExports && !config.prioritizeNamedImports) {
       // When `namedExports` is enabled, you can write code as follows:
       // ```tsx
       // import { button } from './a.module.css';
@@ -100,7 +100,7 @@ export function getCompletionEntryDetails(
     );
     if (!details) return undefined;
 
-    if (config.namedExports && details.codeActions) {
+    if (config.namedExports && !config.prioritizeNamedImports && details.codeActions) {
       convertDefaultImportsToNamespaceImports(details.codeActions, fileName, resolver);
     }
     return details;