optimizeForSpeed mode sometimes attempts to insert multiple rules as one
#602 opened on 2019年11月28日
説明
Do you want to request a feature or report a bug?
Bug.
What is the current behavior?
In optimizeForSpeed mode, sometimes multiple rules are being incorrectly stuffed into .insertRule() at once, here:
In production the error is swallowed. This made it exceedingly hard for me to figure out why two seperate Next.js projects were having horrific style issues in production; the SSR page would be styled fine, but on client side route transitions, the styled-jsx styles for many of the components would be simply missing.
Here is a spectrum post from when I first encountered this bug a few weeks ago:
I found the "fix" at the time was to remove styling from a single component:
Fast forward to now, and I have another project that suddenly started bombing out, here is a Zeit Now deployment:
If I put a console.error(error) in here, this is an example error:
Here is a problematic "rule" that was being inserted:
.jsx-3944333314,.jsx-3103593668 ul,.jsx-3103593668 ol{margin-top:1em;margin-bottom:1.5em;padding-left:2em;}.jsx-3944333314:first-child,.jsx-3103593668 ul:first-child,.jsx-3103593668 ol:first-child{margin-top:0;}.jsx-3944333314:last-child,.jsx-3103593668 ul:last-child,.jsx-3103593668 ol:last-child{margin-bottom:0;}.jsx-3944333314>li,.jsx-3103593668 ul > li,.jsx-3103593668 ol > li{margin:0.5em 0;max-width:30em;line-height:var(--daui-line-height);}.jsx-3944333314>li:first-child,.jsx-3103593668 ul > li:first-child,.jsx-3103593668 ul > li:first-child{margin-top:0;}.jsx-3944333314>li:last-child,.jsx-3103593668 ul > li:last-child,.jsx-3103593668 ol > li:last-child{margin-bottom:0;}
It was the result of a few weeks of work without a production deployment, so unfortunately I can't say exactly what change pushed the bug to occur. I haven't lucked out on a miraculous "fix" this time though, so after MANY hours of debugging I'm getting pretty desperate!
If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar
I'm sorry I only have complicated, real world examples linked above and I haven't been able to isolate a minimal reproduction.
I have discovered that debugging is a lot easier when running optimizeForSpeed in dev, so traces aren't minified:
{
"presets": [["next/babel", { "styled-jsx": { "optimizeForSpeed": true } }]]
}
What is the expected behavior?
Styles managed via styled-jsx in a Next.js app render correctly on the client after route transitions.
Environment (include versions)
- OS: macOS
- Browser: Chrome v78
- styled-jsx (version): v3.2.4
Did this work in previous versions?
Not sure.