npmpackage.info

Gathering detailed insights and metrics for postcss-double-position-gradients

postcss-double-position-gradients

PostCSS Tools and Plugins

6.0.0

931

MIT-0

CSS

4.66 kB

1,389,489,131 5.9

Installations

npm install postcss-double-position-gradients

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

22.1.0

NPM Version

10.7.0 Pull Requests

Open

2

Total

1,161

Closed

154

Merged

1,005

Issues

Open

5

Total

351

Closed

346

Releases

Unable to fetch releases

Contributors

131

View all 131 contributors

Languages

CSS

JavaScript

TypeScript

HTML

Nunjucks

Shell

SCSS

CSS (43.37%)

JavaScript (30.22%)

TypeScript (22.76%)

HTML (3.06%)

Nunjucks (0.48%)

Shell (0.1%)

Developer

csstools

Download Statistics

Total Downloads

1,389,489,131

Last Day

1,006,387

Last Week

4,651,034

Last Month

21,343,104

Last Year

286,384,507

GitHub Statistics

931 Stars

4,164 Commits

73 Forks

11 Watching

3 Branches

131 Contributors

Bundle Size

28.50 kB

Minified

4.66 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/csstools https://opencollective.com/csstools

Maintainers

Package Meta Information

Latest Version

6.0.0

Package Id

postcss-double-position-gradients@6.0.0

Unpacked Size

11.50 kB

Size

3.85 kB

File Count

NPM Version

10.7.0

Node Version

22.1.0

Publised On

03 Aug 2024

Total Downloads

Cumulative downloads

Total Downloads

1,389,489,131

Last day

-6.7%

1,006,387

Compared to previous day

Last week

-18.4%

4,651,034

Compared to previous week

Last month

5.8%

21,343,104

Compared to previous month

Last year

-13.7%

286,384,507

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@csstools/postcss-progressive-custom-properties @csstools/utilities postcss-value-parser

Peer Dependencies

postcss

Versions

PostCSS Double Position Gradients

PostCSS Double Position Gradients lets you use double-position gradients in CSS, following the CSS Image Values and Replaced Content specification.

1.linear-gradient {
2  background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
3}
4
5.conic-gradient {
6  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
7}
8
9/* becomes */
10
11.linear-gradient {
12  background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
13  background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
14}
15
16.conic-gradient {
17  background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg);
18  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
19}

Usage

Add PostCSS Double Position Gradients to your project:

1npm install postcss-double-position-gradients --save-dev

Use PostCSS Double Position Gradients to process your CSS:

1const postcssDoublePositionGradients = require('postcss-double-position-gradients');
2
3postcssDoublePositionGradients.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssDoublePositionGradients = require('postcss-double-position-gradients');
3
4postcss([
5  postcssDoublePositionGradients(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

PostCSS Double Position Gradients runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Gulp	Grunt

Options

preserve

The preserve option determines whether the original double-position gradients should be preserved. By default, double-position gradients are preserved.

1postcssDoublePositionGradients({ preserve: false })

1.linear-gradient {
2  background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
3}
4
5.conic-gradient {
6  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
7}
8
9/* becomes */
10
11.linear-gradient {
12  background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
13}
14
15.conic-gradient {
16  background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg);
17}

enableProgressiveCustomProperties

The enableProgressiveCustomProperties option determines whether the original notation is wrapped with @supports when used in Custom Properties. By default, it is enabled.

[!NOTE] We only recommend disabling this when you set preserve to false or if you bring your own fix for Custom Properties.
See what the plugin does in its README.

1postcssDoublePositionGradients({ enableProgressiveCustomProperties: false })

1:root {
2	--a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
3}
4
5/* becomes */
6
7:root {
8	--a-gradient: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); /* will never be used, not even in older browser */
9	--a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
10}

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

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

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

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

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

7

SAST

Determines if the project uses static code analysis.

3

Branch-Protection

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

3

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 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labeler.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/labeler.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/test.yml:98
Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
Info: 6 out of 7 npmCommand dependencies pinned

0

Code-Review

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

0

CII-Best-Practices

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

0

Token-Permissions

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

0

Fuzzing

Determines if the project uses fuzzing.

Score

5.9

/10

Last Scanned on 2025-02-03

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