Incorrect CSS minification when using `next build`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/RobinMalfait/nextjs-incorrect-css-minification
To Reproduce
next dev will result in the correct result:
next build && next start will result in the incorrect result:
Current vs. Expected behavior
Given CSS like this:
.example {
border: 2px solid red;
width: 100px;
height: 100px;
background-image: conic-gradient(in oklch decreasing hue, oklch(0.491 0.27 292.580994) var(--tw-gradient-from-position), oklch(0.897 0.196 126.665001) 50%, oklch(0.491 0.27 292.580994) 100%);
}
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%
}
This will work as-is in development mode because no minification is happening. Once you run a production build, the initial-value: 0% is defined as initial-value: 0 which makes the CSS property invalid.
I expect that the initial-value stays the same and not break when running a production build.
You also don't get any errors, so it might not be obvious that this bug happened.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
Available memory (MB): 65536
Available CPU cores: 10
Binaries:
Node: 23.11.0
npm: 10.9.2
Yarn: N/A
pnpm: 9.15.1
Relevant Packages:
next: 15.4.0-canary.33 // Latest available version is detected (15.4.0-canary.33).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
CSS
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
Related issue: https://github.com/tailwindlabs/tailwindcss/issues/17977
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and compare next dev with next build && next start using the CSS example in the report. Trace the production CSS minification path and verify that @property preserves initial-value: 0%; done means the production result matches development without errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, nextjs
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100