{"id":22522,"library":"unplugin-solid-styled","title":"unplugin-solid-styled","description":"Unplugin-based build tool integration for solid-styled, providing Vite, Rollup, esbuild, and Webpack support. Current stable version 0.12.1, maintained with active releases. Unlike manual configuration, it auto-detects solid-styled's compile-time CSS extraction and injection across bundlers. Provides type-safe plugin options via TypeScript declarations. Key differentiators: zero-config for solid-styled, supports all major bundlers via unplugin architecture.","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 unplugin-solid-styled","lang":"bash","label":"npm"},{"cmd":"yarn add unplugin-solid-styled","lang":"bash","label":"yarn"},{"cmd":"pnpm add unplugin-solid-styled","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; core CSS-in-JS runtime and compile API","package":"solid-styled","optional":false},{"reason":"peer dependency for Vite support; optional if using other bundlers","package":"vite","optional":true}],"imports":[{"note":"Plugin is ESM-only; require() fails unless using dynamic import in CJS.","wrong":"const solidStyledPlugin = require('unplugin-solid-styled')","symbol":"default","correct":"import solidStyledPlugin from 'unplugin-solid-styled'"},{"note":"Explicit /vite export ensures correct bundler integration; default import may not resolve correctly in some setups.","wrong":"import solidStyledPlugin from 'unplugin-solid-styled'","symbol":"vite","correct":"import solidStyledPlugin from 'unplugin-solid-styled/vite'"},{"note":"Use the esbuild subpath to avoid bundler mismatch.","wrong":"import solidStyledPlugin from 'unplugin-solid-styled'","symbol":"esbuild","correct":"import solidStyledPlugin from 'unplugin-solid-styled/esbuild'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport solidStyledPlugin from 'unplugin-solid-styled/vite';\n\nexport default defineConfig({\n  plugins: [\n    solidStyledPlugin()\n  ]\n});\n\n// Component\nimport { styled } from 'solid-styled';\nconst Button = styled('button')`\n  background: blue;\n  color: white;\n`;\n","lang":"typescript","description":"Shows Vite integration with unplugin-solid-styled and a basic solid-styled component."},"warnings":[{"fix":"Use 'unplugin-solid-styled/<bundler>' to avoid bundler detection issues.","message":"Import from wrong subpath","severity":"gotcha","affected_versions":">=0.10"},{"fix":"Upgrade to >=0.10 and use subpath imports.","message":"Version 0.9 used default export without subpath","severity":"deprecated","affected_versions":"<0.10"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use dynamic import: const solidStyledPlugin = (await import('unplugin-solid-styled')).default;","cause":"Using require() in a CJS context without dynamic import.","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'unplugin-solid-styled'"},{"fix":"Import from the correct subpath: import solidStyledPlugin from 'unplugin-solid-styled/vite';","cause":"Incorrect bundler subpath; default import might be an object with a function property.","error":"TypeError: solidStyledPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}