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

EvanBancroft commented 1 year ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] 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

ZeldOcarina commented 1 year ago

Yeah I haven't migrated to any of the magic Gatsby 5 tools just because of the JSS support. If this becomes persistent we may need to revert to scss as we were using a couple of years ago. JSS is so neat though it would be a shame. afaik it's something that the jss mantainers should do, not sure..

LekoArts commented 1 year ago

Hi!

So from our first investigation I think it's these issues that lead to that bug:

The plugin in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-jss/src/gatsby-ssr.js calls the onRenderBody API which isn't handled in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js#L543. We do handle it normally: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js#L365-L378
We don't pass pathname to the slice: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js#L560 - we do that normally: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js#L274

But maybe it's also a different root issue. We'll investigate further

ZeldOcarina commented 1 year ago

That's amazing! Would it work with Styled Components as well?

LekoArts commented 1 year ago

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

LekoArts commented 1 year ago

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

mmafe commented 1 year ago

Recently on Gatsby 5, I'm noticing that styles created using Styled Components are not working on pages in src/pages.

If I add the same component to one of the templates for a programmatically created page (under src/templates), the styles for that specific component are suddenly available to both the programmatically created pages and the pages under src/pages.

Could that be related to this issue?

ZeldOcarina commented 1 year ago

@mmafe Weird I operate with styled components in lots of themes and I've updated those all to Gatsby 5 with no issues. The real bug is if you try to use slices, otherwise it usually works ok.

mmafe commented 1 year ago

@ZeldOcarina Good to know! I will try a fresh Gatsby starter and see if the same issue occurs if I add a styled component on a page under src/pages and NOT under any programmatically created pages. Out of curiosity, which version of the Gatsby styled-components plugin are you using?

ZeldOcarina commented 1 year ago

I'm on:

    "gatsby-plugin-styled-components": "^6.3.0",
    "styled-components": "^5.3.6",
    "babel-plugin-styled-components": "^2.0.7",

mmafe commented 1 year ago

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

LekoArts commented 1 year ago

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.

np36 commented 1 year ago

I filed an issue to styled-components repo: Component in Gatsby Slice has no CSS after gatsby build #3872 3 months ago.

ZeldOcarina commented 1 year ago

Yeah I also have this problem, it would be great to have better support for Styled Components as I cannot use Slice or Partial Hydration at all in my projects, I feel like I'm still on v4 lol @LekoArts do you happen to have any update on this?

LekoArts commented 1 year ago

Partial Hydration is out of our control, Slice API is still a TODO

ZeldOcarina commented 1 year ago

I see maybe Styled Components has a better dev experience than his actual architecture.. It's a shame, it SO convenient to have styles and markup in the same file than having to write a css stylesheet for every component.. do you have any suggestions by any chance? I heard of Tailwind but I'm not sure I wanna convert all my projects to that..

ZeldOcarina commented 1 year ago

Hey @LekoArts pls take a look at this comment from the Styled Components team, is that something that could be of any help? https://github.com/styled-components/styled-components/issues/3872#issuecomment-1446101872 Thank you!! :)

gatsbyjs / gatsby