{"id":13563776,"url":"https://github.com/csstools/postcss-env-function","last_synced_at":"2025-04-03T20:31:43.143Z","repository":{"id":46035098,"uuid":"115153932","full_name":"csstools/postcss-env-function","owner":"csstools","description":"Use env() variables in CSS","archived":true,"fork":false,"pushed_at":"2021-12-16T12:38:49.000Z","size":255,"stargazers_count":53,"open_issues_count":0,"forks_count":6,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-29T00:49:43.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-22T22:17:11.000Z","updated_at":"2025-03-03T14:58:26.000Z","dependencies_parsed_at":"2022-09-19T07:51:31.305Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-env-function","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-env-function","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-env-function/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-env-function/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-env-function/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-env-function/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246441643,"owners_count":20778070,"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:23.169Z","updated_at":"2025-04-03T20:31:43.110Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e⚠️ PostCSS Environment Variables was moved to \u003ca href=\"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function\"\u003e@csstools/postcss-plugins\u003c/a\u003e. ⚠️ \u003cbr\u003e\n\u003ca href=\"https://github.com/csstools/postcss-plugins/discussions/75\"\u003eRead the announcement\u003c/a\u003e\u003c/div\u003e\n\n# PostCSS Environment Variables [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/postcss-env-function.svg\" height=\"20\"\u003e][npm-url]\n[\u003cimg alt=\"CSS Standard Status\" src=\"https://cssdb.org/badge/environment-variables.svg\" height=\"20\"\u003e][css-url]\n[\u003cimg alt=\"Build Status\" src=\"https://github.com/csstools/postcss-env-function/workflows/test/badge.svg\" height=\"20\"\u003e][cli-url]\n[\u003cimg alt=\"Support Chat\" src=\"https://img.shields.io/badge/support-chat-blue.svg\" height=\"20\"\u003e][git-url]\n\n[PostCSS Environment Variables] lets you use `env()` variables in CSS, following the [CSS Environment Variables] specification.\n\n```pcss\n@media (max-width: env(--branding-small)) {\n  body {\n    padding: env(--branding-padding);\n  }\n}\n\n/* becomes */\n\n@media (min-width: 600px) {\n  body {\n    padding: 20px;\n  }\n}\n\n/* when the `importFrom` option is: {\n  \"environmentVariables\": {\n    \"--branding-small\": \"600px\",\n    \"--branding-padding\": \"20px\"\n  }\n} */\n```\n\n## Usage\n\nAdd [PostCSS Environment Variables] to your project:\n\n```bash\nnpm install postcss postcss-env-function --save-dev\n```\n\nUse [PostCSS Environment Variables] to process your CSS:\n\n```js\nconst postcssEnvFunction = require('postcss-env-function')\n\npostcssEnvFunction.process(YOUR_CSS /*, processOptions, pluginOptions */)\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss')\nconst postcssEnvFunction = require('postcss-env-function')\n\npostcss([\n  postcssEnvFunction(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */)\n```\n\n[PostCSS Environment Variables] runs in all Node environments, with special instructions for:\n\n| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### importFrom\n\nThe `importFrom` option specifies sources where Environment Variables can be imported from, which might be JS and JSON files, functions, and directly passed objects.\n\n```js\npostcssEnvFunction({\n  importFrom: 'path/to/file.js' /* module.exports = {\n      environmentVariables: {\n        '--branding-padding': '20px',\n        '--branding-small': '600px'\n      }\n    } */\n})\n```\n\n```pcss\n@media (max-width: env(--branding-small)) {\n  body {\n    padding: env(--branding-padding);\n  }\n}\n\n/* becomes */\n\n@media (min-width: 600px) {\n  body {\n    padding: 20px;\n  }\n}\n```\n\nMultiple sources can be passed into this option, and they will be parsed in the order they are received. JavaScript files, JSON files, functions, and objects will need to namespace Custom Properties using the `environmentVariables` or `environment-variables` key.\n\n```js\npostcssEnvFunction({\n  importFrom: [\n    /* Import from a CommonJS file:\n    \n    module.exports = {\n      environmentVariables: {\n        '--branding-padding': '20px'\n      }\n    } */\n    'path/to/file.js',\n\n    /* Import from a JSON file:\n\n    {\n      \"environment-variables\": {\n        \"--branding-padding\": \"20px\"\n      }\n    } */\n    'and/then/this.json',\n\n    /* Import from an JavaScript Object: */\n    {\n      environmentVariables: { '--branding-padding': '20px' }\n    },\n\n    /* Import from a JavaScript Function: */\n    () =\u003e {\n      const environmentVariables = { '--branding-padding': '20px' }\n\n      return { environmentVariables }\n    }\n  ]\n})\n```\n\nSee example imports written in [JS](test/import-variables.js) and [JSON](test/import-variables.json).\nCurrently only valid [custom property names] (beginning with `--`) are accepted.\nNot all valid [declaration value names] are accepted.\n\n[cli-url]: https://github.com/csstools/postcss-env-function/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#environment-variables\n[git-url]: https://gitter.im/postcss/postcss\n[npm-url]: https://www.npmjs.com/package/postcss-env-function\n\n[CSS Environment Variables]: https://drafts.csswg.org/css-env-1/\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Environment Variables]: https://github.com/csstools/postcss-env-function\n\n[custom property names]: https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name\n[declaration value names]: https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-env-function","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-env-function","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-env-function/lists"}