npmpackage.info

Gathering detailed insights and metrics for @ironkinoko/rollup-plugin-styles

@ironkinoko/rollup-plugin-styles

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

4.0.3

246

MIT

TypeScript

475.04 kB

75,814 2.6

Installations

npm install @ironkinoko/rollup-plugin-styles

Pull Requests

Open

17

Total

153

Closed

113

Merged

23

Issues

Open

49

Total

85

Closed

36

Releases

v4.0.0

Published on 14 Jan 2022

v3.14.1

Published on 28 Jan 2021

v3.14.0

Published on 25 Jan 2021

v3.13.0

Published on 24 Jan 2021

v3.12.2

Published on 11 Jan 2021

v3.12.1

Published on 30 Dec 2020

View all 97 releases

Developer

Anidetrix

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

^12.20.0 || ^14.13.1 || >=16.0.0

Typescript Support

Yes

Node Version

16.13.1

NPM Version

8.1.2 Statistics

246 Stars

478 Commits

42 Forks

3 Watching

12 Branches

12 Contributors

Updated on 04 Nov 2024

Bundle Size

2.64 MB

Minified

475.04 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (87.37%)

JavaScript (8.8%)

CSS (1.57%)

SCSS (1.51%)

Less (0.37%)

Stylus (0.18%)

Shell (0.13%)

Sass (0.07%)

Total Downloads

Cumulative downloads

Total Downloads

75,814

Last day

86.8%

553

Compared to previous day

Last week

88.8%

2,324

Compared to previous week

Last month

10.1%

8,527

Compared to previous month

Last year

308.1%

60,893

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

rollup-plugin-styles

🎨 Universal Rollup plugin for styles:

PostCSS
Sass
Less
Stylus
CSS Modules
URL resolving/rewriting with asset handling
Ability to use @import statements inside regular CSS

...and more!

Installation
Usage
Configuration
Why
License
Thanks

Installation

1# npm
2npm install -D rollup-plugin-styles
3# pnpm
4pnpm add -D rollup-plugin-styles
5# yarn
6yarn add rollup-plugin-styles --dev

Usage

1// rollup.config.js
2import styles from "rollup-plugin-styles";
3
4export default {
5  output: {
6    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
7    // Note: using value below will put `.css` files near js,
8    // but make sure to adjust `hash`, `assetDir` and `publicPath`
9    // options for url handler accordingly.
10    assetFileNames: "[name]-[hash][extname]",
11  },
12  plugins: [styles()],
13};

After that you can import CSS files in your code:

1import "./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.

1// Injects CSS, also available as `style` in this example
2import style from "./style.css";
3// Using named export of CSS string
4import { 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

1/* Import from `node_modules` */
2@import "bulma/css/bulma";
3/* Local import */
4@import "./custom";
5/* ...or (if no package named `custom` in `node_modules`) */
6@import "custom";

Sass/Less

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

1// Import from `node_modules`
2@import "~bulma/css/bulma";
3// Local import
4@import "./custom";
5// ...or
6@import "custom";

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

1@import "custom";

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

CSS Injection

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

CSS Extraction

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

Emitting processed CSS

1// rollup.config.js
2import styles from "rollup-plugin-styles";
3
4// Any plugin which consumes pure CSS
5import litcss from "rollup-plugin-lit-css";
6
7export default {
8  plugins: [
9    styles({ mode: "emit" }),
10
11    // Make sure to list it after this one
12    litcss(),
13  ],
14};

CSS Modules

1styles({
2  modules: true,
3  // ...or with custom options
4  modules: {},
5  // ...additionally using autoModules
6  autoModules: true,
7  // ...with custom regex
8  autoModules: /\.mod\.\S+$/,
9  // ...or custom function
10  autoModules: id => id.includes(".modular."),
11});

With Sass/Less/Stylus

Install corresponding dependency:

For Sass support install sass or node-sass:

1# npm
2npm install -D sass
3# pnpm
4pnpm add -D sass
5# yarn
6yarn add sass --dev

1# npm
2npm install -D node-sass
3# pnpm
4pnpm add -D node-sass
5# yarn
6yarn add node-sass --dev

For Less support install less:

1# npm
2npm install -D less
3# pnpm
4pnpm add -D less
5# yarn
6yarn add less --dev

For Stylus support install stylus:

1# npm
2npm install -D stylus
3# pnpm
4pnpm add -D stylus
5# yarn
6yarn 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

Thanks

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cov.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/cov.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cov.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/cov.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cov.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/cov.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cov.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/cov.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Anidetrix/rollup-plugin-styles/release.yml/main?enable=pin
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@ironkinoko/rollup-plugin-styles

Installations

Pull Requests

17

153

113

23

Issues

49

85

36

Releases

Developer

Developer Guide

CommonJS

^12.20.0 || ^14.13.1 || >=16.0.0

Yes

16.13.1

8.1.2

Statistics

Bundle Size

2.64 MB

475.04 kB

Languages

Total Downloads

75,814

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

rollup-plugin-styles

🎨 Universal Rollup plugin for styles:

Table of Contents

Installation

Usage

Importing a file

CSS/Stylus

Sass/Less

CSS Injection

CSS Extraction

Emitting processed CSS

CSS Modules

With Sass/Less/Stylus

Configuration

Why

License

Thanks

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10