Copy .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);
}
Copy npm install postcss-double-position-gradients --save-dev
Copy const postcssDoublePositionGradients = require ( 'postcss-double-position-gradients' );
postcssDoublePositionGradients .process ( YOUR_CSS /*, processOptions, pluginOptions */ );
Copy const postcss = require ( 'postcss' );
const postcssDoublePositionGradients = require ( 'postcss-double-position-gradients' );
postcss ([
postcssDoublePositionGradients ( /* pluginOptions */ )
]) .process ( YOUR_CSS /*, processOptions */ );
Copy postcssDoublePositionGradients ({ preserve : false })
Copy .linear-gradient {
background-image : linear-gradient (90 deg , black 25 % 50 % , blue 50 % 75 % ) ;
}
.conic-gradient {
background-image : conic-gradient (yellowgreen 40 % , gold 0 deg 75 % , #f06 0 deg ) ;
}
/* becomes */
.linear-gradient {
background-image : linear-gradient (90 deg , black 25 % , black 50 % , blue 50 % , blue 75 % ) ;
}
.conic-gradient {
background-image : conic-gradient (yellowgreen 40 % , gold 0 deg , gold 75 % , #f06 0 deg ) ;
}