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

npm install -D rollup-plugin-styles # npm

pnpm add -D rollup-plugin-styles # pnpm

yarn add rollup-plugin-styles --dev # yarn 1.x

Usage

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

export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler)
    // Note: using value below will put .css files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath` accordingly as well
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

After that you can import CSS files in your code:

import "./style.css";

Default mode is inject, which means generated CSS will be injected into <head>, with ability to pass options to CSS injector or even pass your own injector

CSS is available as default export in inject and extract modes, but if CSS Modules are enabled you need to use named css export.

In emit mode none of the exports are available since it purely processes CSS and passes it along the build pipeline, which is useful if you only want to preprocess CSS for usage with CSS consuming plugins, e.g. rollup-plugin-lit-css

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Named export of CSS string
import { css } from "./style.css";

This plugin also automatically detects and uses local PostCSS config files.

CSS Injection

styles({
  mode: "inject", // Unnecessary, set by default
  // ...or with custom options for injector
  mode: ["inject", { container: "body", singleTag: true, prepend: true }],
  // ...or with custom injector
  mode: ["inject", yourInjectorFn],
});

CSS Extraction

styles({
  mode: "extract",
  // ... or with relative to output dir/output file's basedir (but not outside of it).
  mode: ["extract", "awesome-bundle.css"],
});

Emitting processed CSS

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

// Any plugin which consumes pure CSS
import litcss from "rollup-plugin-lit-css";

export default {
  plugins: [
    styles({ mode: "emit" }),

    // Make sure to list it after this one
    litcss(),
  ],
};

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:

npm install -D node-sass # npm

pnpm add -D node-sass # pnpm

yarn add node-sass --dev # yarn 1.x

npm install -D sass # npm

pnpm add -D sass # pnpm

yarn add sass --dev # yarn 1.x

For Stylus support install stylus:

npm install -D stylus # npm

pnpm add -D stylus # pnpm

yarn add stylus --dev # yarn 1.x

For Less support install less:

npm install -D less # npm

pnpm add -D less # pnpm

yarn add less --dev # yarn 1.x

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:

npm install -D fibers # npm

pnpm add -D fibers # pnpm

yarn add fibers --dev # yarn 1.x

Configuration

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

Main differences from rollup-plugin-postcss

Written completely in TypeScript
Up-to-date CSS Modules implementation
Built-in @import handler
Built-in assets handler
Respects output.assetFileNames
Code splitting support
Ability to emit pure CSS for other plugins
Correct multiple instance support with check for already processed files
Support for implementation and fibers forcing for Sass
Support for partials and ~ in Less import statements
Sourcemaps include source content
Proper sourcemap generation for all loaders
Correct inline sourcemaps
Correct relative source paths in extracted sourcemaps
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, even ambitious ones

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 😎