pliant kettle
All of my pages/components are behind authentication with the exception of the login page.
When unauthenticated, the css file that is fetched in the production build includes all of the index.module.scss styling thats hidden behind authentication, even though none of those styles are used on the login page.
Some of the naming for these styles could provide information about what components are available behind authentication. Is the only way around this to obfuscate style names on build?
random vigilBOT
Hi @pliant kettle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the knowledge sources provided, this issue appears to be related to how Next.js handles CSS Modules and code splitting in production builds. While there isn't a direct solution mentioned for your specific scenario, I can provide some relevant information and potential approaches:
CSS Module Bundling: Next.js tends to include all CSS Modules in the main bundle, even if they're not immediately used. This is likely why you're seeing all the styles, including those for authenticated components, in the unauthenticated login page.
Code Splitting Limitations: As mentioned in this GitHub issue, there are limitations to how Next.js splits CSS and JS code, especially when using server-side components or certain import patterns.
Potential Workarounds:
a. Use dynamic imports for authenticated components to potentially improve code splitting.
b. Consider using CSS-in-JS solutions that might offer better code splitting.
c. As you suggested, obfuscating style names during the build process could help mitigate information leakage.
Future Improvements: The Next.js team is aware of these limitations and there are ongoing discussions about improving CSS code splitting, as evidenced by this GitHub issue.
Unfortunately, there isn't a straightforward solution to prevent including unused styles from authenticated components in the unauthenticated bundle based on the provided knowledge sources. You might need to explore alternative styling approaches or implement custom build processes to achieve the desired level of style isolation and security.