{"id":15391920,"url":"https://github.com/scrum/postcss-envariables","last_synced_at":"2026-04-20T13:03:21.263Z","repository":{"id":57144484,"uuid":"168166852","full_name":"Scrum/postcss-envariables","owner":"Scrum","description":"PostCss plugin to use environment variables in CSS","archived":false,"fork":false,"pushed_at":"2019-02-04T07:43:39.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-31T19:54:28.028Z","etag":null,"topics":["css","env","envariables","postcss","postcss-plugin","webpack4"],"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/Scrum.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-29T14:19:21.000Z","updated_at":"2021-09-07T07:36:53.000Z","dependencies_parsed_at":"2022-09-06T08:53:42.276Z","dependency_job_id":null,"html_url":"https://github.com/Scrum/postcss-envariables","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Scrum/postcss-envariables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-envariables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-envariables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-envariables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-envariables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Scrum","download_url":"https://codeload.github.com/Scrum/postcss-envariables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fpostcss-envariables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32048446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","env","envariables","postcss","postcss-plugin","webpack4"],"created_at":"2024-10-01T15:13:30.245Z","updated_at":"2026-04-20T13:03:21.222Z","avatar_url":"https://github.com/Scrum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-envariables \u003ca href=\"https://github.com/postcss/postcss\"\u003e\u003cimg align=\"left\" height=\"49\" title=\"PostCSS\" src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\u003c/a\u003e\n\u003e [PostCSS](https://github.com/postcss/postcss) plugin to transform environment variables in CSS.\n\n[![Travis Build Status](https://img.shields.io/travis/Scrum/postcss-envariables/master.svg?style=flat-square\u0026label=unix\u0026logo=travis)](https://travis-ci.org/Scrum/postcss-envariables)[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/GitScrum/postcss-envariables/master.svg?style=flat-square\u0026label=windows\u0026logo=appveyor)](https://ci.appveyor.com/project/GitScrum/postcss-envariables)[![](https://img.shields.io/node/v/postcss-envariables.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/postcss-envariables.svg?style=flat-square\u0026logo=npm)](https://www.npmjs.com/package/postcss-envariables)[![Dependency Status](https://david-dm.org/Scrum/postcss-envariables.svg?style=flat-square)](https://david-dm.org/scrum/postcss-envariables)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/xojs/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/postcss-envariables.svg?style=flat-square)](https://coveralls.io/r/Scrum/postcss-envariables)\n\n[![npm downloads](https://img.shields.io/npm/dm/postcss-envariables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-envariables)[![npm](https://img.shields.io/npm/dt/postcss-envariables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-envariables)\n\n\n## Why?\nAdds the ability to use a environment variables in CSS.\n\n*Used in conjunction with the plugin ```postcss-css-variables```*\n\n## Install\n\n```bash\n$ npm install postcss-envariables\n```\n\n\u003e **Note:** This project is compatible with node v6+\n\n## Usage\n\n```js\n// Dependencies\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport env from 'postcss-envariables';\nimport cssVariables from 'postcss-css-variables';\n\n// CSS to be processed\nconst css = fs.readFileSync('css/input.css', 'utf8');\n\n// Process CSS\nconst output = postcss(css)\n    .use(env({ /* env: { contextPath: path/to/file } */ }))\n    .use(cssVariables())\n    .css;\n\nconsole.log(output);\n```\n\n*Use before plugin ```postcss-css-variables```.*  \n\n# Example\n\n## Node\n\n```js\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport env from 'postcss-envariables';\nimport cssVariables from 'postcss-css-variables';\n\nconst css = fs.readFileSync('css/input.css', 'utf8');\n\nconst output = postcss(css)\n    .use(env({env: {contextPath: 'dev'}}))\n    .use(cssVariables())\n    .css;\n\nconsole.log(output);\n```\n\n```css\n/* input.css */\n:root {\n    --contextPath: env.contextPath;\n}\n\n.selector {\n    backgrount-image: url('var(--contextPath)/image.png');\n}\n```\n\n```css\n/* Output example */\n.selector {\n    backgrount-image: url('dev/image.png');\n}\n\n```\n\n## Webpack -\u003e [demo](https://github.com/inside-demo/webpack-postcss-envariables-demo)\n*```package.json```*\n```json\n\"scripts\": {\n    \"build\": \"webpack --mode=development\"\n}\n```\n\n*```postcss.config.js```*\n```js\nmodule.exports = ({options: {env}}) =\u003e {\n    return {\n        plugins: {\n            'postcss-envariables': {\n                env: {\n                    contextPath: env === 'development' ? 'dev' : ''\n                }\n            },\n            'postcss-css-variables': {}\n        }\n    };\n};\n```\n\n*```webpack.config.js```*\n```js\nmodule.exports = (env, argv) =\u003e ({\n    mode: argv.mode,\n    module: {\n        rules: [\n            {\n                test: /\\.css$/,\n                use: [\n                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            config: {\n                                ctx: {\n                                    env: argv.mode\n                                }\n                            }\n                        }\n                    }\n                ]\n            }\n        ]\n    }\n});\n```\n\n*```input.css```*\n```css\n:root {\n    --contextPath: env.contextPath;\n}\n\n.selector {\n    backgrount-image: url('var(--contextPath)/image.png');\n}\n```\n\n*```Output```*\n```css\n.selector {\n    backgrount-image: url('dev/image.png');\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fpostcss-envariables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscrum%2Fpostcss-envariables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fpostcss-envariables/lists"}