Is it possible to use @reshadow/styled with next.js and ssr ?

[VladSez]

Hello! I have run into difficulties trying to use @reshadow/styled with next.js and ssr. I have used this https://codesandbox.io/s/reshadownextjs-h4or9 as an example. But so far, no luck.

[lttb]

Hi @VladSez!

Could you provide a not working example please?

[VladSez]

@lttb https://codesandbox.io/s/reshadownextjs-d8t9y

[lttb]

There is an example with @reshadow/styled, nextjs and SSR: https://codesandbox.io/s/reshadownextjs-s5yeg

but, there are a few things to note:

• at this moment @reshadow/styled works only runtime.

  The main purpose of that package is better performance than styled-components (benchmarks: https://xggtc.sse.codesandbox.io/public) and simpler switch to reshadow. So, @reshadow/styled has quite efficient runtime and minimal overhead (but there are some package size tradeoffs too) , and I'm not sure that we need to support CSS extracting for this kind of the API (because I personally like reshadow API a bit more and I find it more flexible, and with SC there are many runtime-dependent things like js-mixins, styled-system and so on). I've got some ideas how it might work with styles extracting and maybe I'll try to implement that soon, but at this moment I think that it is important to focus on reshadow, edge cases and its documentation 🙂

• @reshadow/styled also provides some experimental features.:

It is possible to match styles on props a new way.

Instead of:

const Button = styled.button`
  ${props => props.disabled && css`
      opacity: .5;
      color: grey;
  `}
`

you can apply styles to the prop disabled:

const Button = styled.button`
  &[disabled] {
      opacity: .5;
      color: grey;    
  }
`

It's not a DOM attribute disabled, but prop disabled (from <Button disabled />), so this kind of styling is also possible:

const Button = styled.button`
  &[size="s"] {
      font-size: 12px;   
  }
`

in addition, you can declare "props for styling" with namespace use: use|propName or just |propName, for example:

Thus, disabled prop will not be passed to the DOM:

const Button = styled.button`
  &[|disabled] {
      opacity: .5;
      color: grey;    
  }
`

And here the prop size will not be passed to the DOM, when its value is s:

const Button = styled.button`
  &[|size="s"] {
      font-size: 12px;   
  }
`

And the Button API still stays as is, like <Button size="s" disabled />

[lttb]

@lttb https://codesandbox.io/s/reshadownextjs-d8t9y

@VladSez, the problem was that you had reshadow and @reshadow/styled with different versions. Those packages based on @reshadow/core, so there was a conflict in the API and dependencies.

I just removed reshadow from deps, and it seems okay: https://codesandbox.io/s/reshadownextjs-pzhsm

[VladSez]

@lttb thanks for your clarification!

[lttb]

@VladSez BTW, I think that basic support for static styles extracting with SC I'll release soon, there is no real problem with this kind of feature, based on things that reshadow already has

but mixins are quite challenging, and on the first glance, the most realistic thing is just preprocessing styles for them, optimize the runtime and extract styles, that we can safely extract

there are many pitfalls with mixins specificity

and this is why I tried to optimize many runtime things as much as possible, to have minimal overhead with runtime styles and mixins

and one of the interesting features with dynamic styles via css-custom-properties works great for the runtime styles too (it helps with efficient caching, stylesheet updates and so on), which is noticeable by benchmarks