How to use one out of x amount of themes exported using createGlobalTheme?

[epavletic]

This problem might be more about js than specifically about vanilla-extract, but since the gist of the issue concerns fetching one out of several available VE themes dynamically, I thought it made sense to ask here.

Today we’re using vanilla-extract in our internal design system, and has been doing so for a year and a half by now. We make extensive use of the theming capabilities, as we export several (20+) global themes from the component library, which we then use in our SPA. Anyways, our setup in the component library is pretty basic and adheres mostly to the examples in the current documentation:

We define a theme contract:

import { createGlobalThemeContract } from '@vanilla-extract/css';

const themeTokens = {
  someToken: 'some-token',
  anotherToken: 'another-token',
  etc: 'etc',
  // more stuff, as you can imagine…
};

export const vars = createGlobalThemeContract(themeTokens);

Then, each theme implements the contract:

import { createGlobalTheme } from '@vanilla-extract/css';
import { vars } from '../vars.css';

const themeTokens = {
  someToken: 'value for this specific theme',
  anotherToken: 'value for this specific theme',
  etc: 'value for this specific theme',
};

export default createGlobalTheme(':root', vars, themeTokens);

So far, so good. The way we’ve been handling this in our SPA up until now, is to export a ThemeProvider component from the library, which only has one job: make sure that the correct theme is loaded.

export const ThemeProvider = ({ brand, children }: ThemeProviderTypes) => {
  useEffect(() => {
    const loadTheme = async (brandId: string) => {
      try {
        await import(/* webpackChunkName: "[request]" */ `../../themes/${brandId}/theme.css`);
      } catch (error) {
        await import(/* webpackChunkName: "default-theme-css" */ '../../themes/default/theme.css');
      }
    };

    loadTheme(brand);
  }, [brand]);

  return <>{children}</>;
};

We’d then import it from the component library, and place it at the top of the react tree in the SPA. It’s not super elegant, but is has worked quite nice up until this point and has enabled us to only ship one set of theme variables to the end user’s browser.

Fast forward to today, where I’m stuck trying to figure out how to use this setup in a NextJS server side context using @vanilla-extract/next-plugin.
The new application will also handle the same set of multiple themes, so there’s a requirement that we don’t hardcode the theme, but resolve it in one way or another (server side request, environment variable, etc). And I have significant problems with getting just one theme to load, given the above setup in this new environment.

First attempt was to use the above ThemeProvider as is, similarly to how we do in the SPA. I got the Critical dependency: the request of a dependency is an expression warning as long as the export was part of the design-system component library. So as a first test, I removed it from the export. With that out of the way I tested to just brute force import a specific theme, which worked, albeit with the issue of having a static import.

// worked just fine, as I suspected it would
import '@company/design-system/themes/theme/theme.css'; // ← export createGlobalTheme() call above.

As soon as I switched to a dynamic import though, things started breaking:

const currentTheme = 'foo';
import(`@company/design-system/themes/${currentTheme}/theme.css`)

The end result being that all of the themes would be imported, one after another, and the result in the browser would be the look of the last imported theme, and x amount of duplicated sets of variables in the css file. This more or less in line with how I expect the bundler to treat dynamic imports, and is sort of reflected in the webpack docs about dynamic imports:

For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

Which makes sense in a way, but it’s the total opposite of what I’m trying to do here 😅

From here I’ve tried a bunch of different approaches, but I’ve come up short in each case. So I’m hoping that someone other than me has found themselves with multiple themes and the need to resolve just one of them, perhaps even in NextJS (since its CSS resolving thingamajig probably plays a part here as well).

Happy to provide some details on the above if something is unclear – sadly, the component library/consumer application is closed-source, so I can’t provide a code sandbox :/
Extremely grateful for any pointers, at this point 🙏

[mcrider]

Hey @epavletic, I have pretty much the same issue and am trying to figure out the best path forward -- Did you end up solving this?

Edit: to clarify, I think you could technically solve your problem by using createTheme/createThemeContract (instead of createGlobalTheme) to get CSS classes that define your theme and then use whatever logic you want to add that class name to e.g. your body tag rather than overriding :root. But that still means importing every theme and VE will add them all to your CSS bundle which will really bloat it.

[epavletic]

Hey Matt,
Not really, unfortunately :/
We’ve managed to go around the problem for the time being, but we’ve done unspeakable things to make it ”work” *blank stare*

Makes you kinda wish there was some API for exporting a function that calls createGlobalTheme when you use it, so you can sort of defer the loading of the css until you know which theme to import (kinda like React.lazy but for themes 😀). I briefly tried something like

export default createGlobalTheme(':root', vars, themeTokens);
export const loadTheme = () => createGlobalTheme(':root', vars, themeTokens);

…but obviously, it being a *.css.ts file, VA will scream at you if you try to export a function from it

Error: Invalid exports.
You can only export plain objects, arrays, strings, numbers and null/undefined.

But that still means importing every theme and VE will add them all to your CSS bundle which will really bloat it.

Yup, this is one of the key points we want to avoid. Some of our themes are partner-implementations and we can’t ship styles that lists other partners in plain text as part of the CSS. Apart from the obvious downside of shipping loads of variable sets that will never be used ofc.