Turbopack causes a build error usage of composes with CSS @layer rules
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/doug-stewart/css-module-bug
To Reproduce
After cloning the provided repo, to reproduce the build error:
- Run
npm run build - Observe the console output
To build successfully without the error:
- Remove
--turbopackfrom thepackage.jsonfile build command - Run
npm run build - Observe the console output
Current vs. Expected behavior
With the --turbopack flag enabled the build fails with the following error:
> next build --turbopack
▲ Next.js 15.5.6 (Turbopack)
Creating an optimized production build ...
-----
FATAL: An unexpected Turbopack error occurred. A panic log has been written to /var/folders/gw/yvst0j_d6dzb0pdc0n0222rw0000gn/T/next-panic-4c3336c02e1b90a874134a567b365077.log.
To help make Turbopack better, report this error by clicking here.
-----
> Build error occurred
Error [TurbopackInternalError]: Failed to write page endpoint /_error
Caused by:
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14
Debug info:
- Execution of TaskId { id: 2147483650 } transient failed
- Execution of get_all_written_entrypoints_with_issues_operation failed
- Execution of EntrypointsOperation::new failed
- Execution of all_entrypoints_write_to_disk_operation failed
- Execution of Project::emit_all_output_assets failed
- Execution of *emit_assets failed
- Execution of all_assets_from_entries_operation failed
- Execution of *all_assets_from_entries failed
- Execution of output_assets_operation failed
- Execution of <PageEndpoint as Endpoint>::output failed
- Failed to write page endpoint /_error
- Execution of PageEndpoint::output failed
- Execution of PageEndpoint::client_chunks failed
- Execution of *ChunkingContext::evaluated_chunk_group failed
- Execution of Project::client_chunking_context failed
- Execution of *get_client_chunking_context failed
- Execution of Project::module_ids failed
- Execution of Project::whole_app_module_graphs failed
- Execution of whole_app_module_graph_operation failed
- Execution of *ModuleGraph::from_single_graph failed
- Execution of SingleModuleGraph::new_with_entries failed
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- Execution of primary_chunkable_referenced_modules failed
- Execution of <ModuleCssAsset as Module>::references failed
- Execution of ModuleCssAsset::module_references failed
- Execution of ModuleCssAsset::classes failed
- Execution of process_css_with_placeholder failed
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14
at <unknown> (TurbopackInternalError: Failed to write page endpoint /_error)
at <unknown> (- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14)
at <unknown> (- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14) {
type: 'TurbopackInternalError'
}```
Without the flag the build completes successfully, which is the expected behavior.
### Provide environment information
```bash
Operating system: macOS 26.1
Node: v22.12.0
Next.js: 15.5.6
Which area(s) are affected? (Select all that apply)
CSS, Turbopack
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
Created log file is the same as the console output:
Failed to write page endpoint /_error
Caused by:
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14
Debug info:
- Execution of TaskId { id: 2147483650 } transient failed
- Execution of get_all_written_entrypoints_with_issues_operation failed
- Execution of EntrypointsOperation::new failed
- Execution of all_entrypoints_write_to_disk_operation failed
- Execution of Project::emit_all_output_assets failed
- Execution of *emit_assets failed
- Execution of all_assets_from_entries_operation failed
- Execution of *all_assets_from_entries failed
- Execution of output_assets_operation failed
- Execution of <PageEndpoint as Endpoint>::output failed
- Failed to write page endpoint /_error
- Execution of PageEndpoint::output failed
- Execution of PageEndpoint::client_chunks failed
- Execution of *ChunkingContext::evaluated_chunk_group failed
- Execution of Project::client_chunking_context failed
- Execution of *get_client_chunking_context failed
- Execution of Project::module_ids failed
- Execution of Project::whole_app_module_graphs failed
- Execution of whole_app_module_graph_operation failed
- Execution of *ModuleGraph::from_single_graph failed
- Execution of SingleModuleGraph::new_with_entries failed
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- Execution of primary_chunkable_referenced_modules failed
- Execution of <ModuleCssAsset as Module>::references failed
- Execution of ModuleCssAsset::module_references failed
- Execution of ModuleCssAsset::classes failed
- Execution of process_css_with_placeholder failed
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14
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 linked reproduction, package.json, and src/components/component-b/ComponentB.module.css. Run npm run build with --turbopack, then compare the successful build without the flag and inspect Turbopack's CSS module processing for the nested @layer and composes usage. Done means the reproduction builds successfully with Turbopack while retaining the reported CSS behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, nextjs
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100