Socket
Socket
Sign inDemoInstall

postcss-double-position-gradients

Package Overview
Dependencies
7
Maintainers
3
Versions
21
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

postcss-double-position-gradients

Use double-position gradients in CSS

    5.0.4latest
    GitHub
    npm

Version published
Maintainers
3
Weekly downloads
5,978,890
increased by2.25%

Weekly downloads

Readme

Source

PostCSS Double Position Gradients PostCSS

NPM Version Discord

Baseline Status CSS Standard Status

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 CLIWebpackGulpGrunt

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.

[!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.

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

Last updated on 19 Feb 2024

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc