{"id":15069940,"url":"https://github.com/mitsunee/postcss-split-colors","last_synced_at":"2025-04-10T17:09:26.557Z","repository":{"id":57328530,"uuid":"460889771","full_name":"Mitsunee/postcss-split-colors","owner":"Mitsunee","description":"PostCSS Plugin to destructure colors in custom properties","archived":false,"fork":false,"pushed_at":"2023-05-24T14:59:07.000Z","size":91,"stargazers_count":9,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T09:42:08.578Z","etag":null,"topics":["css","css3","css3-color","css3-properties","postcss","postcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/postcss-split-colors","language":"TypeScript","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/Mitsunee.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":"2022-02-18T14:43:56.000Z","updated_at":"2023-12-28T14:55:37.000Z","dependencies_parsed_at":"2024-10-23T12:09:20.745Z","dependency_job_id":null,"html_url":"https://github.com/Mitsunee/postcss-split-colors","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"26b91068e699cd746de53e1d1d31bc74d31b8d8c"},"previous_names":["mitsunee/postcss-split-colors","mitsunee/postcss-split-color-vars"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitsunee%2Fpostcss-split-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitsunee%2Fpostcss-split-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitsunee%2Fpostcss-split-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mitsunee%2Fpostcss-split-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mitsunee","download_url":"https://codeload.github.com/Mitsunee/postcss-split-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248260942,"owners_count":21074215,"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":["css","css3","css3-color","css3-properties","postcss","postcss-plugin"],"created_at":"2024-09-25T01:45:40.794Z","updated_at":"2025-04-10T17:09:26.537Z","avatar_url":"https://github.com/Mitsunee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-split-colors\n\n[PostCSS] plugin to destructure colors in custom properties.\n\nUse `!split` in the custom property color declaration you want to split.\n\n[postcss]: https://github.com/postcss/postcss\n\n```css\n:root {\n  --primary: rgb(14, 14, 14) !split;\n  --accent: hsl(0 80% 50% / 25%) !split;\n}\n```\n\n```css\n:root {\n  --primary-rgb: 14 14 14;\n  --primary: rgb(var(--primary-rgb));\n  --accent-rgb: 230 26 26;\n  --accent-hsl: 0deg 80% 50%;\n  --accent: hsl(var(--accent-hsl / 25%));\n}\n```\n\nCurrently the color functions `rgb()`, `hsl()`, `lch()`, `lab()`, `hwb()` and hex color (with 3, 4, 6 or 8 digits) are supported via [colord]. Alpha values are preserved by default (see options). Note that currently all values are converted to RGB internally, meaning there will be rounding errors in conversions involving non-sRGB color functions. This will be fixed in a future release.\n\n## Usage\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss postcss-split-colors\n```\n\n**Step 2:** Check your project for an existing PostCSS config: `postcss.config.js`\nin the project root.\n\nIf you do not use PostCSS, add it according to [official docs]\nand set this plugin in settings.\n\n**Step 3:** Add the plugin to plugins list:\n\n```diff\n+ const splitColors = require(\"postcss-split-colors\");\n\n  module.exports = {\n    plugins: [\n+     splitColors(/* pluginOptions */),\n      require(\"autoprefixer\")\n    ]\n  }\n```\n\n## Options\n\n### prompt\n\nModify the prompt text from `\"split\"` to any string. The preceeding `!` is added by the plugin:\n\n```js\n// postcss.config.js\nconst splitColors = require(\"postcss-split-colors\");\n\nmodule.exports = {\n  plugins: [splitColors({ prompt: \"foobar\" })]\n};\n```\n\n```css\n/* your-file.css */\n.selector {\n  --color: #ff8800 !foobar;\n}\n```\n\n### convert\n\nAdd additional color format conversions to every transformation:\n\n```js\n// postcss.config.js\nconst splitColors = require(\"postcss-split-colors\");\n\nmodule.exports = {\n  plugins: [splitColors({ convert: { rgb: true } })]\n};\n```\n\nAvailable keys: `rgb`, `hsl`, `lab`, `lch`, `hwb`. Hex colors are treated as RGB.\n\n### preserve\n\nPreserves the initial declaration, only removing the prompt. This is currently recommended if you find that you are getting rounding errors.\n\n```js\n// postcss.config.js\nconst splitColors = require(\"postcss-split-colors\");\n\nmodule.exports = {\n  plugins: [splitColors({ preserve: true })]\n};\n```\n\n### preserveAlpha\n\nPreserves the alpha value of the initial declaration, injecting only the split-off color property. This is enabled by default, and can be disabled with `false` (which omits the value in the transformed declaration):\n\n```js\n// postcss.config.js\nconst splitColors = require(\"postcss-split-colors\");\n\nmodule.exports = {\n  plugins: [splitColors({ preserveAlpha: false })]\n};\n```\n\n[official docs]: https://github.com/postcss/postcss#usage\n[colord]: https://github.com/omgovich/colord\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitsunee%2Fpostcss-split-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitsunee%2Fpostcss-split-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitsunee%2Fpostcss-split-colors/lists"}