Wondering what’s next for npm?Check out our public roadmap! »

    postcss-double-position-gradients

    2.0.0 • Public • Published

    PostCSS Double Position Gradients PostCSS

    NPM Version CSS Standard Status Build Status Support Chat

    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:

    Node PostCSS CLI Webpack Create React App Gulp Grunt

    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(90degblack 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(90degblack 25%black 50%blue 50%blue 75%);
    }
     
    .conic-gradient {
      background-image: conic-gradient(yellowgreen 40%gold 0deggold 75%#f06 0deg);
    }

    Install

    npm i postcss-double-position-gradients

    DownloadsWeekly Downloads

    4,047,783

    Version

    2.0.0

    License

    CC0-1.0

    Unpacked Size

    19.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar