Registry / web-framework / vite-plugin-solid-styled

vite-plugin-solid-styled

library0.12.1jsnpmunverified

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.

web-framework

npm install vite-plugin-solid-styled

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SOLID-

vite-plugin-solid-styled

web-frameworkjavascriptv0.12.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

✗ const solidStyled = require('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

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

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

TypeScript only - type import.

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/**', }, }), ], });

Debug

Known issues

breakingIn 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.

affects: >=0.9.0

breakingIn 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.

affects: >=0.8.0 <0.9.0

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

fix

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

affects: >=0.5.0

gotchaPlugin 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.

affects: >=0.1.0

gotchaHMR 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

Package not installed or not in node_modules.

fix

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

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

solid-styled not installed as peer dependency.

fix

Install solid-styled: `npm install solid-styled`.

TypeError: solidStyled is not a function

Incorrect import style in CommonJS environment.

fix

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

Upgrade

Version history

0.12.1latest on npm

Audit

Dependencies

solid-styledrequiredpeer dependency - core library providing runtime styles

viterequiredpeer dependency - Vite plugin

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/lxsmnsyc/solid-styled ↗

packagehttps://www.npmjs.com/package/vite-plugin-solid-styled ↗