{"id":22841,"library":"vite-plugin-solid-styled","title":"vite-plugin-solid-styled","description":"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.","status":"active","version":"0.12.1","language":"javascript","source_language":"en","source_url":"https://github.com/lxsmnsyc/solid-styled","tags":["javascript","pridepack","typescript"],"install":[{"cmd":"npm install vite-plugin-solid-styled","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-solid-styled","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-solid-styled","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - core library providing runtime styles","package":"solid-styled","optional":false},{"reason":"peer dependency - Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Package is ESM-only. Requires Vite >=3.","wrong":"const solidStyled = require('vite-plugin-solid-styled')","symbol":"default","correct":"import solidStyled from 'vite-plugin-solid-styled'"},{"note":"Named export available for explicit usage.","wrong":null,"symbol":"solidStyled","correct":"import { solidStyled } from 'vite-plugin-solid-styled'"},{"note":"TypeScript only - type import.","wrong":"const VitePluginSolidStyledOptions = require('vite-plugin-solid-styled')","symbol":"VitePluginSolidStyledOptions","correct":"import type { VitePluginSolidStyledOptions } from 'vite-plugin-solid-styled'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\nimport solidStyled from 'vite-plugin-solid-styled';\n\nexport default defineConfig({\n  plugins: [\n    solidPlugin(),\n    solidStyled({\n      prefix: 'my-app', // optional prefix for generated class names\n      filter: {\n        include: 'src/**/*.tsx',\n        exclude: 'node_modules/**',\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Configures Vite with vite-plugin-solid-styled for SolidJS, enabling scoped CSS and PostCSS processing."},"warnings":[{"fix":"Remove any postcss.config.js reliance. If using PostCSS plugins, they are pre-configured via lightningcss.","message":"In v0.9, postcss and csstree dependencies removed in favor of lightningcss. Custom PostCSS config not supported.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Update to v0.9+ to avoid PostCSS dependency.","message":"In v0.8, PostCSS processing introduced. If relying on raw CSS without processing, update to v0.8+ for compatibility.","severity":"breaking","affected_versions":">=0.8.0 <0.9.0"},{"fix":"Use `mode: 'ssr'` instead of `ssr: true`.","message":"The `ssr` option was replaced by `mode` in v0.5.0. `ssr` is still accepted but undocumented.","severity":"deprecated","affected_versions":">=0.5.0"},{"fix":"Remove any manual `use:solid-styled` usage; the plugin handles it automatically.","message":"Plugin uses `use:solid-styled` directive internally. Do not use this directive manually as it will conflict.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `filter.include` covers all component files containing `<style jsx>` or `css` template literals.","message":"HMR may not work for style changes if the component file is not included in the plugin's filter.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-solid-styled solid-styled vite`.","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'vite-plugin-solid-styled'"},{"fix":"Install solid-styled: `npm install solid-styled`.","cause":"solid-styled not installed as peer dependency.","error":"Error: [vite] [plugin solid-styled] Missing solid-styled dependency."},{"fix":"Use ESM import: `import solidStyled from 'vite-plugin-solid-styled'`.","cause":"Incorrect import style in CommonJS environment.","error":"TypeError: solidStyled is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}