Is it possible to lazy load a .css.ts file in Next.js?

[lamualfa]

theme/index.css.ts

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

export const vars = createThemeContract({
  color: {
    brand: ''
  }
});

theme/themes/light.css.ts

import { createTheme } from '@vanilla-extract/css';
import { vars } from '../index.css.ts';

export const themeClass = createTheme(vars, {
  color: {
    brand: 'blue'
  }
});

theme/themes/dark.css.ts

import { createTheme } from '@vanilla-extract/css';
import { vars } from '../index.css.ts';

export const themeClass = createTheme(vars, {
  color: {
    brand: 'green'
  }
});

pages/index.tsx

import useSWR from 'swr'

const themeClasses = {
   light: () => import('../theme/themes/light.css.ts').then(mod => mod.themeClass),
   dark: () => import('../theme/themes/dark.css.ts').then(mod => mod.themeClass),
}

export default function Page() {
   const activeTheme = useActiveTheme()
   // Use SWR Hook to call async function (lazy load using import)
   const themeResponse = useSWR(['theme', activeTheme], (_, activeTheme) => themeClasses[activeTheme]())

   if (themeResponse.isLoading) {
      return <h1>Loading theme...</h1>
   }

   return <main className={themeResponse.data}></main>
}

[askoufis]

What's your use-case for this approach? Since Vanilla Extract generates your CSS at build-time, the only thing you're dynamically importing here is a class name, literally just a string. This won't end up reducing your CSS bundle at all, if that's what you're trying to achieve.

[lamualfa]

What's your use-case for this approach?

To lazy-load the CSS file generated by vanilla-extract. Specifically when the app has 2 themes, and the app only loads the CSS of the active theme, not all themes.

[askoufis]

Makes sense. I'm unsure if this works out of the box. What's the result of running the code in your question?

[IAmNatch]

Currently using nextjs 13 App Router and dynamically importing my theme file like this in the layout:

  // set your import name to any derived value you need to identify 
  const styleFile = tenantName;

  // dynamically import into your file. 
  const { themeClass }: { themeClass: string } = await import(
    `@/theme/themes/${styleFile}.css`
  );

This of course only works for server rendering, and maybe static export- not in the browser. Since it's just a single top level layout, this seems reasonable to me, but may not meet your requirements.