Runtime Linaria

Unstable version of linaria vite plugin that does not requires babel at build time.

The goal is to skip using babel for in dev mode to get faster build iteration, while remaining ISO with the zero runtime in production.

⚠️ This project is a work in progress and might not yield the same css as the official linaria plugin

🧑‍🔬 demo page:

• with linaria-runtime plugin

• with official linaria plugin

Usage

// vite.config.ts
import linaria from "@wyw-in-js/vite";

export default defineConfig(({ mode, command }) => ({
  plugins: [
    command === "build"
      ? //
        // use the classic linaria vite plugin in build for zero runtime build
        linaria({ include: ["**/*.tsx"] })
      : //
        // use the runtime linaria in dev, for faster rebuild
        runtimeLinaria({ include: ["**/*.tsx"] }),
  ],
}));

example

package manager

This module is not (yet) published on npm, we can add it as:

// package.json
    "dependencies": {
        "vite-plugin-runtime-linaria": "github:platane/vite-plugin-runtime-linaria"

Implementation

Instead of doing complex transform on the file at build time to extract the css. This plugin make linaria resolve to a module that parse the css at runtime, which is similar to what styled-component / emotion does.

Discrepancies

• className naming convention is different from linaria, and not customizable
• fix the hacky "global" keyword handling