npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ironkinoko/rollup-plugin-styles

v4.0.3

Published

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

Downloads

7,902

Readme

rollup-plugin-styles

npm version monthly downloads count required rollup version build status code coverage license financial contributors

🎨 Universal Rollup plugin for styles:

...and more!

Table of Contents

Installation

# npm
npm install -D rollup-plugin-styles
# pnpm
pnpm add -D rollup-plugin-styles
# yarn
yarn add rollup-plugin-styles --dev

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`
    // options for url handler accordingly.
    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 CSS is embedded inside JS and injected into <head> at runtime, 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.

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

In emit mode none of the exports are available as CSS is purely processed and passed along the build pipeline, which is useful if you want to preprocess CSS before using it with CSS consuming plugins, e.g. rollup-plugin-lit-css.

PostCSS configuration files will be found and loaded automatically, but this behavior is configurable using config option.

Importing a file

CSS/Stylus

/* Import from `node_modules` */
@import "bulma/css/bulma";
/* Local import */
@import "./custom";
/* ...or (if no package named `custom` in `node_modules`) */
@import "custom";

Sass/Less

You can prepend the path with ~ to resolve in node_modules:

// Import from `node_modules`
@import "~bulma/css/bulma";
// Local import
@import "./custom";
// ...or
@import "custom";

Also note that partials are considered first, e.g.

@import "custom";

Will look for _custom first (with the appropriate extension(s)), and then for custom if _custom doesn't exist.

CSS Injection

styles({
  mode: "inject", // Unnecessary, set by default
  // ...or with custom options for injector
  mode: [
    "inject",
    { container: "body", singleTag: true, prepend: true, attributes: { id: "global" } },
  ],
  // ...or with custom injector
  mode: ["inject", (varname, id) => `console.log(${varname},${JSON.stringify(id)})`],
});

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 custom regex
  autoModules: /\.mod\.\S+$/,
  // ...or custom function
  autoModules: id => id.includes(".modular."),
});

With Sass/Less/Stylus

Install corresponding dependency:

  • For Sass support install sass or node-sass:

    # npm
    npm install -D sass
    # pnpm
    pnpm add -D sass
    # yarn
    yarn add sass --dev
    # npm
    npm install -D node-sass
    # pnpm
    pnpm add -D node-sass
    # yarn
    yarn add node-sass --dev
  • For Less support install less:

    # npm
    npm install -D less
    # pnpm
    pnpm add -D less
    # yarn
    yarn add less --dev
  • For Stylus support install stylus:

    # npm
    npm install -D stylus
    # pnpm
    pnpm add -D stylus
    # yarn
    yarn add stylus --dev

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

Configuration

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

Why

Because alternatives did not look good enough - they are either too basic, too buggy or poorly maintained.

For example, the main alternative (and inspiration) is rollup-plugin-postcss, but at the time it is not actively maintained, has a bunch of critical bugs and subjectively lacks some useful features and quality of life improvements which should be a part of it.

With that said, here is the basic list of things which differentiate this plugin from the aforementioned one:

  • Written completely in TypeScript
  • Up-to-date CSS Modules implementation
  • Built-in @import handler
  • Built-in assets handler
  • Ability to emit pure CSS for other plugins
  • Complete code splitting support, with respect for multiple entries, preserveModules and manualChunks
  • Multiple instances support, with check for already processed files
  • Proper sourcemaps, with included sources content by default
  • Respects assetFileNames for CSS file names
  • Respects sourcemaps from loaded files
  • Support for implementation forcing for Sass
  • Support for partials and ~ in Less import statements
  • More smaller things that I forgot

License

MIT © Anton Kudryavtsev

Thanks