Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
rollup-plugin-styles
Advanced tools
Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more
@import
statements inside regular CSS...and more!
# npm
npm install -D rollup-plugin-styles
# pnpm
pnpm add -D rollup-plugin-styles
# yarn
yarn add rollup-plugin-styles --dev
// 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.
/* Import from `node_modules` */
@import "bulma/css/bulma";
/* Local import */
@import "./custom";
/* ...or (if no package named `custom` in `node_modules`) */
@import "custom";
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 approptiate extension(s)), and then for custom
if _custom
doesn't exist.
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)})`],
});
styles({
mode: "extract",
// ... or with relative to output dir/output file's basedir (but not outside of it)
mode: ["extract", "awesome-bundle.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(),
],
};
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."),
});
Install corresponding dependency:
For Sass
support install node-sass
or sass
:
# npm
npm install -D node-sass
# pnpm
pnpm add -D node-sass
# yarn
yarn add node-sass --dev
# npm
npm install -D sass
# pnpm
pnpm add -D sass
# yarn
yarn add 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.
See API Reference for Options
for full list of available options.
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:
@import
handlerpreserveModules
and manualChunks
assetFileNames
for CSS file names~
in Less import statementsMIT © Anton Kudryavtsev
FAQs
Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more
The npm package rollup-plugin-styles receives a total of 28,159 weekly downloads. As such, rollup-plugin-styles popularity was classified as popular.
We found that rollup-plugin-styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.