Duplication of CSS rules #42082
Comments
|
In Next.js v13.0.2 still not fixed |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
still not fixed in |
|
still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed in |
|
Still not fixed |
|
This is breaking my tailwind rules, please fix it |
|
Still not working in: |
|
Still not fixed in: v13.5.3 |
|
Still not fixed in |
|
Still experiencing it in 14.0.1. |
|
Still not fixed in |
|
For anyone who comes to this but I can at least explain how I "solved" it in my projects. My team uses Bulletproof React's file structure and as part of that all of our feature folders used to use I can't find any information about how to avoid this issue, what configuration changes would need to be made to avoid it. In the end we just stopped using index files and that solved it. Though I maintain tree shaking should have handled that. |
|
I too can confirm that in my project, removing the index files (which were being used to consolidate imports of components) and using direct imports fixes the issue. These components are all client-side components (not sure if that is a factor or not). Also found this reddit thread in which another user had similar success using direct imports: https://www.reddit.com/r/nextjs/comments/17lonpq/component_styles_duplicating_in_both_layoutcss/ That said, it is not a solution I like, due to the amount of boilerplate that gets added into my imports. In fact, I would rather live with the added payload these duplicated css rules add to my compiled output than change to direct imports. Hoping that this gets resolved soon because this issue has dragged on for quite some time. |
|
I also have the same issue on next 14.0.4 with css module. I encounter the same issue with vanilla-extract. Here a reproduction link
In my example
Heres is other thread that seems to be related
layout.tsximport { Demo } from './components/demo'
import { Demo2 } from './components/demo2'
export default function RootLayout({ children}}) {
return (
<html lang="en">
<body>
<header><Demo /><Demo2 /></header>
{children}
</body>
</html>
)
}page.tsximport { ClientExample } from "./components/client-example";
import { Demo2 } from './components/demo2'
export default function Home() {
return (
<main >
<div>
<ClientExample /><Demo2 />
</div>
</main>
)
}client-example.tsx'use client'
import { Demo } from "./demo"
export const ClientExample = () => {
return <div>
Demo inside client component:
<Demo />
</div>
}demo.tsximport democss from './demo.module.css'
export const Demo = () => {
return <div className={democss.demo}>Demo</div>
}demo2.tsximport demo2css from './demo2.module.css'
export const Demo2 = () => {
return <div className={demo2css.demo2}>Demo2</div>
} |
Other observationsNot related to nextjs version
Related to client component
|
|
14.1.1-canary.43 seems to fix this issue on my demo repo. I will try with other project later and send feedback here: PR that seems to made the fix: #61198 |
|
@zecka it still does not work in my demo (next@14.2.0-canary.21) Demo: https://next-js-css-order-bug.vercel.app/from |
|
Still not fixed in |
|
I encountered the same issue in Next 14.2.3. I'm overriding the styles component that belongs to a third-party package, and its HTML is not accessible. To address this, I created a styles.css file and imported it into my wrapper component. The styles are being overridden, but when I inspect the element, I see that the styles are getting duplicated. Interestingly, when I use this component only once (although that's not the case), the duplication no longer occurs since it's being imported or used within the app only once. Some have suggested that it's an import issue and can be resolved if the component is not imported from the index file. However, this solution isn't working for me, or perhaps I'm doing something wrong. I understand that this is not the ideal solution, but as a workaround, I've started importing CSS files at the root level, such as in the root layout of Next.js. |
|
Still not fixed in |
|
I've managed to resolve the similar issue in our project by doing these two steps:
But unfortunately there are some caveats concerning using of experimental features: https://nextjs.org/docs/app/api-reference/config/next-config-js/cssChunking |
Verify canary release
Provide environment information
What browser are you using? (if relevant)
Chrome 106.0.5249.119
How are you deploying your application? (if relevant)
Vercel
Describe the Bug
Page has different styling depending on HOW we get to the page.
When we go to the page from other page - we get one style.
When we refresh page we have different color.
The only difference is "Does link to the
/lazypage was rendered before rendering/topage or not"When link to
/lazypage is not rendered before./topage has appropriate styles with red background.When link to
/lazypage is rendered before./topage will have inappropriate styles.Expected Behavior
/topage should have exact same styles regardless of how we go to this pageLink to reproduction
https://github.com/whiteand/next-js-css-order-bug
To Reproduce
Steps to reproduce:
I expect that regardless of the ways we go to the
/topage background will be red.The text was updated successfully, but these errors were encountered: