rollup-plugin-css-text

1.0.3 verified Mon Apr 27 auth: no javascript

A Rollup plugin that generates JavaScript files exporting CSS file contents as strings, paired with TypeScript declaration files. Version 1.0.3, stable, no recent updates. Designed for library authors needing to export CSS text for SSR-compatible CSS-in-JS (e.g., styled-components, Emotion). Unlike typical CSS extraction plugins, it creates companion .css-text.js files alongside original CSS files, preserving both. Requires Rollup >=2.61.1, and a separate CSS plugin (e.g., rollup-plugin-postcss) for actual CSS handling.

Common errors

error Error: output.dir must be set when using rollup-plugin-css-text ↓

cause output.dir not specified in Rollup config.

fix

Add output.dir to rollup config (e.g., output: { dir: 'dist', ... }).

error TypeError: cssText is not a function ↓

cause Using CommonJS require instead of ESM import.

fix

Use import cssText from 'rollup-plugin-css-text' (ESM) or use dynamic import if in CommonJS.

Warnings

gotcha Plugin does not handle CSS loading/minification; it only processes already-extracted CSS files in the output directory. ↓

fix Place a CSS plugin (e.g., rollup-plugin-postcss with extract: true) before css-text in the plugins array.

gotcha Requires output.dir to be set; does not work with output.file. ↓

fix Use output.dir instead of output.file in Rollup config.

breaking The option 'includeComments' was added in 1.0.3; earlier versions ignore it. ↓

fix Upgrade to >=1.0.3 to use includeComments.

deprecated No deprecated features known; but the plugin is minimally maintained (last release 2023). ↓

fix Evaluate if active maintenance is needed; consider alternatives if new features required.

Install

npm install rollup-plugin-css-text

yarn add rollup-plugin-css-text

pnpm add rollup-plugin-css-text

Imports

cssText

wrong

const cssText = require('rollup-plugin-css-text')

correct

import cssText from 'rollup-plugin-css-text'

Default export only; package is ESM-first, no CommonJS named export.

CssTextOptions
```
import type { CssTextOptions } from 'rollup-plugin-css-text'
```
Type-only import for TypeScript users; available since 1.0.2.
includeComments
```
cssText({ includeComments: true })
```
Option to include CSS comments in output; false by default.

Quickstart

Shows typical usage with rollup-plugin-postcss, outputting CJS with named exports, disabling TS declarations.

import postcss from 'rollup-plugin-postcss';
import cssText from 'rollup-plugin-css-text';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'cjs',
    exports: 'named'
  },
  plugins: [
    postcss({ extract: true }),
    cssText({ tsDeclaration: false })
  ]
};