Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
postcss-color-function
Advanced tools
PostCSS plugin to transform W3C CSS color function to more compatible CSS.
PostCSS plugin to transform CSS color function from editor draft of 'Color Module Level 4' specification to more compatible CSS.
⚠️ color()
was changed to color-mod()
. See postcss-color-mod-function.
There is a
color-mod
implementation.
⚠️ color-mod()
has been removed from Color Module Level 4 specification.
npm install postcss-color-function
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var colorFunction = require("postcss-color-function")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
// set preserveCustomProps to `false` by default `true`
//for delete declarations with custom properties
var output = postcss()
.use(colorFunction({preserveCustomProps: true}))
.process(css)
.css
Using this input.css
:
body {
background: color(red a(90%))
}
you will get:
body {
background: rgba(255, 0, 0, 0.9)
}
Checkout tests for examples.
color( [ <color> | <hue> ] <color-adjuster>* )
color-adjuster
[red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
[red( | green( | blue( | alpha( | a(] '*' <percentage> )
rgb( ['+' | '-'] [<number> | <percentage>]{3} )
rgb( ['+' | '-'] <hash-token> )
rgb( '*' <percentage> ) |
[hue( | h(] ['+' | '-' | '*']? <angle> )
[saturation( | s(] ['+' | '-' | '*']? <percentage> )
[lightness( | l(] ['+' | '-' | '*']? <percentage> )
[whiteness( | w(] ['+' | '-' | '*']? <percentage> )
[blackness( | b(] ['+' | '-' | '*']? <percentage> )
tint( <percentage> )
shade( <percentage> )
blend( <color> <percentage> [rgb | hsl | hwb]? )
blenda( <color> <percentage> [rgb | hsl | hwb]? )
contrast( <percentage>? )
Notes:
whatever {
color: color(red a(10%));
background-color: color(red lightness(50%)); /* == color(red l(50%)); */
border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}
currentcolor
so we can do color(currentcolor adjuster())
?No we cannot do that. currentcolor
depends on the cascade (so the DOM) and we can't handle that in a simple preprocessing step. You need to handle that with polyfills.
color(var(--mainColor) adjuster())
?By using postcss-custom-properties before this plugin, you can do that (sort of). You have some examples in cssnext playground.
lighten
and darken
are Sass specific methods and not supported by native CSS specs. The same functionality can be achieved with the tint and shade adjusters:
$lighten(red, 20%)
/* is equivalent to */
color(red tint(20%))
$darken(red, 20%)
/* is equivalent to */
color(red shade(20%))
FAQs
PostCSS plugin to transform W3C CSS color function to more compatible CSS.
The npm package postcss-color-function receives a total of 280,702 weekly downloads. As such, postcss-color-function popularity was classified as popular.
We found that postcss-color-function demonstrated a not healthy version release cadence and project activity because the last version was released 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
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.