Remove Cannot import module 'xxx' error

[mizdra]

Background

Currently, css-modules-kit reports an error Cannot import module 'xxx' when code tries to import a non-existent CSS Module file. This helps users catch mistakes early.

However, in certain cases, this error is not reported. Specifically, when importing a non-existent CSS Module file using an import alias.

src/a.module.css:

@import '@/src/non-existent.module.css';
@import './non-existent.module.css';

tsconfig.json:

{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  },
  "cmkOptions": {
    "enabled": true
  }
}

This happens because import specifiers are resolved differently for @/src/non-existent.module.css and ./non-existent.module.css. The former uses ts.resolveModuleName, while the latter uses resolve(fileURLToPath(new URL(specifier, pathToFileURL(options.request)).href)). The latter can resolve the specifier even if the file does not exist, while the former cannot resolve non-existent files.

Moreover, css-modules-kit does not report the error for specifiers that cannot be resolved. Ideally, it should report an error in such cases. However, users often write code like @import 'https://example.com/remote.css'; to import CSS files that are resolved at runtime. To avoid reporting errors for these cases, css-modules-kit is designed not to report errors for specifiers that cannot be resolved.

This behavior of not reporting errors for unresolved specifiers also applies when using import aliases. As a result, import specifiers like @/src/non-existent.module.css do not trigger errors even when they cannot be resolved.

Solution

The Cannot import module 'xxx' error is useful for users, but it conflicts with the behavior of not reporting errors for unresolved specifiers. Additionally, this error is typically detected by the bundler. Even if css-modules-kit does not report it, users will likely notice the mistakes. Therefore, we will remove the Cannot import module 'xxx' error entirely.

With this change, it will also be possible to unify the import specifier resolution method to ts.resolveModuleName in the future.

[changeset-bot]

🦋 Changeset detected

Latest commit: 83b2c03

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@css-modules-kit/core	Minor
@css-modules-kit/codegen	Patch
@css-modules-kit/ts-plugin	Patch
@css-modules-kit/stylelint-plugin	Patch
@css-modules-kit/eslint-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR