nextjs - 💡(How to fix) Fix Chained CSS Module `composes` not working with Turbopack [3 comments, 3 participants]

TL;DR

• The issue can be worked around by flattening the CSS composition chain to avoid relying on chained composes in Turbopack mode.

Guidance

• Review the SCSS code to identify all instances of chained composes and consider flattening these compositions to directly include all necessary styles.
• Verify the behavior in both Turbopack and Webpack modes after making changes to ensure consistency.
• Consider filing an issue with the Turbopack project to request support for chained composes, as this is a current limitation.
• Evaluate the feasibility of using Webpack for production builds if the chaining behavior is critical, given that Webpack currently supports this feature.

Example

.a {
    text-decoration: underline;
}

.b {
    composes: a;
    font-style: italic;
}

.c {
    composes: a; // Directly compose from 'a' instead of 'b'
    font-weight: bold;
    font-style: italic; // Include 'italic' from 'b' directly
}

Notes

• This workaround may require significant changes to the CSS architecture, depending on the complexity and depth of the composition chains.
• The long-term solution would be for Turbopack to support chained composes, but this requires a fix from the Turbopack developers.

Recommendation

• Apply workaround: Since the issue is due to a limitation in Turbopack, applying a workaround to flatten the composition chain is the most immediate way to resolve the inconsistency between Turbopack and Webpack modes.