Using Surimi with Vite

Surimi’s Vite plugin ships with surimi. just import it from surimi/vite.

pnpm install -D surimi

Then, update your vite.config.ts file to include the plugin:

import { defineConfig } from 'vite';
import surimi from 'surimi/vite';

export default defineConfig({
  plugins: [surimi()],
});

🎉 that’s it!

You can now create .css.ts files in your project and import them in your application code.

There are some config options for you. Pass them as an object to the surimi function in your vite.config.ts:

export default defineConfig({
  plugins: [
    surimi({
      /**
       * Files to include for processing as surimi files.
       * default:
       */
      include: ['**\/*.css.{ts,js}'],

      /**
       * Files to exclude from processing as surimi files.
       * default:
       */
      exclude: ['node_modules/**', '**\/*.d.ts'],

      /**
       * Whether to inline the generated CSS into the JavaScript module.
       * If `true`, will not emit separate CSS files, but instead inject CSS via JavaScript.
       * If `false`, will emit separate CSS files and import them as virtual modules.
       * default:
       */
      inlineCss: false,

      /**
       * Decide which of your other Vite plugins run inside surimi's internal
       * evaluation server. By default every plugin (except surimi's own) is
       * included, so aliases and custom resolvers keep working inside `.css.ts`
       * files. Only their `resolveId`, `load` and `transform` hooks run there.
       * Drop plugins whose transforms misbehave in a secondary server.
       * default:
       */
      pluginFilter: undefined,
    }),
  ],
});

Under the hood…

…the plugin evaluates .css.ts files in an internal Vite server (a “module runner”). Your .css.ts files therefore participate in the full Vite ecosystem: path aliases, ?raw / ?url imports, plain CSS imports, and other plugins’ resolvers all work inside them. The @surimi/compiler package (used by the CLI and standalone builds) shares the same extraction logic, so both produce identical output.