Tanstack start without tailwind (css modules, zero runtime css-in-js, anything but tailwind)

[twin wind]

I am attempting to implement tanstack start with literally anything but tailwind. I am not for or against tailwind so please dont say "just use tailwind bro", simply I need to something else.

Reason being is I have legacy design systems implemented with styled-components and it is significantly easier to migrate to zero-runtime css-in-js or css modules and our team is quite good at writing clean styles without a million utility classes.

The core error revolves around FOUC (Flash of unstyled content) when the app renders.

I have a starter monorepo here https://github.com/j-mcfarlane/tanstack-start-monorepo that has a FOUC error. It is using pigment css (pigment only works with 18.3 if you upgrade to 19 it wont work).

Additionally there is an open issue on tanstack/router with a css modules example https://github.com/TanStack/router/issues/3023 with the same FOUC issues.

Has anyone gotten tanstack start working with (anything but tailwind) css modules or zero-runtime css in js? Would be grateful for any examples

[tacit sentinel]

I wrote a separate build step using regular ol' vite to generate the styles and then imported them into __root.tsx.

"build:styles": "vite build -c vite.styles.config.ts",

//vite.styles.config.ts

export default defineConfig({
    plugins: [
        tsConfigPaths({
            projects: ['./tsconfig.json'],
        }),
    ],
    resolve: {
        alias: {
            '@': '/app',
        },
    },
    build: {
        outDir: 'app/css/rendered',
        rollupOptions: {
            input: [resolve(__dirname, './app/client.tsx')],
            output: {
                assetFileNames: '[name][extname]',
            },
            external: ['/app/css/rendered/style.css?url'],
        },
        assetsDir: '.',
        copyPublicDir: false,
        emptyOutDir: true,
        cssCodeSplit: false,
    },
});

It's pretty dang hacky, and I really hope there's a first-party way to handle css modules soon.

[twin wind]

is this what you did for your repo?

[pale scarab]

working on supporting this in start right now

already got it working for prod, needs a bit more massaging to work in dev