{"id":18118698,"url":"https://github.com/lutien/postcss-extract-value","last_synced_at":"2025-04-14T17:12:08.836Z","repository":{"id":57328027,"uuid":"60482348","full_name":"lutien/postcss-extract-value","owner":"lutien","description":"PostCSS plugin to extract values from css properties and put them into variables.","archived":false,"fork":false,"pushed_at":"2017-05-08T22:56:49.000Z","size":41,"stargazers_count":46,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T17:12:01.071Z","etag":null,"topics":["css-property","postcss"],"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/lutien.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":"2016-06-05T21:35:28.000Z","updated_at":"2024-02-07T16:50:44.000Z","dependencies_parsed_at":"2022-09-18T10:21:09.604Z","dependency_job_id":null,"html_url":"https://github.com/lutien/postcss-extract-value","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lutien%2Fpostcss-extract-value","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lutien%2Fpostcss-extract-value/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lutien%2Fpostcss-extract-value/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lutien%2Fpostcss-extract-value/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lutien","download_url":"https://codeload.github.com/lutien/postcss-extract-value/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248923765,"owners_count":21183953,"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":["css-property","postcss"],"created_at":"2024-11-01T05:13:27.505Z","updated_at":"2025-04-14T17:12:08.809Z","avatar_url":"https://github.com/lutien.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Extract Value [![Build Status][ci-img]][ci] [![Coverage Status](https://coveralls.io/repos/github/lutien/postcss-extract-value/badge.svg)](https://coveralls.io/github/lutien/postcss-extract-value)\n\n[PostCSS] plugin to extract values from css properties and put them into variables.\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/lutien/postcss-extract-value.svg\n[ci]:      https://travis-ci.org/lutien/postcss-extract-value\n\n```css\n.foo {\n     width: 100px;\n     color: #000;\n     margin: 10px;\n}\n.bar {\n     color: #000;\n     margin: 15px;\n}\n```\n\n```css\n:root {\n    --width-1: 100px;\n    --color-1: #000;\n    --margin-1: 10px;\n    --margin-2: 15px;\n}\n.foo {\n    width: var(--width-1);\n    color: var(--color-1);\n    margin: var(--margin-1);\n}\n.bar {\n    color: var(--color-1);\n    margin: var(--margin-2);\n}\n```\n\n## Usage ##\n\n```js\nimport postcssExtractValue from 'postcss-extract-value';\n\npostcss([\n    postcssExtractValue(/* options */),\n    // more plugins...\n])\n```\n\n## Options ##\n\n#### filterByProps ####\n\nType: `array`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `[]`\n\nYou can add names of css properties and only from this properties will be extracted values.\n\n#### onlyColor ####\n\nType: `boolean`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `false`\n\nIf you set true, only colors (hex, rgb, hsl, color keywords) will be extracted from values.\n\n#### scope ####\n\nType: `string`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: `:root`\n\nYou can set custom selector, which will contain variables.\n\n#### variableSyntax ####\n\nType: `string`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: ``\n\nBy default it will be used css variables syntax, other available variants **less** and **sass**.\n\n#### templateVariableName ####\n\nType: `string`\u003cbr\u003e\nRequired: `false`\u003cbr\u003e\nDefault: ``\n\nYou can set template for variables using special words.\nSee more information below.\n\n\n## Usage templateVariableName ##\n\n### With options _filterByProps_ or without any options by default: ###\n\n#### [propertyName] ####\nName of css property (width, border, etc.).\n\n```js\npostcss([\n    postcssExtractValue({\n        templateVariableName: 'theme[propertyName]'\n    }),\n])\n```\n```css\n.foo {\n     width: 100px;\n}\n```\n\n```css\n:root {\n    --theme-width-1: 100px;\n}\n.foo {\n    width: var(--theme-width-1);\n}\n```\n\n### With options _onlyColor_: ###\n\n#### [colorKeyword] ####\nColor keyword of the nearest color.\n\n#### [tint] ####\nDeviation in the dark or light side from the nearest color. (light\\dark)\n\n ```js\n postcss([\n     postcssExtractValue({\n          templateVariableName: 'theme[tint][colorKeyword]',\n     }),\n ])\n ```\n ```css\n .foo {\n     border: 2px solid #cc0000;\n     color: #ff0000;\n     background-color: rgb(255, 26, 26);\n }\n ```\n\n ```css\n:root {\n    --theme-dark-red-1: #cc0000;\n    --theme-red-1: #ff0000;\n    --theme-light-red-1: rgb(255, 26, 26);\n}\n.foo {\n    border: 2px solid var(--theme-dark-red-1);\n    color: var(--theme-red-1);\n    background-color: var(--theme-light-red-1);\n}\n ```\n \n### Others ###\n\n#### [selectorName] ####\n Name of css selector (className, id, etc.)\n \n ```js\n postcss([\n     postcssExtractValue({\n         templateVariableName: 'theme[selectorName]'\n     }),\n ])\n ```\n ```css\n .foo {\n      width: 100px;\n }\n ```\n \n ```css\n :root {\n     --theme-foo-1: 100px;\n }\n .foo {\n     width: var(--theme-foo-1);\n }\n ```\n\nSee [PostCSS] docs for examples for your environment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flutien%2Fpostcss-extract-value","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flutien%2Fpostcss-extract-value","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flutien%2Fpostcss-extract-value/lists"}