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.

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";

`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

Configuration

See API Reference for Options for full list of available options.

Differences from rollup-plugin-postcss

Written completely in TypeScript
CSS Modules implementation which:
- Processes files imported with plugins like postcss-import
- Causes no duplication with plugins like postcss-custom-properties
Support for partials and ~ in Less import statements
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 smaller things that I forgot

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, no matter how ambitions they are

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 😎