mizdra / mizdra/css-modules-kit

Report a diagnostic for a URL specifier in `@value ... from`

Open
#450 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.