unplugin-solid-styled

0.12.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'unplugin-solid-styled' ↓

cause Using require() in a CJS context without dynamic import.

fix

Use dynamic import: const solidStyledPlugin = (await import('unplugin-solid-styled')).default;

error TypeError: solidStyledPlugin is not a function ↓

cause Incorrect bundler subpath; default import might be an object with a function property.

fix

Import from the correct subpath: import solidStyledPlugin from 'unplugin-solid-styled/vite';

Warnings

gotcha Import from wrong subpath ↓

fix Use 'unplugin-solid-styled/<bundler>' to avoid bundler detection issues.

deprecated Version 0.9 used default export without subpath ↓

fix Upgrade to >=0.10 and use subpath imports.

Install

npm install unplugin-solid-styled

yarn add unplugin-solid-styled

pnpm add unplugin-solid-styled

Imports

default

wrong

const solidStyledPlugin = require('unplugin-solid-styled')

correct

import solidStyledPlugin from 'unplugin-solid-styled'

Plugin is ESM-only; require() fails unless using dynamic import in CJS.

vite
wrong
```
import solidStyledPlugin from 'unplugin-solid-styled'
```
correct
```
import solidStyledPlugin from 'unplugin-solid-styled/vite'
```
Explicit /vite export ensures correct bundler integration; default import may not resolve correctly in some setups.

esbuild

wrong

import solidStyledPlugin from 'unplugin-solid-styled'

correct

import solidStyledPlugin from 'unplugin-solid-styled/esbuild'

Use the esbuild subpath to avoid bundler mismatch.

Quickstart

Shows Vite integration with unplugin-solid-styled and a basic solid-styled component.

// vite.config.ts
import { defineConfig } from 'vite';
import solidStyledPlugin from 'unplugin-solid-styled/vite';

export default defineConfig({
  plugins: [
    solidStyledPlugin()
  ]
});

// Component
import { styled } from 'solid-styled';
const Button = styled('button')`
  background: blue;
  color: white;
`;