vite-plugin-solid-styled

0.12.1 verified Mon Apr 27 auth: no javascript

Vite plugin for solid-styled, a CSS-in-JS library for SolidJS. Current stable version is 0.12.1 with weekly releases. It provides Vite integration with HMR, PostCSS preprocessing, and LightningCSS support. Key differentiators: built-in PostCSS (autoprefixer, nested, cssnano), SSR-friendly style registry, and <style jsx> syntax similar to styled-jsx. Unlike vanilla CSS or other CSS-in-JS solutions, it offers scoped styles with deterministic hash generation for consistent SSR. Requires solid-styled >=0.9 and Vite >=3.

Common errors

error Cannot find module 'vite-plugin-solid-styled' ↓

cause Package not installed or not in node_modules.

fix

Run npm install vite-plugin-solid-styled solid-styled vite.

error Error: [vite] [plugin solid-styled] Missing solid-styled dependency. ↓

cause solid-styled not installed as peer dependency.

fix

Install solid-styled: npm install solid-styled.

error TypeError: solidStyled is not a function ↓

cause Incorrect import style in CommonJS environment.

fix

Use ESM import: import solidStyled from 'vite-plugin-solid-styled'.

Warnings

breaking In v0.9, postcss and csstree dependencies removed in favor of lightningcss. Custom PostCSS config not supported. ↓

fix Remove any postcss.config.js reliance. If using PostCSS plugins, they are pre-configured via lightningcss.

breaking In v0.8, PostCSS processing introduced. If relying on raw CSS without processing, update to v0.8+ for compatibility. ↓

fix Update to v0.9+ to avoid PostCSS dependency.

deprecated The `ssr` option was replaced by `mode` in v0.5.0. `ssr` is still accepted but undocumented. ↓

fix Use `mode: 'ssr'` instead of `ssr: true`.

gotcha Plugin uses `use:solid-styled` directive internally. Do not use this directive manually as it will conflict. ↓

fix Remove any manual `use:solid-styled` usage; the plugin handles it automatically.

gotcha HMR may not work for style changes if the component file is not included in the plugin's filter. ↓

fix Ensure `filter.include` covers all component files containing `<style jsx>` or `css` template literals.

Install

npm install vite-plugin-solid-styled

yarn add vite-plugin-solid-styled

pnpm add vite-plugin-solid-styled

Imports

default

wrong

const solidStyled = require('vite-plugin-solid-styled')

correct

import solidStyled from 'vite-plugin-solid-styled'

Package is ESM-only. Requires Vite >=3.

solidStyled

import { solidStyled } from 'vite-plugin-solid-styled'

Named export available for explicit usage.

VitePluginSolidStyledOptions

wrong

const VitePluginSolidStyledOptions = require('vite-plugin-solid-styled')

correct

import type { VitePluginSolidStyledOptions } from 'vite-plugin-solid-styled'

TypeScript only - type import.

Quickstart

Configures Vite with vite-plugin-solid-styled for SolidJS, enabling scoped CSS and PostCSS processing.

// vite.config.ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import solidStyled from 'vite-plugin-solid-styled';

export default defineConfig({
  plugins: [
    solidPlugin(),
    solidStyled({
      prefix: 'my-app', // optional prefix for generated class names
      filter: {
        include: 'src/**/*.tsx',
        exclude: 'node_modules/**',
      },
    }),
  ],
});