Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

postcss-double-position-gradients

Package Overview
Dependencies
2
Maintainers
2
Versions
11
Issues
File Explorer

Advanced tools

postcss-double-position-gradients

Use double-position gradients in CSS

    3.1.2latest

Version published
Maintainers
2
Weekly downloads
6,602,917
decreased by-14.64%

Weekly downloads

Readme

Source

PostCSS Double Position Gradients PostCSS

NPM Version CSS Standard Status Discord

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

.linear-gradient { background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } /* becomes */ .linear-gradient { background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); }

Usage

Add PostCSS Double Position Gradients to your project:

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

Use PostCSS Double Position Gradients to process your CSS:

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

Or use it as a PostCSS plugin:

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

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

NodePostCSS CLIWebpackCreate React AppGulpGrunt

Options

preserve

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

postcssDoublePositionGradients({ preserve: false }) .linear-gradient { background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } /* becomes */ .linear-gradient { background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); } .conic-gradient { background-image: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg); }

enableProgressiveCustomProperties

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

⚠️ 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.

postcssDoublePositionGradients({ enableProgressiveCustomProperties: false }) :root { --a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%); } /* becomes */ :root { --a-gradient: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); /* will never be used, not even in older browser */ --a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%); }

Keywords

FAQs

What is postcss-double-position-gradients?

Use double-position gradients in CSS

Is postcss-double-position-gradients popular?

The npm package postcss-double-position-gradients receives a total of 5,300,663 weekly downloads. As such, postcss-double-position-gradients popularity was classified as popular.

Is postcss-double-position-gradients well maintained?

We found that postcss-double-position-gradients demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.

Last updated on 08 Jul 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc