# rollup-plugin-css-only

> Rollup plugin that bundles imported css

Latest version **4.5.5** (published 2025-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-css-only
pnpm add rollup-plugin-css-only
yarn add rollup-plugin-css-only
bun add rollup-plugin-css-only
```

## Health

**Score 38/100 (D)** — status: maintenance-mode.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.5.5 |
| Published | 2025-09-07 |
| First published | 2016-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/rollup-plugin-css-only) |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 1 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 118 |
| Author | Thomas Ghysels |
| Maintainers | thgh |
| Keywords | rollup-plugin, css |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-css-only
- Repository: https://github.com/thgh/rollup-plugin-css-only
- Issues: https://github.com/thgh/rollup-plugin-css-only/issues
- npm.io page: https://npm.io/package/rollup-plugin-css-only

## Dependencies (1)

- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) 5

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 4.5.5 (latest) — 2025-09-07
- 4.5.4 — 2025-09-03
- 4.5.3 — 2025-09-03
- 4.5.2 — 2023-11-06
- 4.5.1 — 2023-11-06
- 4.5.0 — 2023-11-03
- 4.4.0 — 2023-11-02
- 4.3.0 — 2022-11-03
- 4.2.0 — 2022-10-24
- 4.1.1 — 2022-10-20
- 4.1.0 — 2022-10-19
- 4.0.0 — 2022-10-19
- 3.1.0 — 2020-12-18
- 3.0.0 — 2020-11-19
- 2.1.0 — 2020-06-02
- … 10 more at https://npm.io/package/rollup-plugin-css-only/versions

## README

# Rollup plugin that bundles imported css

<a href="LICENSE">
  <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="Software License" />
</a>
<a href="https://github.com/thgh/rollup-plugin-css-only/issues">
  <img src="https://img.shields.io/github/issues/thgh/rollup-plugin-css-only.svg" alt="Issues" />
</a>
<a href="http://standardjs.com/">
  <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" alt="JavaScript Style Guide" />
</a>
<a href="https://npmjs.org/package/rollup-plugin-css-only">
  <img src="https://img.shields.io/npm/v/rollup-plugin-css-only.svg?style=flat-squar" alt="NPM" />
</a>
<a href="https://github.com/thgh/rollup-plugin-css-only/releases">
  <img src="https://img.shields.io/github/release/thgh/rollup-plugin-css-only.svg" alt="Latest Version" />
</a>

## Features

- CSS is emitted as 1 asset
- Order of imports is guaranteed
- Watches CSS imports
- Typescript types

## Installation

```
# v4 is compatible with Rollup 4 & 3 & 2
# Rollup 4 since v4.4
npm install --save-dev rollup-plugin-css-only
```

## Usage

```js
// rollup.config.js
import css from 'rollup-plugin-css-only'

export default {
  input: 'input.js',
  output: {
    file: 'output.js',
    format: 'es',
    assetFileNames: 'assets/[name]-[hash][extname]'
  },
  plugins: [css()]
}
```

```js
// entry.js
import './reset.css'
import './layout.css'
```

```css
/* layout.css */
@import './nested.css';
@import './more.css';
```

### Options

By default the plugin will use `output.assetFileNames` to decide the filename.

```js
css({
  exclude,  // [optional] - Array of glob/Strings like what `include` uses.
  fileName, // [optional] - File name of emitted asset.
  include,  // [optional] - Array of glob/Strings - default: ['**/*.css'].
  name,     // [optional] - Name of the emitted asset.
  output,   // [optional] - Below are the possible values for `output`:
  
  // ---------------------------------------------------------------------------
  // Filename to write all styles to
  output: 'bundle.css',
  
  // Callback that will be called on generate with two arguments:
  // - styles: the contents of all style tags combined: 'body { color: green }'
  // - styleNodes: an array of style objects: [{ lang: 'css', content: 'body { color: green }' }]
  output: (styles, styleNodes) => {
    writeFileSync('bundle.css', styles)
  },

  // Disable any style output or callbacks
  output: false,

  // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
  output: null
})
```

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

## Contributing

Contributions and feedback are very welcome.

To get it running:

1. Clone the project.
2. `npm install`
3. `npm run build`

## Credits

- [Thomas Ghysels](https://github.com/thgh)
- [All Contributors][link-contributors]

## License

The MIT License (MIT). Please see [License File](LICENSE) for more information.

[link-author]: https://github.com/thgh
[link-contributors]: ../../contributors
[rollup-plugin-vue]: https://www.npmjs.com/package/rollup-plugin-vue
[rollup-plugin-buble]: https://www.npmjs.com/package/rollup-plugin-buble
[rollup-plugin-babel]: https://www.npmjs.com/package/rollup-plugin-babel
[vue-template-compiler]: https://www.npmjs.com/package/vue-template-compiler

---
_Source: https://npm.io/package/rollup-plugin-css-only · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._