{"id":16494848,"url":"https://github.com/stipsan/postcss-custom-properties-fallback","last_synced_at":"2025-09-29T08:30:38.553Z","repository":{"id":37019324,"uuid":"314561848","full_name":"stipsan/postcss-custom-properties-fallback","owner":"stipsan","description":"Adds fallbacks to your CSS var() functions","archived":false,"fork":false,"pushed_at":"2024-12-08T21:25:02.000Z","size":817,"stargazers_count":2,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-09T17:43:29.691Z","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/stipsan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-11-20T13:27:16.000Z","updated_at":"2023-03-04T05:53:27.000Z","dependencies_parsed_at":"2023-12-15T23:54:14.713Z","dependency_job_id":"d990dd73-47fb-4000-b5e4-2126b24ebd17","html_url":"https://github.com/stipsan/postcss-custom-properties-fallback","commit_stats":{"total_commits":110,"total_committers":5,"mean_commits":22.0,"dds":0.509090909090909,"last_synced_commit":"49a964a492762584998f8bee8fda5ff5c327af2b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-custom-properties-fallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-custom-properties-fallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-custom-properties-fallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stipsan%2Fpostcss-custom-properties-fallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stipsan","download_url":"https://codeload.github.com/stipsan/postcss-custom-properties-fallback/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234600991,"owners_count":18858546,"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-10-11T14:15:56.952Z","updated_at":"2025-09-29T08:30:38.212Z","avatar_url":"https://github.com/stipsan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Custom Properties Fallback\n\nThis plugins adds fallbacks to your [CSS Custom Properties] and works well as a compantion to [PostCSS Custom Properties].\n\n## Pop Quiz!\n\nIf we remove `--color` from `:root`, what color will `h1` have in modern browsers?\n\n```diff\n:root {\n-  --color: red;\n}\n\nbody {\n  color: green;\n}\n\nh1 {\n  color: red;\n  color: var(--color);\n}\n\n```\n\n### Red or green, expand the right answer (no cheating/googling!):\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eh1\u003c/code\u003e is \u003ccode\u003ered\u003c/code\u003e\u003c/summary\u003e\n\n![The text \"Wrong answer!\" over a cat screaming while firing an automatic rifle](https://user-images.githubusercontent.com/81981/99829641-d6766100-2b5c-11eb-9d0d-efaa7e45cd1b.gif)\n\nNope, it's `green`!\n\nIntuitively it's easy to think that if `--color` isn't defined, then the browser should skip the `color: var(--color)` and use the valid `color: red` above it.\nEspecially since this is what happens in [older browsers](https://caniuse.com/css-variables) that don't support [CSS Custom Properties].\n\nThe right answer is to use the second argument in `var()` (see [Example 10 in the spec](https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#substitute-a-var)), also known as the fallback argument:\n\n```css\ncolor: var(--color, red);\n```\n\nNow it works like expected. See the spec for [more information on how invalid/missing values are treated](https://www.w3.org/TR/css-variables-1/#invalid-variables).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eh1\u003c/code\u003e is \u003ccode\u003egreen\u003c/code\u003e\u003c/summary\u003e\n\n![The text \"Yes!\" over a smiling and nodding Jack Nicholson](https://user-images.githubusercontent.com/81981/99828721-9d89bc80-2b5b-11eb-9c73-9628a678194b.gif)\n\nRight answer! Check the wrong answer to learn why that is.\n\n\u003c/details\u003e\n\n## Usage\n\nAdd [PostCSS Custom Properties Fallback] to your project:\n\n```bash\nnpm install postcss-custom-properties-fallback --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssCustomPropertiesFallback = require('postcss-custom-properties-fallback');\n\npostcss([postcssCustomPropertiesFallback(/* pluginOptions */)]).process(\n  YOUR_CSS /*, processOptions */\n);\n```\n\n## Options\n\n### importFrom\n\nThe `importFrom` option is required. It works [like](https://github.com/postcss/postcss-custom-properties/blob/master/README.md#importfrom) from [CSS Custom Properties], except it doesn't support importing from CSS [yet](https://github.com/stipsan/postcss-custom-properties-fallback/blob/153ed0bed5684641e466a8c0197abbe587144f8b/src/import-from.js#L11).\n\n```js\npostcssCustomPropertiesFallback({\n  importFrom: { customProperties: { '--color': 'red' } },\n});\n```\n\n```pcss\nh1 {\n  color: var(--color);\n}\n\n/* becomes */\n\nh1 {\n  color: var(--color, red);\n}\n```\n\n[css custom properties]: https://www.w3.org/TR/css-variables-1/\n[postcss]: https://github.com/postcss/postcss\n[postcss custom properties]: https://github.com/postcss/postcss-custom-properties\n[postcss custom properties fallback]: https://github.com/stipsan/postcss-custom-properties-fallback\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstipsan%2Fpostcss-custom-properties-fallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstipsan%2Fpostcss-custom-properties-fallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstipsan%2Fpostcss-custom-properties-fallback/lists"}