fix(postcss): disable cssnano calc optimization to prevent incorrect CSS simplification#34367
fix(postcss): disable cssnano calc optimization to prevent incorrect CSS simplification#34367
Conversation
…CSS simplificatio
|
|
@nuxt/kit
@nuxt/nitro-server
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
WalkthroughThe change modifies the default cssnano plugin configuration in postcss.ts. When cssnano is used in production builds without explicit user configuration and not in development mode, the default return value changed from an empty object to 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/schema/src/config/postcss.ts (1)
49-51: Add a brief comment explaining whycalcis disabled.The reason for
calc: falseis non-obvious — future maintainers won't immediately know whether it was a deliberate semantic decision (preventing unsafe algebraic reduction of nestedcalc()for viewport units on mobile) or an oversight. Per project guidelines, non-obvious logic should carry an explanatory comment.💬 Suggested comment
+ // Disable postcss-calc to prevent incorrect algebraic simplification of + // nested calc() expressions (e.g. calc(100vh - calc(100vh - 100%)) → 100%), + // which is mathematically valid but semantically wrong for mobile viewport units. return { preset: ['default', { calc: false }], }As per coding guidelines, "Add comments only to explain complex logic or non-obvious implementations."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/schema/src/config/postcss.ts` around lines 49 - 51, Add a short, one-line comment above the returned postcss preset configuration explaining why calc is disabled (the object that returns preset: ['default', { calc: false }]); state the intent (e.g., avoiding unsafe/algebraic reduction of nested calc() with viewport units on mobile or whatever the real rationale is) so future maintainers understand this non-obvious choice.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/schema/src/config/postcss.ts`:
- Around line 49-51: Add a short, one-line comment above the returned postcss
preset configuration explaining why calc is disabled (the object that returns
preset: ['default', { calc: false }]); state the intent (e.g., avoiding
unsafe/algebraic reduction of nested calc() with viewport units on mobile or
whatever the real rationale is) so future maintainers understand this
non-obvious choice.
|
This is a bug of post-css - cssnano, I don't think we should handle this. |
Summary
Fixes #34366
cssnano's default preset includes
postcss-calc, which aggressively simplifies nestedcalc()expressions using algebraic reduction. This causescalc(100vh - calc(100vh - 100%))to be incorrectly reduced to100%in production builds.While
a - (a - b) = bis mathematically correct, it is semantically incorrect in CSS —100vhand100%are not equivalent on mobile browsers where100vhincludes the browser chrome (address bar), making this a common technique for handling mobile viewport heights.Changes
['default', { calc: false }]inpackages/schema/src/config/postcss.tsBefore / After
Before (production build output):
After (production build output):