Chris Biscardi

moon indicating dark mode
sun indicating light mode

Using Gatsby Shadowing without Gatsby

Gatsby themes introduced an API called Shadowing. This API is implemented as a webpack resolver plug-in. I recently rewrote the tests for shadowing from an e2e perspective which reminded me of the fact that since shadowing is a plug-in, you can use it in any webpack project! Here’s how:

const webpack = require("webpack");
const path = require("path");
const ShadowRealm = require("gatsby/dist/internal-plugins/webpack-theme-component-shadowing");
const config = {
mode: "development",
entry: "./index.js",
resolve: {
plugins: [
new ShadowRealm({
extensions: [".wasm", ".mjs", ".js", ".json"],
themes: [
{
themeName: "theme-a",
themeDir: path.join(
__dirname,
"./node_modules/theme-a"
)
}
]
})
]
}
};
webpack(config, (err, stats) => {
// compile finished, check errors
});

In this case I’ve placed the themes in node_modules for parity with what I’m trying to test. The themes can literally be anywhere though.

basic-shadowing
├── index.js
├── node_modules
│   └── theme-a
│   └── src
│   └── components.js
└── src
└── theme-a
└── components.js

Should you do this? Probably not because this package isn’t published separately and is really only meant to be used inside of Gatsby. If you wanted to experiment with it you totally could though and I think this method of building extra functionality into Gatsby (where development can happen in userland) is extremely beneficial.

If you wanted to you could even remove the shadowing plugin in Gatsby and implement your own. I would highly advise against doing this unless you’re testing a new Shadowing algorithm to PR to Gatsby itself.