gatsby: Gatsby Slice API: Styling w/ JSS not working inside of slice components

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When attempting to use the new Slice API while utilizing JSS for styling all the styles on our pages started to break. The classNames are still being applied correctly but there are no styles attached to them. This only happens when running gatsby build OR when running gatsby develop with the DEV_SSR flag set to true.

Reproduction Link

https://github.com/EvanBancroft/slice-style-bug-repro

Steps to Reproduce

Run gatsby build && gatsby serve. The header is a slice and should be 100px tall & be red.

Expected Result

The header should have styles attached to the className on it.

Actual Result

There are no styles on the header despite the className being present.

Environment

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
    Yarn: 1.22.11 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 95.0
    Safari: 16.0
  npmPackages:
    gatsby: ^5.2.0 => 5.3.2
    gatsby-plugin-jss: ^5.3.0 => 5.3.0

Config Flags

No response

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 1
Comments: 16 (5 by maintainers)

Most upvoted comments

So to give an update here:

With Gatsby’s current APIs we can’t fix this
Thus we’ll need to introduce a new API, update any relevant plugins, write docs for it
Adding a new API requires research and design, since we need to live with that API for a long time

In the meantime there are some “workarounds”

Don’t use styled-components or JSS with slices
Use emotion since this works with slices

I can’t give an ETA for this to be fixed since the API design phase is still a black box.

LekoArts on Jan 24, 2023

Same — thanks for checking. I’ll do the experiment with the fresh starter and see what happens.

mmafe on Jan 16, 2023

We’re looking into it but unfortunately it seems more involved than what I initially wrote above

LekoArts on Jan 11, 2023

Yeah, it’s the same pattern https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js

LekoArts on Jan 9, 2023