How to use electron-vite with Linaria?

[aabmets]

I would like to use the zero runtime CSS-in-JS library Linaria in my electron-vite project which uses React with TypeScript for the renderer, but I just can't get the Babel plugin working correctly when running the project either in dev mode or build mode. Is it even possible to use this library with electron-vite? I would really like to use CSS-in-JS in my electron-vite project.

[aabmets]

Here is the solution:

Note: the contents of the

1. Install the following dependencies:

bun add --dev @linaria/core @linaria/react @wyw-in-js/vite @vitejs/plugin-react vite-tsconfig-paths

2. Add the wyw plugin to your electron.vite.config.ts file as follows:

import wyw from "@wyw-in-js/vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig, bytecodePlugin, externalizeDepsPlugin, swcPlugin } from "electron-vite";
import type { Plugin } from "vite";

function getNodePlugins(env: ConfigEnv): (Plugin | null)[] {
   if (env.mode === "production") {
      return [swcPlugin(), externalizeDepsPlugin(), bytecodePlugin()];
   }
   return [swcPlugin()];
}

module.exports = defineConfig((env: ConfigEnv) => {
   return {
      main: {
         plugins: getNodePlugins(env),
      },
      preload: {
         plugins: getNodePlugins(env),
      },
      renderer: {
         plugins: [
             react(), 
             tsconfigPaths(), 
             wyw()
         ],
      },
   };
});

3. Use Linaria in React components:

import { css } from "@linaria/core";
import { Fragment, type ReactNode } from "react";

export default function App(): ReactNode {
   const title = css`
      text-transform: uppercase;
      background-color: goldenrod;
      font-family: "Menlo", "Lucida Console", monospace;
      font-size: 20px;
   `;
   return (
      <Fragment>
         <div className={title}>Linaria</div>
      </Fragment>
   );
}