{"id":13526970,"url":"https://github.com/postcss/postcss-color-function","last_synced_at":"2025-05-16T02:08:46.658Z","repository":{"id":21236971,"uuid":"24552303","full_name":"postcss/postcss-color-function","owner":"postcss","description":"PostCSS plugin to transform W3C CSS color function to more compatible CSS","archived":false,"fork":false,"pushed_at":"2021-09-30T23:34:51.000Z","size":33,"stargazers_count":325,"open_issues_count":14,"forks_count":31,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-29T14:38:24.675Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-28T06:42:26.000Z","updated_at":"2024-09-24T10:29:51.000Z","dependencies_parsed_at":"2022-09-09T05:11:01.909Z","dependency_job_id":null,"html_url":"https://github.com/postcss/postcss-color-function","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-color-function","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-color-function/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-color-function/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-color-function/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-color-function/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657765,"owners_count":20974450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:38.584Z","updated_at":"2025-04-08T12:09:19.673Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# postcss-color-function [![Build Status](https://travis-ci.org/postcss/postcss-color-function.svg)](https://travis-ci.org/postcss/postcss-color-function)\n\n[PostCSS](https://github.com/postcss/postcss) plugin to transform CSS color function from editor draft of 'Color Module Level 4' specification to more compatible CSS.\n\n## Deprecated\n\n**⚠️ `color()` was changed to `color-mod()`. See [postcss-color-mod-function](https://github.com/jonathantneal/postcss-color-mod-function).**\n\n\u003e There is a\n  [`color-mod`](https://github.com/jonathantneal/postcss-color-mod-function)\n  implementation.\n\n**⚠️ `color-mod()` has been removed from [Color Module Level 4 specification](https://www.w3.org/TR/css-color-4/#changes-from-20160705).**\n\n## Installation\n\n```console\nnpm install postcss-color-function\n```\n\n## Usage\n\n```js\n// dependencies\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar colorFunction = require(\"postcss-color-function\")\n\n// css to be processed\nvar css = fs.readFileSync(\"input.css\", \"utf8\")\n\n// process css\n// set preserveCustomProps to `false` by default `true`\n//for delete declarations with custom properties\nvar output = postcss()\n  .use(colorFunction({preserveCustomProps: true}))\n  .process(css)\n  .css\n```\n\nUsing this `input.css`:\n\n```css\nbody {\n  background: color(red a(90%))\n}\n\n```\n\nyou will get:\n\n```css\nbody {\n  background: rgba(255, 0, 0, 0.9)\n}\n```\n\nCheckout [tests](test) for examples.\n\n## Interface (according to CSS specs)\n\n```\ncolor( [ \u003ccolor\u003e | \u003chue\u003e ] \u003ccolor-adjuster\u003e* )\n```\n\n### List of `color-adjuster`\n\n- `[red( | green( | blue( | alpha( | a(] ['+' | '-']? [\u003cnumber\u003e | \u003cpercentage\u003e] )`\n- `[red( | green( | blue( | alpha( | a(] '*' \u003cpercentage\u003e )`\n- ~~`rgb( ['+' | '-'] [\u003cnumber\u003e | \u003cpercentage\u003e]{3} )`~~ @todo\n- ~~`rgb( ['+' | '-'] \u003chash-token\u003e )`~~ @todo\n- ~~`rgb( '*' \u003cpercentage\u003e ) |`~~ @todo\n- `[hue( | h(] ['+' | '-' | '*']? \u003cangle\u003e )`\n- `[saturation( | s(] ['+' | '-' | '*']? \u003cpercentage\u003e )`\n- `[lightness( | l(] ['+' | '-' | '*']? \u003cpercentage\u003e )`\n- `[whiteness( | w(] ['+' | '-' | '*']? \u003cpercentage\u003e )`\n- `[blackness( | b(] ['+' | '-' | '*']? \u003cpercentage\u003e )`\n- `tint( \u003cpercentage\u003e )`\n- `shade( \u003cpercentage\u003e )`\n- `blend( \u003ccolor\u003e \u003cpercentage\u003e [rgb | hsl | hwb]? )`\n- ~~`blenda( \u003ccolor\u003e \u003cpercentage\u003e [rgb | hsl | hwb]? )`~~ @todo\n- `contrast( \u003cpercentage\u003e? )`\n\nNotes:\n\n- some adjusts have shortcuts,\n- can be used on every value on any property,\n- some values can use add/subtract/scale modifiers or a direct value.\n\n### Examples\n\n```css\nwhatever {\n  color: color(red a(10%));\n\n  background-color: color(red lightness(50%)); /* == color(red l(50%)); */\n\n  border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));\n}\n```\n\n## FAQ\n\n### Can you support `currentcolor` so we can do `color(currentcolor adjuster())`?\n\nNo 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.\n\n### Can we use CSS custom properties so we can do `color(var(--mainColor) adjuster())`?\n\nBy using [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) before this plugin, you can do that (sort of).\nYou have some examples in [cssnext playground](http://cssnext.io/playground/).\n\n## Notes for former Sass users\n\n`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](https://drafts.csswg.org/css-color/#tint-shade-adjusters):\n\n```css\n$lighten(red, 20%)\n/*  is equivalent to */\ncolor(red tint(20%))\n\n$darken(red, 20%)\n/*  is equivalent to */\ncolor(red shade(20%))\n```\n\n---\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-color-function","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-color-function","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-color-function/lists"}