cometkim / gatsby-theme-stitches

A GatsbyJS plugin for styling with Stitches

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

why not a gatsby plugin?

peduarte opened this issue Β· comments

Hey! πŸ‘‹

I've been looking through how other CSS-in-JS libraries work with Gatsby, and I realised that they usually are Gatsby Plugins and not Gatsby Themes.

I'm working on adding a dedicated page on the Stitches Docs about using it with Gatsby, and wanted to link to this package.

But first, I thought I'd ask: what's the reason this is a theme and not a plugin?

Thanks!

Hey @peduarte ! Thank you for the good question.

The gatsby-plugin-stitches was my first attempt, but I realized that to share an instance of it with the ssr process I had to access it with component shadowing instead of just a config.

It is actually similar to the way gatsby-plugin-theme-ui deals with it.

I renamed it to gatsby-theme-stitches to clarify that it uses component shadowing. But it's still a plugin, all gatsby plugins are also a theme. No problem to refer to this project as "gatsby plugin".


more detail:

If it needs a just serializable configuration (ex, config for a webpack plugin), we can pass options in gatsby-config and initialize something in gatsby-node.

But in stitches, the user has to create a styled instance as a javascript module and use it directly and there is no way for the plugin to know it. We have to share the structure with the user codebase.

Fortunately, Gatsby provides a means to override it while sharing the module structure through a special configuration called component shadowing or theme in general and every gatsby plugin can use/can be it.

Perfect explanation, makes sense to me. Thank you <3

the feature "theme" in Gatsby was initially designed as a different system, but it has integrated with the plugin in beta.

The name change was a consideration for the Gatsby community, but the discussion is open :) I am willing to change it back if you prefer the gatsby-plugin-stitches name more.

No need, I agree that using the term theme clarifies that it uses component shadowing.