rollup-plugin-solid-styled

0.12.1 verified Mon Apr 27 auth: no javascript

Rollup plugin for solid-styled, a CSS-in-JS library for SolidJS. Version 0.12.1 is current. It integrates solid-styled's extraction with Rollup's build pipeline. Compared to manual setups, it automates style extraction and injection during bundling. Requires rollup >=3 and solid-styled >=0.9. TypeScript types included.

Common errors

error Error: Cannot find module 'rollup-plugin-solid-styled' ↓

cause Package not installed or incorrect import path.

fix

Run 'npm install rollup-plugin-solid-styled' and ensure import path is correct.

error Error: RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript) ↓

cause Solid-styled plugin not applied to JSX files.

fix

Add solidStyled() to Rollup plugins array with appropriate filter.

error TypeError: solidStyled is not a function ↓

cause CommonJS require used instead of ESM import.

fix

Use 'import solidStyled from 'rollup-plugin-solid-styled'' or 'import { solidStyled } from 'rollup-plugin-solid-styled''.

Warnings

breaking Does not support Rollup 2; requires Rollup >=3.0.0 ↓

fix Upgrade Rollup to version 3 or later.

gotcha Plugin must be placed before other transforms that might interfere with JSX parsing. ↓

fix Order plugins correctly: solid-styled should run after JSX transform but before code minification.

gotcha When using TypeScript, ensure tsconfig has 'jsx' set to 'preserve' and solid-styled's plugin handles JSX. Otherwise, styles may not be extracted. ↓

fix Set 'jsx' to 'preserve' in tsconfig and let solid-styled process JSX.

deprecated The 'filter' option's 'include' and 'exclude' accept only string patterns; array syntax deprecated. ↓

fix Use single string pattern; for multiple patterns, combine with glob or upgrade to next major.

Install

npm install rollup-plugin-solid-styled

yarn add rollup-plugin-solid-styled

pnpm add rollup-plugin-solid-styled

Imports

solidStyled
```
import solidStyled from 'rollup-plugin-solid-styled'
```
Default export; also available as named export 'solidStyled'

solidStyled

wrong

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

correct

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

ESM-only package; CommonJS require not supported. Use dynamic import() if needed.

SolidStyledOptions

wrong

import { SolidStyledOptions } from 'rollup-plugin-solid-styled' (without 'type')

correct

import type { SolidStyledOptions } from 'rollup-plugin-solid-styled'

TypeScript type; remove 'type' in value context

Quickstart

Rollup configuration with solid-styled plugin for extracting CSS from SolidJS components.

import solidStyled from 'rollup-plugin-solid-styled';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.tsx',
  plugins: [
    solidStyled({
      filter: {
        include: 'src/**/*.tsx',
        exclude: 'node_modules/**'
      }
    })
  ],
  output: {
    dir: 'dist',
    format: 'es'
  }
});