Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@csstools/postcss-hwb-function
Advanced tools
@csstools/postcss-hwb-function is a PostCSS plugin that allows you to use the HWB (Hue, Whiteness, Blackness) color function in your CSS. This function is part of the CSS Color Module Level 4 specification and provides an alternative way to define colors, which can be more intuitive for certain use cases.
Using HWB color function
This feature allows you to use the HWB color function in your CSS. The plugin will transform the HWB function into an equivalent RGB value.
/* Input CSS */
.example {
color: hwb(90 0% 0%);
}
/* Output CSS */
.example {
color: rgb(128, 255, 0);
}
Custom properties with HWB
You can define custom properties using the HWB function, and the plugin will convert these to RGB values, allowing you to use them throughout your CSS.
/* Input CSS */
:root {
--main-color: hwb(200 30% 40%);
}
.example {
color: var(--main-color);
}
/* Output CSS */
:root {
--main-color: rgb(77, 102, 153);
}
.example {
color: var(--main-color);
}
postcss-color-function is a PostCSS plugin that allows you to use color-modifying functions in your CSS, such as color(), which can adjust colors by lightness, saturation, and more. It provides broader functionality for color manipulation compared to @csstools/postcss-hwb-function, which focuses specifically on the HWB color function.
postcss-preset-env is a PostCSS plugin that allows you to use modern CSS features, including color functions like hwb(), today. It includes a wide range of CSS features and polyfills, making it a more comprehensive solution for modern CSS development compared to the more focused @csstools/postcss-hwb-function.
npm install @csstools/postcss-hwb-function --save-dev
PostCSS HWB Function lets you use the hwb()
color function in CSS, following CSS Color Module 4.
a {
color: hwb(194 0% 0%);
}
b {
color: hwb(194 0% 0% / .5);
}
/* becomes */
a {
color: rgb(0, 196, 255);
}
b {
color: rgba(0, 196, 255, 0.5);
}
Add PostCSS HWB Function to your project:
npm install postcss @csstools/postcss-hwb-function --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssHWBFunction = require('@csstools/postcss-hwb-function');
postcss([
postcssHWBFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssHWBFunction({ preserve: true })
a {
color: hwb(194 0% 0%);
}
b {
color: hwb(194 0% 0% / .5);
}
/* becomes */
a {
color: rgb(0, 196, 255);
color: hwb(194 0% 0%);
}
b {
color: rgba(0, 196, 255, 0.5);
color: hwb(194 0% 0% / .5);
}
FAQs
Use hwb() color functions in CSS
We found that @csstools/postcss-hwb-function 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.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.