
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
@csstools/postcss-gradients-interpolation-method
Advanced tools
Use interpolation methods in CSS gradient functions
npm install @csstools/postcss-gradients-interpolation-method --save-dev
PostCSS Gradients Interpolation Method lets you use different interpolation methods in CSS gradient functions following CSS Images Module 4.
.example {
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}
:root {
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
/* becomes */
.example {
background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}
:root {
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
}
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
:root {
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
}
[!CAUTION] Color stops with only a color or only an interpolation hint are not supported.
For best results you should always provide at least the color and position for each color stop. Double position color stops are supported.
.foo {
/* Only a color: can't transform */
background-image: linear-gradient(in oklch, black 0%, green, blue 100%);
/* Only an interpolation hint: can't transform */
background-image: linear-gradient(in oklch, black 0%, 25%, blue 100%);
}
[!CAUTION] Variable colors are not supported. We can not mix colors when the color is a variable.
.foo {
--red: red;
/* Color stop variable : can't transform */
background-image: linear-gradient(in oklch, black 0%, var(--red), blue 100%);
}
Add PostCSS Gradients Interpolation Method to your project:
npm install postcss @csstools/postcss-gradients-interpolation-method --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssGradientsInterpolationMethod = require('@csstools/postcss-gradients-interpolation-method');
postcss([
postcssGradientsInterpolationMethod(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The preserve
option determines whether the original notation
is preserved. By default, it is preserved.
postcssGradientsInterpolationMethod({ preserve: false })
.example {
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}
:root {
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
/* becomes */
.example {
background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
}
:root {
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
}
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
tofalse
or if you bring your own fix for Custom Properties.
See what the plugin does in its README.
postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false })
.example {
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}
:root {
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
/* becomes */
.example {
background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}
:root {
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
Custom properties do not fallback to the previous declaration
FAQs
Use interpolation methods in CSS gradient functions
The npm package @csstools/postcss-gradients-interpolation-method receives a total of 1,622,607 weekly downloads. As such, @csstools/postcss-gradients-interpolation-method popularity was classified as popular.
We found that @csstools/postcss-gradients-interpolation-method demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.