rollup-plugin-css-only

Rollup plugin that bundles imported css

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

// 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()]
}

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

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

Options

There is 1 option: output.
By default the plugin will use output.assetFileNames to decide the filename.

css({
  // Optional: filename to write all styles to
  output: 'bundle.css'
})

Changelog

Please see CHANGELOG 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
• All Contributors

License

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

Changelog

[4.5.2] - 2023-11-07

Changed

• Fix duplicate styles in output https://github.com/thgh/rollup-plugin-css-only/pull/58 https://github.com/thgh/rollup-plugin-css-only/issues/55 https://github.com/thgh/rollup-plugin-css-only/issues/49