cssinjs / cssinjs/jss

Warning because of dynamic values during SSR

Open
#1,277 24 comments 11 reactions 0 assignees View on GitHub
bug help wanted
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Describe the bug:__
I'm using my styles like these:
```js
export default (theme) => ({
root: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
textAlign: 'center',
background: theme.bgColor,
fontWeight: ({weight}) => weight, // here is the problem
},
});
```
And I'm getting this error on server-side (client is fine): `Warning: [JSS] Rule is not linked. Missing sheet option "link: true".`
If I delete the dynamic value for `fontWeight` I will not get this error again. The problem not only in the warning itself, but also in the way how my styles will be applyed in production mode (they break styles in the styles where I'm using dynamic value and server sends me wrong styles after page reloading).
P.S. I have tried using styles like this `const useStyles = createUseStyles(styles, {link: true});` and it's still not working :(

__Codesandbox link:__
I'm sorry, I have a problem with adding codesandbox.io with SSR and node.js console.

- latest version:
- Chrome:
- Windows:

Contributor guide

Open the contributing guide

Research direction

Start with the SSR path around createUseStyles and reproduce the reported styles object using a dynamic fontWeight value and link: true. Compare the server-rendered output and client behavior after reload; done means the warning is gone and dynamic styles remain correct in production. The issue has no reproducible CodeSandbox or named files/tests, so locating the relevant SSR entry point is part of the work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.