{"id":13564097,"url":"https://github.com/postcss/postcss-simple-vars","last_synced_at":"2025-05-15T08:08:50.035Z","repository":{"id":26657284,"uuid":"30113569","full_name":"postcss/postcss-simple-vars","owner":"postcss","description":"PostCSS plugin for Sass-like variables","archived":false,"fork":false,"pushed_at":"2024-07-18T14:17:33.000Z","size":1332,"stargazers_count":419,"open_issues_count":4,"forks_count":36,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-10-29T14:38:20.246Z","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":".github/FUNDING.yml","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},"funding":{"open_collective":"postcss","github":"ai"}},"created_at":"2015-01-31T13:55:45.000Z","updated_at":"2024-10-23T19:46:25.000Z","dependencies_parsed_at":"2024-01-19T07:13:01.092Z","dependency_job_id":"d507f40b-96bf-47d6-b7a4-7fed026ee279","html_url":"https://github.com/postcss/postcss-simple-vars","commit_stats":{"total_commits":191,"total_committers":16,"mean_commits":11.9375,"dds":0.2146596858638743,"last_synced_commit":"c92b7838a7ed54fde2e4e51cc46276fc345680b6"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-simple-vars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-simple-vars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-simple-vars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-simple-vars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-simple-vars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246940071,"owners_count":20858072,"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-01T13:01:26.519Z","updated_at":"2025-04-03T16:09:24.478Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# PostCSS Simple Variables\n\n\u003cimg align=\"right\" width=\"135\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"https://postcss.org/logo-leftp.svg\"\u003e\n\n[PostCSS] plugin for Sass-like variables.\n\nYou can use variables inside values, selectors and at-rule parameters.\n\n```pcss\n$dir:    top;\n$blue:   #056ef0;\n$column: 200px;\n\n.menu_link {\n  background: $blue;\n  width: $column;\n}\n.menu {\n  width: calc(4 * $column);\n  margin-$(dir): 10px;\n}\n```\n\n```css\n.menu_link {\n  background: #056ef0;\n  width: 200px;\n}\n.menu {\n  width: calc(4 * 200px);\n  margin-top: 10px;\n}\n```\n\nIf you want be closer to W3C spec,\nyou should use [postcss-custom-properties] and [postcss-at-rules-variables] plugins.\n\nLook at [postcss-map] for big complicated configs.\n\n[postcss-at-rules-variables]: https://github.com/GitScrum/postcss-at-rules-variables\n[postcss-custom-properties]:  https://github.com/postcss/postcss-custom-properties\n[postcss-map]:                https://github.com/pascalduez/postcss-map\n[PostCSS]:                    https://github.com/postcss/postcss\n\n\u003ca href=\"https://evilmartians.com/?utm_source=postcss-simple-vars\"\u003e\n  \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n       alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n\n## Interpolation\n\nThere is special syntax for using variables inside CSS words:\n\n```pcss\n$prefix: my-company-widget\n\n$prefix { }\n$(prefix)_button { }\n```\n\n\n## Comments\n\nYou can use variables in comments too (for example, to generate special\n[mdcss] comments). Syntax for comment variables is different to separate\nthem from PreCSS code examples:\n\n```pcss\n$width: 100px;\n/* $width: \u003c\u003c$(width)\u003e\u003e */\n```\n\ncompiles to:\n\n```css\n/* $width: 100px */\n```\n\n[mdcss]: https://github.com/jonathantneal/mdcss\n\n\n## Escaping\n\nIf you want to escape `$` in the `content` property, use Unicode escape syntax.\n\n```css\n.foo::before {\n  content: \"\\0024x\";\n}\n```\n\nIf you want to use e.g. `:` in a selector variable, use the corresponding unicode escape sequence:\n\n```css\n/* Given */\n$selector: .my-component[data-emoji=\"\\U0001f389\"]\\u003Adisabled;\n\n$selector {\n  width: 1px;\n}\n\n/* Generates */\n.my-component[data-emoji=\"🎉\"]:disabled {\n  width: 1px;\n}\n```\n\nNote: Use `\\u` for 4-digit sequences and `\\U` for 8-digit sequences.\n\n## Usage\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss postcss-simple-vars\n```\n\n**Step 2:** Check your project for existing PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\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\nmodule.exports = {\n  plugins: [\n+   require('postcss-simple-vars'),\n    require('autoprefixer')\n  ]\n}\n```\n\n[official docs]: https://github.com/postcss/postcss#usage\n\n\n## Options\n\nCall plugin function to set options:\n\n```js\n    require('postcss-simple-vars')({ silent: true })\n```\n\n\n### `variables`\n\nSet default variables. It is useful to store colors or other constants\nin a common file:\n\n```js\n// config/colors.js\n\nmodule.exports = {\n  blue: '#056ef0'\n}\n\n// postcss.config.js\n\nconst colors = require('./config/colors')\nconst vars   = require('postcss-simple-vars')\n\nmodule.exports = {\n  plugins: [\n    require('postcss-simple-vars')({ variables: colors })\n  ]\n}\n```\n\nYou can use a function return an object, if you want to update default\nvariables in webpack hot reload:\n\n```js\n    require('postcss-simple-vars')({\n      variables: function () {\n        return require('./config/colors');\n      }\n    })\n```\n\n\n### `onVariables`\n\nCallback invoked once all variables in css are known. The callback receives\nan object representing the known variables, including those explicitly declared\nby the [`variables`](#variables) option.\n\n```js\n    require('postcss-simple-vars')({\n      onVariables (variables) {\n        console.log('CSS Variables');\n        console.log(JSON.stringify(variables, null, 2));\n      }\n    })\n```\n\n\n### `unknown`\n\nCallback on unknown variable name. It receives the node instance, variable name\nand PostCSS Result object.\n\n```js\n    require('postcss-simple-vars')({\n      unknown (node, name, result) {\n        node.warn(result, 'Unknown variable ' + name);\n      }\n    })\n])\n```\n\n\n### `silent`\n\nLeave unknown variables in CSS and do not throw an error. Default is `false`.\n\n\n### `only`\n\nSet value only for variables from this object.\nOther variables will not be changed. It is useful for PostCSS plugin developers.\n\n\n### `keep`\n\nKeep variables as is and not delete them. Default is `false`.\n\n\n## Messages\n\nThis plugin passes `result.messages` for each variable:\n\n```js\nconst result = await postcss([vars]).process('$one: 1; $two: 2')\nconsole.log(result.messages)\n```\n\nwill output:\n\n```js\n[\n  {\n    plugin: 'postcss-simple-vars',\n    type: 'variable',\n    name: 'one'\n    value: '1'\n  },\n  {\n    plugin: 'postcss-simple-vars',\n    type: 'variable',\n    name: 'two'\n    value: '2'\n  }\n]\n```\n\nYou can access this in `result.messages` and\nin any plugin that included after `postcss-simple-vars`.\n","funding_links":["https://opencollective.com/postcss","https://github.com/sponsors/ai"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-simple-vars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-simple-vars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-simple-vars/lists"}