mizdra / mizdra/css-modules-kit
Report a diagnostic for a URL specifier in `@value ... from`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 197
- Forks
- 15
- Avg merge
- 1h 33m
- Merged PRs (30d)
- 9
Description
Summary
css-modules-kit reports no diagnostic for @value ... from with a URL specifier, although bundlers cannot import tokens from a URL. composes ... from with a URL specifier is reported, but the two should be handled consistently.
Details
Current diagnostics of the checker:
| Code | Diagnostic |
|---|---|
@import 'https://example.com/a.module.css'; |
none |
@value b_1 from 'https://example.com/b.module.css'; |
none |
.a_1 { composes: c_1 from 'https://example.com/c.module.css'; } |
Cannot import module 'https://example.com/c.module.css' |
Behavior of css-loader 7.1.5 with webpack 5.111.0 (default settings, without experiments.buildHttp):
| Code | Result |
|---|---|
@import 'https://example.com/a.css'; |
The build succeeds. The @import url(...) stays in the runtime CSS. |
@value a_1 from 'https://example.com/a.module.css'; |
The build fails. |
.x { composes: b_1 from 'https://example.com/b.module.css'; } |
The build fails. |
Both failures have the same message:
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './https://example.com/a.module.css' in '<dir>'
css-loader converts both @value ... from and composes ... from into ICSS :import("<URL>") and resolves them in the same code path. That path has no check for URLs, so the URL is passed to the resolver like a path of a local file. Only @import skips URLs explicitly.
packages/core/src/checker.test.ts already has a test for this case with // TODO: Report diagnostics.
Expected behavior
@value ... from '<URL>'(named token importer) is reported.composes ... from '<URL>'(external token reference) is reported in the same way.@import '<URL>'(all token importer) stays unreported.
Open question: which message to report.
- Reuse
Cannot import module '<URL>'. It matches css-loader, where the failure is a plain resolution error. - Add a message that tells the reason, such as
Cannot import tokens from the URL '<URL>'., and use it for both constructs.
🤖 Generated with Claude Code
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the URL-specifier test and its TODO in packages/core/src/checker.test.ts, then trace the checker path that handles @value and composes imports. Decide on the diagnostic wording for both constructs while leaving URL @import unreported. Done means the named test covers the expected diagnostics and the relevant checker tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- testing, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100