Package Exports

rollup-plugin-styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-styles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rollup-plugin-styles

🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.

Install

yarn add rollup-plugin-styles --dev

Usage

// rollup.config.js
import styles from "rollup-plugin-styles";

export default {
  plugins: [styles()],
};

After that you can import CSS files in your code:

import "./style.css";

Note that, by default, generated CSS will be injected into <head>, with CSS also available as default export unless extract: true:

// Inject into `<head>`, also available as `style` object in this example
import style from "./style.css";

This plugin will also automatically detect and use local PostCSS config files.

CSS Extraction

styles({
  extract: true,
  // ...or with absolute/relative to current working directory path
  // Note: also acts as `to` for PostCSS
  extract: "dist/awesome-bundle.css",
});

CSS Modules

styles({
  modules: true,
  // ...or with custom options
  modules: {},
  // ...additionally using autoModules
  autoModules: true,
});

With Sass/Stylus/Less

Install corresponding dependency:

For Sass support install node-sass or sass:

yarn add node-sass --dev

yarn add sass --dev

For Stylus support install stylus:
```
yarn add stylus --dev
```
For Less support install less:
```
yarn add less --dev
```

That's it, now you can import .scss .sass .styl .stylus .less files in your code.

`fibers` (Sass/Scss only)

This plugin will auto detect fibers package when using sass implementation

When installed via npm, Dart Sass supports a JavaScript API that's fully compatible with Node Sass <...>, with support for both the render() and renderSync() functions. <...>

Note however that by default, renderSync() is more than twice as fast as render() due to the overhead of asynchronous callbacks. To avoid this performance hit, render() can use the fibers package to call asynchronous importers from the synchronous code path.

Source

To install fibers:

yarn add fibers --dev

imports (Sass/Scss/Less)

Similar to how webpack's sass-loader works, you can prepend the import path with ~ to tell this plugin to resolve in node_modules:

@import "~bulma/css/bulma";

Options

See Options for full list of available options.

Differences from rollup-plugin-postcss

Written completely in TypeScript
CSS Modules implementation compatible with plugins like postcss-import and postcss-custom-properties
Support for partials and ~ in Less files
Proper sourcemap generation for all loaders
Proper order of imported CSS chunks
Sourcemaps include source content
Correct inline sourcemaps
Correct relative source paths in extracted sourcemaps
Can accept sourcemaps from previous plugins
Extracts sourcemaps from loaded files
More bug fixes here and there

Contribute

Any contributions are always welcome, not only Pull Requests! 😀

QA: file bug reports, the more details you can give the better
Code: take a look at the open issues, even if you can't write code showing that you care about a given issue matters
Ideas: feature requests are welcome

Your First Contribution? You can learn how from this free series, How to Contribute to an Open Source Project on GitHub.

License

Thanks

rollup-plugin-postcss - for good reference 👍
rollup - for awesome bundler 😎