nextjs - 💡(How to fix) Fix LightningCSS: Using `@container scroll-state` blows build [1 comments, 2 participants]

TL;DR

Disable Lightning CSS in favor of PostCSS when using Turbopack by exploring configuration options that allow fallback to PostCSS for CSS processing.

Guidance

• Investigate Turbopack configuration to see if there's an option to disable Lightning CSS or fall back to PostCSS for specific CSS files or rules.
• Check the documentation of Next.js and Turbopack for any mentions of compatibility issues with Lightning CSS and potential workarounds.
• Consider reaching out to the Turbopack or Next.js community for advice on how to handle CSS processing with Lightning CSS disabled.
• Look into the next.config.js file for any customization options that might allow disabling Lightning CSS for specific builds or environments.

Example

No specific code example is provided due to the lack of detailed configuration files in the issue description. However, the solution likely involves modifying the next.config.js file to adjust CSS processing settings.

Notes

The issue seems to stem from the inability to disable Lightning CSS when using Turbopack with Next.js, which suggests a potential configuration or compatibility issue rather than a code-level problem. The solution will likely involve adjusting project settings or configurations rather than modifying the CSS code itself.

Recommendation

Apply a workaround by configuring Turbopack to use PostCSS for CSS processing, as directly upgrading or changing versions may not be feasible without further information on the project's constraints.