Storybook with external theme tokens and sprinkles function

[d-kls]

I am working on a component library with vanilla extract. Previously i had the sprinkles function and the theme setup inside the component library package. Storybook was setup with this addition to its default webpack config.

const { VanillaExtractPlugin } = require("@vanilla-extract/webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	webpackFinal(baseConfig, options) {
		const { module = {}, plugins = {} } = baseConfig;

		const cssRule = module.rules.find(rule => rule?.test?.test("test.css"));
		cssRule.test = /.*(?<!\.vanilla)\.css$/;

		return {
			...baseConfig,
			plugins: [...plugins, new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
			module: {
				...module,
				rules: [
					...module.rules,
					{
						test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
						use: [
							MiniCssExtractPlugin.loader,
							{
								loader: require.resolve("css-loader"),
								options: {
									url: false, // Required as image imports should be handled via JS/TS import statements
								},
							},
						],
					},
				],
			},
		};
	},
};

Now i have extracted the sprinkles function and the theme variables into a separate package - and installed that package in the component library like this:

"theme-and-atoms": "file:../theme_and_atoms/dist"

the dist folder is the result of tsc emitted files. I changed every import from the local imports inside the component library, to the ones pointing to the theme_and_atoms package.

Example inside button.css.ts:

From (local import):
import { atoms } from "../../../css/atoms/atoms.css";

To (package import):
import { atoms } from "theme-and-atoms";

My own webpack build still runs without errors - the start-storybook command fails now though, with the following error message:

ModuleBuildError: Module build failed (from ./node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) TypeError: Cannot destructure property 'style' of '.for' as it is undefined.

I have no clue why this is occuring. Nothing besides the extraction of atoms and theme into its own package, and changing the local imports changed. Any help would be appreciated.

When debugging the vanilla extract plugin, it throws the error with more specific information - pointing towards button.css.ts to the recipe function that is called. I unfortunately cannot inspect the inlined button.css.ts file. The issue is especially weird since nothing changed besides the imports and the recipe worked fine before. I now reference my themeVars from the theme_and_atoms package instead of a local file in button.css.ts but i dont see why it should be any different than before (?). When i comment out my compound variants, the error dissappears - and storybook compiles at first, but then when opening the button story i instead get this error. This error is then thrown for every component story that in any way uses the return from a recipe function:

(0 , _styles_button_css__WEBPACK_IMPORTED_MODULE_7__.buttonCss) is not a function

I can confirm that i do not default export and import as a named import or anything of that sort. The underlying issue must be a different one. Any help is much appreciated!

[d-kls]

Comment: When debugging, the themeVars are for some reason undefined. i have followed the storybook setup described here

the imported variable is undefined - even though it should not be. using circular dependency checks like madge showed there are no circular dependencies.