{"id":14968199,"url":"https://github.com/csstools/postcss-export-custom-variables","last_synced_at":"2025-10-26T00:31:12.261Z","repository":{"id":57328002,"uuid":"84395918","full_name":"csstools/postcss-export-custom-variables","owner":"csstools","description":"Export custom media queries, custom properties, custom property sets, and custom selectors from CSS to JS","archived":true,"fork":false,"pushed_at":"2017-05-20T18:41:39.000Z","size":8,"stargazers_count":12,"open_issues_count":2,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-05T11:17:15.599Z","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":"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-03-09T03:53:36.000Z","updated_at":"2024-12-27T18:34:06.000Z","dependencies_parsed_at":"2022-09-18T17:50:28.803Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-export-custom-variables","commit_stats":null,"previous_names":["jonathantneal/postcss-export-custom-variables"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-export-custom-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-export-custom-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-export-custom-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-export-custom-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-export-custom-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238235632,"owners_count":19438725,"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-09-24T13:39:31.204Z","updated_at":"2025-10-26T00:31:11.943Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Export Custom Variables [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Windows Build Status][win-img]][win-url]\n[![Gitter Chat][git-img]][git-url]\n\n[PostCSS Export Custom Variables] lets you export [custom media queries], [custom\nproperties], [custom property sets], and [custom selectors] from CSS to\nJavaScript.\n\n```css\n:root {\n  --custom-size: 960px;\n  --custom-styles: {\n    color: black;\n    background-color: white;\n  }\n}\n\n@custom-media --custom-viewport (max-width: 30em);\n\n@custom-selector :--custom-selector :hover, :focus;\n```\n\nBy default, CSS is transformed into JSON:\n\n```json\n{\n  \"customSize\": \"960px\",\n  \"customStyles\": {\n    \"color\": \"black\",\n    \"backgroundColor\": \"white\"\n  },\n  \"customViewport\": \"(max-width: 30em)\",\n  \"customSelector\": \":hover, :focus\"\n}\n```\n\nWith a small adjustment, it may be transformed into JavaScript exports:\n\n```js\nrequire('postcss-export-custom-variables')({\n  exporter: 'js',\n  destination: 'css-vars-exports.js'\n});\n```\n\n```js\nexport const customSize = \"960px\";\nexport const customStyles = { color: \"black\", backgroundColor: \"white\" };\nexport const customViewport = \"(max-width: 30em)\";\nexport const customSelector = \":hover, :focus\";\n```\n\nWith these variables synchronized to JavaScript, they may be used later by\nsomething like `window.matchMedia()`, `document.querySelectorAll()`,\n`element.style`, or `element.animate()`.\n\n## Usage\n\nAdd [PostCSS Export Custom Variables] to your build tool:\n\n```bash\nnpm install postcss-export-custom-variables --save-dev\n```\n\n#### Node\n\nUse [PostCSS Export Custom Variables] to process your CSS:\n\n```js\nrequire('postcss-export-custom-variables').process(YOUR_CSS, { /* postcss options */ }, { /* plugin options */ });\n```\n\n#### PostCSS\n\nAdd [PostCSS] to your build tool:\n\n```bash\nnpm install postcss --save-dev\n```\n\nUse [PostCSS Export Custom Variables] as a plugin:\n\n```js\npostcss([\n  require('postcss-export-custom-variables')({ /* plugin options */ })\n]).process(YOUR_CSS, /* postcss options */);\n```\n\n#### Gulp\n\nAdd [Gulp PostCSS] to your build tool:\n\n```bash\nnpm install gulp-postcss --save-dev\n```\n\nUse [PostCSS Export Custom Variables] in your Gulpfile:\n\n```js\ngulp.task('css', () =\u003e gulp.src('./src/*.css').pipe(\n  require('gulp-postcss')([\n    require('postcss-export-custom-variables')({ /* plugin options */ })\n  ])\n).pipe(\n  gulp.dest('.')\n));\n```\n\n#### Grunt\n\nAdd [Grunt PostCSS] to your build tool:\n\n```bash\nnpm install grunt-postcss --save-dev\n```\n\nUse [PostCSS Export Custom Variables] in your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-postcss');\n\ngrunt.initConfig({\n  postcss: {\n    options: {\n      use: [\n        require('postcss-export-custom-variables')({ /* options */ })\n      ]\n    },\n    dist: {\n      src: '*.css'\n    }\n  }\n});\n```\n\n## Advanced Options\n\nThese options may be passed directly into the plugin.\n\n```js\nrequire('postcss-export-custom-variables')({ /* options */ });\n```\n\n#### destination\n\n`destination` is the path where your JSON or JS Exports will be saved. By\ndefault, it is the CSS source with an additional `.js` or `.json` extension.\n\n#### variables\n\n`variables` is the object your CSS variables are assigned to. This might be\nused to pre-populate some unique set of custom properties. By default, it is a\nnew object.\n\n#### exporter\n\n`exporter` is the function used to export the whole object of custom variables.\nThe plugin will return this function, so Promises should be returned if\nperforming an asynchronous operation, such as writing to a file.\n\n```js\n{\n  exporter: (variables, options, root) =\u003e {\n    // variables: an object of all the variables collected\n    // options: options passed into the plugin\n    // root: the AST of CSS parsed by PostCSS\n\n    // return new Promise();\n  }\n}\n```\n\n- If a `js` string is passed, the default JavaScript stringifier will be used.\n- If a `json` string is passed, the default JSON stringifier will be used.\n\n```js\n{\n  exporter: 'json'\n}\n```\n\n### Custom Assigners\n\nUse these custom assigners to determine how you would like to organize your\ncustom variables.\n\n#### customMediaQueryAssigner\n\n`customMediaQueryAssigner` is the function used to create an object from the\nquery and value of [custom media queries].\n\n```js\n{\n  customMediaQueryAssigner: (name, queries, node) =\u003e {\n    // name: name of the custom media query\n    // queries: queries for the custom media query\n    // node: PostCSS atrule for the custom media query\n\n    // returns { name: queries }\n  }\n}\n```\n\n#### customPropertyAssigner\n\n`customPropertyAssigner` is the function used to create an object from the\nproperty and value of [custom properties].\n\n```js\n{\n  customPropertyAssigner: (property, value, node) =\u003e {\n    // property: name of the custom property\n    // value: value of the custom property\n    // node: PostCSS declaration for the custom property\n\n    // returns { property: value };\n  }\n}\n```\n\n#### customPropertySetAssigner\n\n`customPropertySetAssigner` is the function used to create an object from the\nproperty and value of [custom property sets].\n\n```js\n{\n  customPropertySetAssigner: (property, nodes, node) =\u003e {\n    // property: name of the custom property set\n    // nodes: array of all the children of the property set\n    // node: PostCSS rule for the custom property set\n\n    // returns { property: object_from_nodes };\n  }\n}\n```\n\n#### customSelectorAssigner\n\n`customSelectorAssigner` is the function used to create an object from the\nproperty and value of [custom selectors].\n\n```js\n{\n  customSelectorAssigner: (property, selectors, node) =\u003e {\n    // property: name of the custom selector\n    // selectors: selectors for the custom selector\n    // node: PostCSS atrule for the custom selector\n\n    // returns { property: selectors };\n  }\n}\n```\n\n[npm-url]: https://www.npmjs.com/package/postcss-export-custom-variables\n[npm-img]: https://img.shields.io/npm/v/postcss-export-custom-variables.svg\n[cli-url]: https://travis-ci.org/jonathantneal/postcss-export-custom-variables\n[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-export-custom-variables.svg\n[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-export-custom-variables\n[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-export-custom-variables.svg\n[lic-url]: LICENSE.md\n[lic-img]: https://img.shields.io/npm/l/postcss-export-custom-variables.svg\n[log-url]: CHANGELOG.md\n[log-img]: https://img.shields.io/badge/changelog-md-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg\n\n[PostCSS Export Custom Variables]: https://github.com/jonathantneal/postcss-export-custom-variables\n[PostCSS]: https://github.com/postcss/postcss\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[custom media queries]: https://drafts.csswg.org/mediaqueries-5/#custom-mq\n[custom properties]: https://drafts.csswg.org/css-variables/\n[custom property sets]: http://tabatkins.github.io/specs/css-apply-rule/\n[custom selectors]: https://drafts.csswg.org/css-extensions/#custom-selectors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-export-custom-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-export-custom-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-export-custom-variables/lists"}