{"id":19332471,"url":"https://github.com/yuchi/postcss-color-mod","last_synced_at":"2026-06-25T12:31:17.493Z","repository":{"id":140783845,"uuid":"75769998","full_name":"yuchi/postcss-color-mod","owner":"yuchi","description":"PostCSS Polyfill for color-mod() — :warning: Experimental","archived":false,"fork":false,"pushed_at":"2016-12-06T22:54:08.000Z","size":8,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-06T08:46:24.611Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-06T20:46:46.000Z","updated_at":"2017-11-15T12:26:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"d80fd1f1-0b04-477f-a5b1-b034d854a739","html_url":"https://github.com/yuchi/postcss-color-mod","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuchi%2Fpostcss-color-mod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuchi%2Fpostcss-color-mod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuchi%2Fpostcss-color-mod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuchi%2Fpostcss-color-mod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuchi","download_url":"https://codeload.github.com/yuchi/postcss-color-mod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240434298,"owners_count":19800550,"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-11-10T02:45:57.336Z","updated_at":"2025-11-04T12:01:52.599Z","avatar_url":"https://github.com/yuchi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"PostCSS `color-mod()` Polyfill\n==============================\n\n\u003cimg align=\"right\" width=\"95\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\n\n[PostCSS](https://github.com/postcss/postcss) plugin for [`color-mod()`][color-mod] current draft.\n\n\u003e :warning: **Attention!** :warning:\n\u003e\n\u003e The specification is a draft and very in flux.\n\u003e Also I honestly made this project to see if custom properties cascade can be polyfilled.\n\nThe `color-mod()` function let colors to be modified by applying _adjusters_ in a fashion very similar to how _transforms_ are applied. If you are curious I suggest to have a look at the [current draft][color-mod].\n\nIf you are thinking «we can do that already in SCSS/Less/Stylus!» Well, yes and no. If you apply `color-mod` to constant colors then you get nothing more than a standard preprocessor can give you. **But** if you know what CSS Custom Properties (a.k.a. CSS Variables) are then you need to know that `color-mod` works with them too, at runtime.\n\nThis plugin is an experiment to both personally test the spec and to try to polyfill the dynamic behaviour of `color-mod` in browsers that support CSS Custom Properties natively.\n\n[color-mod]: https://drafts.csswg.org/css-color/#modifying-colors\n\n## Example\n\n```css\n/* Input */\n\n.btn {\n  color: color-mod(red saturation(50%) lightness(+ 10%));\n  /*               ─┬─ ─┬───────────── ─┬──────────────             */\n  /*                │   │               ╰─ _add_ 0.1 of lightness   */\n  /*                │   ╰─ _set_ the saturation to 0.5              */\n  /*                ╰─ start from red (_base color_)                */\n}\n```\n\n```css\n/* Output */\n\n.btn {\n  background: #cc6666;\n}\n```\n\n## Support for CSS Custom Properties\n\nTo support custom properties (since we can’t know all the values before hand!) we need to somehow bring the computation to the browser too.\n\nThe idea is to build a JS library to include in the client along-side the stylesheet. Something similar to what [css modules](https://github.com/css-modules/postcss-modules) need to do in order for namespaced names to get mapped in JavaScript code.\n\nThe final usage will be somewhat similar to this:\n\n```js\n// you import the library\nimport applyProperties from 'color-mod-polyfill';\n// you import your definitions\nimport { customPropertiesDefinitions } from './path/to/my.css';\n\n// and later with an element…\napplyProperties(document.body, customPropertiesDefinitions, {\n  tint: '#f00'\n});\n```\n\nThis will work because this css:\n\n```css\n.btn {\n  background: color-mod(var(--tint) lightness(- 10%));\n}\n```\n\nwill be converted to:\n\n```css\n.btn {\n  background: var(--1oszj_tint_l_m_10p);\n}\n```\n\nand:\n\n```json\n{\n  \"triggers\": {\n    \"--tint\": [ \"--1oszj_tint_l_m_10p\" ]\n  },\n  \"definitions\": {\n    \"--1oszj_tint_l_m_10p\": {\n      \"base\": \"--tint\",\n      \"adjusters\": [\n        {\n          \"type\": \"lightness\", \"value\": \"10%\", \"operator\": \"-\"\n        }\n      ]\n    }\n  }\n}\n```\n\nAll of this should give us the required information to calculate dependencies at runtime.\n\n## To do (a lot)\n\n- [x] Minimal support for constant adjusting\n- [ ] Spec compliant parsing of values\n- [ ] Minimal support for all adjusters\n- [ ] Perfect spec compliant support for all adjusters\n- [ ] Define a road for multiple variables dependencies (`blend()`)\n- [x] Identification with unique ids for runtime-dependent expressions\n- [ ] Definition creation and aggregation\n- [ ] Check with css-modules compatibility (do they support scoped custom properties?)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuchi%2Fpostcss-color-mod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuchi%2Fpostcss-color-mod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuchi%2Fpostcss-color-mod/lists"}