-
Notifications
You must be signed in to change notification settings - Fork 263
-
Notifications
You must be signed in to change notification settings - Fork 263
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
optimizeForSpeed mode sometimes attempts to insert multiple rules as one #602
Comments
@jaydenseric hey mate I am sorry that you are experiencing this kind of issue! Sounds super frustrating. Before we even try to debug, can you make sure that both the library and the consumer app are transpiled in the same "mode" (either NODE_ENV production or development). The issue could be that your components library is compiled for development mode and when the Next.js app is deployed to prod it instead uses |
I'll check, but if that is the case, how come none of the styles are broken right now at https://deviceagnosticui.com, or https://jaydenseric.com? |
this article explains how to bundle a library that uses styled-jsx to avoid this issue https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2 |
Thanks for the revelation, although this is a real headache to solve elegantly 😓 Bundling published packages is an antipattern, and you can't have I think I might publish two builds at |
Is I might just continue to publish {
"presets": [["next/babel", { "styled-jsx": { "optimizeForSpeed": false } }]]
} |
As for bundling you have a few options:
|
|
Here is an example of the difference between transpiling published components without and with For this component: https://deviceagnosticui.com/components/Blockquote Here is without: export var stylesBlockquote = {
styles: React.createElement(
_JSXStyle,
{
id: '3946479178'
},
'.jsx-3946479178,.' +
stylesHtml.className +
' blockquote{margin-top:1.5em;margin-bottom:1.5em;margin-left:1.5em;max-width:22em;line-height:var(--daui-line-height);font-style:italic;font-weight:300;text-rendering:optimizeLegibility;}.jsx-3946479178:first-child,.' +
stylesHtml.className +
':first-child{margin-top:0;}.jsx-3946479178:last-child,.' +
stylesHtml.className +
':last-child{margin-bottom:0;}'
),
className: 'jsx-3946479178'
} Here is with: export var stylesBlockquote = {
styles: React.createElement(
_JSXStyle,
{
id: '3946479178'
},
[
'.jsx-3946479178,.' +
stylesHtml.className +
' blockquote{margin-top:1.5em;margin-bottom:1.5em;margin-left:1.5em;max-width:22em;line-height:var(--daui-line-height);font-style:italic;font-weight:300;text-rendering:optimizeLegibility;}',
'.jsx-3946479178:first-child,.' +
stylesHtml.className +
':first-child{margin-top:0;}',
'.jsx-3946479178:last-child,.' +
stylesHtml.className +
':last-child{margin-bottom:0;}'
]
),
className: 'jsx-3946479178'
} The only difference appears to be the rules are one big string in dev, and an array of a string for each rule for prod. Could styled-jsx be enhanced to automatically |
@jaydenseric it is not possible to mix up We can add a warning here though like if |
Perhaps you misunderstood the suggestion... It would be impossible to support importing non But, I can't see why the other way around can't be supported. You should be able to import With this behavior, to write a component/styles library all you need to do is publish a single |
@jaydenseric that is a bit "magic" but it might work, want to put together a PR? |
@giuseppeg I got started on a PR a few weeks ago but had to move onto other stuff. Sorry, but I'm now out of time and money to work on OSS, see https://twitter.com/jaydenseric/status/1206800095280128006. I've been working on OSS pro bono full time since August; time to get back into paid work. |
@jaydenseric no worries! I get that as I am not paid to maintain any of these OSS projects as well :) |
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:https://github.com/zeit/styled-jsx/blob/343795d3b2fef6d3d085921b0d4cf31b4d9be709/src/lib/stylesheet.js#L129-L139
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:
https://spectrum.chat/styled-jsx/general/absolutely-stumped-why-next-js-page-styles-broke~3ad888fa-23fc-4e6c-9948-fffa81a4e956
I found the "fix" at the time was to remove styling from a single component:
jaydenseric/device-agnostic-ui-website@a44fca1
Fast forward to now, and I have another project that suddenly started bombing out, here is a Zeit Now deployment:
whimsy-app-hhuy9ally.now.sh
If I put a
console.error(error)
in here, this is an example error:Here is a problematic "rule" that was being inserted:
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: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)
Did this work in previous versions?
Not sure.
The text was updated successfully, but these errors were encountered: