Comments (10)
We are seeing the same issue on 14.2.2
where on production builds the CSS styles get included in an unexpected order.
The specific example we are seeing is that CSS styles imported into layout.js are overriding CSS styles set in a component level stylesheet even though they have the same CSS specificity and the component CSS should override the layout's CSS. This bug appears to be due to the order that the CSS is included in the final static .css files that are included in the production build.
from next.js.
@benjitastic What kind of CSS styling are you using in this case (e.g., css modules)?
No, not modules. Just like this inside the component:
import './styles.css'
Some more details:
In this case layout.js had this at the top:
import '@/styles/customTheme.scss'
And customTheme.scss had this inside it:
@import 'bootstrap/scss/bootstrap';
That bootstrap file has a css style declared for .btn like this:
.btn { padding: .375rem .75rem }
Then in the component we have an element <button className="btn filter-pill">
and that component includes a styles.css. Inside that styles.css there's this declaration: .filter-pill { padding: 8px 33px 8px 14px }
The expectation is that .filter-pill padding can override .btn padding. But .btn was overriding .filter-pill styles. This was because of the 5 /_next/static/css/*.css
files appearing in the DOM the 1st one contained .filter-pill and the 2nd one contained .btn. This is backwards from expected order. Regardless of it they are in the same static CSS file or not the .btn declaration should come before the .filter-pill declaration.
Hard to post a repro since I think you need a project that has enough CSS to result in multiple static CSS files being generated.
We reverted back to 14.1.4 and the CSS went back to the correct order.
from next.js.
It seems 14.2.2
fixed this for development but not for prod.
from next.js.
@GabenGar Thanks for sharing a
from next.js.
I am seeing this issue as well, particularly for global styles as well as styles using css modules. As mentioned in this issue, it only happens in production builds.
from next.js.
Setting experimental: { cssChunking: 'strict' }
in next.config.js
resolves this issue for us. Not ideal, but better than broken CSS ordering in production!
from next.js.
@benjitastic What kind of CSS styling are you using in this case (e.g., css modules)?
from next.js.
Setting
experimental: { cssChunking: 'strict' }
innext.config.js
resolves this issue for us. Not ideal, but better than broken CSS ordering in production!
Interesting -- I can't find any docs anywhere on the cssChunking
parameter.
Does anybody know exactly what "strict" css chunking does?
from next.js.
Setting
experimental: { cssChunking: 'strict' }
innext.config.js
resolves this issue for us. Not ideal, but better than broken CSS ordering in production!
It does not seem to resolve the issue for us :(
from next.js.
Are there any updates on this issue from the nextjs team?
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
from next.js.
Related Issues (20)
- When tried to deploy latest canary to vercel -- Error: Invariant: prefetchDataRoute can't be set without PPR HOT 4
- Revalidate does not work on Vercel Deployment only HOT 1
- Buffer polyfill not work on ios lower then 14 HOT 1
- Buffer polyfill not work on ios lower then 14 HOT 9
- Custom page extension + own sitemap/robots route bug - route source code returned instead of Response HOT 2
- Router cache does not revalidate HOT 4
- Importing svg's using svgr/webpack no longer works in the latest canary release when using ppr (error: Cannot read properties of undefined (reading 'stack')) HOT 2
- Unexpected token Ident("tr") HOT 1
- outputFileTracing increases export build time by 1.5-2x HOT 1
- In iPhone Safari browser, quickly clicking the refresh button will cause the page to always display the content from loading.tsx HOT 1
- Turbopack error on edge runtime(middleware): `Error [TypeError]: _react.default.createContext is not a function` HOT 12
- Invalid hook call error
- Double RSC fetch after server action redirect HOT 1
- Double RSC fetch after server action redirect HOT 2
- Docs: Issue Next 14 generate a localized sitemap HOT 5
- Error: 'No such file or directory' when using `fs.readFileSync`
- create-next-app --empty with src dir and tailwindcss has problem HOT 1
- bug: Next has been hot updated continuously since it started HOT 6
- Unsupported Node.js version! Your version: undefined HOT 2
- SWR and @here/maps-api-for-javascript prod build HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.