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

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

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 for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

• Clone the project.
• npm install
• npm run build

Credits

• Thomas Ghysels
• All Contributors

License

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