{"id":22994891,"url":"https://github.com/frehner/postcss-plugin-var-hash-postfix","last_synced_at":"2025-04-22T17:26:25.273Z","repository":{"id":267826721,"uuid":"902483836","full_name":"frehner/postcss-plugin-var-hash-postfix","owner":"frehner","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-12T23:32:39.000Z","size":82,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T13:51:35.949Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frehner.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":"2024-12-12T16:49:50.000Z","updated_at":"2025-01-12T23:09:36.000Z","dependencies_parsed_at":"2024-12-12T17:43:52.190Z","dependency_job_id":"94122b88-921f-4952-b6bd-11f779f2f087","html_url":"https://github.com/frehner/postcss-plugin-var-hash-postfix","commit_stats":null,"previous_names":["frehner/postcss-plugin-var-hash-postfix"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frehner%2Fpostcss-plugin-var-hash-postfix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frehner%2Fpostcss-plugin-var-hash-postfix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frehner%2Fpostcss-plugin-var-hash-postfix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frehner%2Fpostcss-plugin-var-hash-postfix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frehner","download_url":"https://codeload.github.com/frehner/postcss-plugin-var-hash-postfix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250286333,"owners_count":21405411,"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-12-15T05:27:41.152Z","updated_at":"2025-04-22T17:26:25.254Z","avatar_url":"https://github.com/frehner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Plugin Var Hash Postfix\n\nA PostCSS plugin to add hashes or other postfixes to your CSS Variables (CSS Custom Properties). Take your source CSS from\n\n```css\n--purple: rebeccapurple;\n\ndiv {\n  color: var(--purple);\n}\n```\n\nto\n\n```css\n--purple-abc123: rebeccapurple;\n\ndiv {\n  color: var(--purple-abc123);\n}\n```\n\nWill also transform CSS Variables declared using the [@property at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) synatx.\n\n## Setup\n\nInstall the `postcss-plugin-var-hash-postfix` package:\n\n```bash\nnpm i postcss-plugin-var-hash-postfix\n```\n\nAdd the `postcss-plugin-var-hash-postfix` plugin to your PostCSS config:\n\n```js\nimport postCssVarHashPostfix from \"postcss-plugin-var-hash-postfix\";\n\nawait postCss([\n  postCssVarHashPostfix({\n    hash: \"abc123\",\n  }),\n]);\n```\n\nSee [below](#config) for additional configuration and setup.\n\n## Why\n\nCSS Variables (CSS Custom Properties) are a great way to share config, styles, colors, etc. across an app, website, or framework; they even penetrate the shadow dom of custom web components.\n\nBut maybe you want to make it so some of your CSS Variables aren't easily overridden by other developers; perhaps you're using them for some config that's internal to your library but isn't meant to be used by external developers.\n\nThis plugin enables you to append a hash to your variables automatically, as often as each build if you want. This way the variable changes frequently enough to discourage use by others.\n\nOr, alternatively, you just want to add a hash to your CSS Variables for fun.\n\n## Config\n\nPlugin Options\n\n### `hash`\n\nThe hash to apply as a postfix to your CSS Variables. You can hardcode a hash and update it manually:\n\n```js\npostCssVarHashPostfix({\n  hash: \"abc123\",\n});\n```\n\nOr use an environment variable to change the hash on every build, such as:\n\n```js\npostCssVarHashPostfix({\n  hash: process.env.GIT_SHA,\n});\n```\n\nIf you don't want a full-length SHA for the hash, add the [maxLength](#maxlength) option as well.\n\n#### Falsy `hash`\n\nIf the hash is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) (`''`, `false`, `null`, `undefined`, etc.), then **no hash is appended**.\n\nThis is intended to help you easily skip appending a hash (e.g. for local development) while still applying a hash at build time.\n\nNote: when `hash` is falsy, the plugin will bail early and not apply any other config options.\n\n### `maxLength`\n\nWill truncate your hashes to a specific length, so you don't have to do it manually.\n\n```js\n// input: --test: rebeccapurple;\n\npostCssVarHashPostfix({\n  hash: \"1234567890\",\n  maxLength: 5,\n});\n\n// output: --test-12345: rebeccapurple;\n```\n\n### `ignorePrefixes`\n\nAn array of strings for which any CSS Variable that starts with the prefix will not have a hash appended to them. This allows you to provide CSS Variables that are intended to be used by other developers, while still protecting the CSS Variables you don't intend to be part of your public API.\n\n```js\n// input: --ignore: blue; --test: green;\n\npostCssVarHashPostfix({\n  hash: \"123abc\",\n  ignorePrefixes: [\"ignore\"],\n});\n\n// output: --ignore: blue; --test-abc123: green;\n```\n\nNote that this option will ignore _anything_ that starts with the string; with the example above, both `--ignore` and `--ignorethis` would not have a hash appended to them.\n\n### `delimiter`\n\nCustomize the delimiter used to separate the existing CSS Variable name and the hash.\n\n```js\n// input: --test: rebeccapurple;\n\npostCssVarHashPostfix({\n  hash: \"123abc\",\n  delimiter: \"_\",\n});\n\n// output: --test_123abc: rebeccapurple;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrehner%2Fpostcss-plugin-var-hash-postfix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrehner%2Fpostcss-plugin-var-hash-postfix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrehner%2Fpostcss-plugin-var-hash-postfix/lists"}