nextjs - 💡(How to fix) Fix Css translate rotate scale properties not output in css bundle if used before transform [2 comments, 2 participants]

TL;DR

The issue can be fixed by reordering the CSS transformation properties to ensure that the transform property is declared last.

Guidance

• Verify that the issue is specific to NextJS version 16 by testing the same CSS code in a NextJS 15 environment to confirm the regression.
• Check the CSS bundle output to confirm that the transformation properties are being merged into the transform property.
• Consider reordering the CSS transformation properties to ensure that the transform property is declared last, like so:

.element{
  translate: 0% 100%; 
  rotate: 90deg;
  transform: skewY(7deg);  
}

• If reordering is not feasible, investigate alternative solutions such as using a separate CSS class for each transformation property or using a different CSS bundling approach.

Notes

The issue appears to be specific to NextJS version 16, and the exact cause is unclear without further investigation. The proposed solution is based on the assumption that the issue is related to the order of the transformation properties.

Recommendation

Apply workaround: Reorder the CSS transformation properties to ensure that the transform property is declared last, as this is a non-invasive change that can potentially resolve the issue without requiring a version upgrade or significant code changes.