{"id":16676657,"url":"https://github.com/princed/postcss-modules-values-replace","last_synced_at":"2025-03-17T00:32:13.858Z","repository":{"id":51302998,"uuid":"73378107","full_name":"princed/postcss-modules-values-replace","owner":"princed","description":"PostCSS plugin intended to replace CSS Modules values","archived":false,"fork":false,"pushed_at":"2024-04-10T12:29:33.000Z","size":96,"stargazers_count":20,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-14T04:09:13.209Z","etag":null,"topics":["css-loader","css-modules","css-modules-values","postcss","postcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/princed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2016-11-10T12:01:36.000Z","updated_at":"2024-04-22T14:03:40.798Z","dependencies_parsed_at":"2024-04-22T14:03:39.043Z","dependency_job_id":"642e159e-bcde-4d0d-92a0-63a25e5d24b8","html_url":"https://github.com/princed/postcss-modules-values-replace","commit_stats":{"total_commits":85,"total_committers":10,"mean_commits":8.5,"dds":"0.15294117647058825","last_synced_commit":"64172aec8085cd9f74036a6bf2e3e9f3def9757c"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princed%2Fpostcss-modules-values-replace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princed%2Fpostcss-modules-values-replace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princed%2Fpostcss-modules-values-replace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princed%2Fpostcss-modules-values-replace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/princed","download_url":"https://codeload.github.com/princed/postcss-modules-values-replace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221669323,"owners_count":16860853,"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-loader","css-modules","css-modules-values","postcss","postcss-plugin"],"created_at":"2024-10-12T13:11:11.063Z","updated_at":"2024-10-27T11:35:19.877Z","avatar_url":"https://github.com/princed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Modules Values Replace\n\n[PostCSS] plugin to work around CSS Modules values limitations.\n\n[PostCSS]: https://github.com/postcss/postcss\n[css-loader]: https://github.com/webpack/css-loader\n[postcss-calc]: https://github.com/postcss/postcss-calc\n[postcss-cssnext]: https://github.com/MoOx/postcss-cssnext\n[postcss-color-function]: https://github.com/postcss/postcss-color-function\n[postcss-modules-tilda]: https://github.com/princed/postcss-modules-tilda\n[postcss-modules-values]: https://github.com/css-modules/postcss-modules-values\n[modules-values-extract]: https://github.com/alexhisen/modules-values-extract\n[enhanced-resolve]: https://github.com/webpack/enhanced-resolve/#contributing\nReplaces CSS Modules @values just as [postcss-modules-values] does, but without help of [css-loader],\nso it could be used before other [PostCSS] plugins like [postcss-calc].\n\nExample:\n\n```css\n/* constants.css */\n@value unit: 8px;\n@value footer-height: calc(unit * 5);\n\n/* my-components.css */\n@value unit, footer-height from \"./constants.css\";\n@value component-height: calc(unit * 10);\n\n.my-component {\n  padding: unit;\n  margin-top: footer-height;\n  height: component-height;\n}\n```\n\nyields `my-components.css`:\n\n```css\n @value unit, footer-height from \"./constants.css\";\n @value component-height: calc(8px * 10);\n\n .my-component {\n   padding: 8px;\n   margin-top: calc(8px * 5);\n   height: calc(8px * 10);\n }\n ```\n\nand leads to export of following values to JS:\n\n```js\n{\n    \"unit\": \"8px\",\n    \"footer-height\": \"calc(8px * 5)\",\n    \"component-height\": \"calc(8px * 10)\",\n    ...\n}\n```\n\nSee how to export computed values in usage with `calc` example [below](#calc-and-value).\n\n## Usage\n\nPlace it before other plugins:\n```js\npostcss([ require('postcss-modules-values-replace'), require('postcss-calc') ]);\n```\n\nWhen using from webpack, pass its file system in `postcss.config.js` form:\n\n```js\nmodule.exports = (ctx) =\u003e ({\n   plugins: [\n     require('postcss-modules-values-replace')({fs: ctx.webpack._compiler.inputFileSystem}),\n     require('postcss-calc'),\n  ]\n});\n```\nSee [PostCSS] docs for other examples for your environment.\n\n### Configuration params\n\n#### fs `Object`\n\nFile system to use. To make it faster in webpack pass its file system to plugin.\nCached Node's file system is used by default.\n\n#### resolve `Object`\n\n[enhanced-resolve]'s configuration object, see there for possible options and defaults.\n\n\n#### noEmitExports `boolean`\n\nWhen enabled @value rules/declarations will be removed from the emitted output\n\n**Input:**\n```css\n@value myBrandColor blue;\n@font-face {}\n\nbody { background: myBrandColor }\n```\n\n**Output:**\n```css\n@font-face {}\n\nbody { background: blue }\n```\n\n#### preprocessValues `boolean`\n\nWhen enabled, permit plugins defined earlier in the PostCSS pipeline to modify `@value` declarations before they are recorded by this plugin.\n\n#### importsAsModuleRequests `boolean`\n\nWhen enabled, value imports will be resolved as module requests, in line with `css-loader`'s resolution logic [as of 2.0.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#200-2018-12-07).\nIf your code is written with pre-2.0 import syntax, and utilises [postcss-modules-tilda] for compatibility, this option is not required.\n\n#### replaceInSelectors `boolean`\n\nWhen enabled, value usage within rule selectors will also be replaced by this plugin.\n\n#### atRules `Array\u003cstring\u003e`\n\nYou can pass a list of at-rules in which `@value`'s should be replaced. Only `@media` rules will be processed by default.\nNote that passed array isn't merged with default `['media']` but overwrites it, so you'll need to include all the rules you want to be processed.\n\n```js\npostcss([\n  require('postcss-modules-values-replace')({ atRules: ['media', 'container']  })\n]);\n```\n**Input:**\n```css\n@value $tables from './breakpoints.css';\n\n@container (width \u003e= $tablet) {}\n```\n\n**Output:**\n```css\n@container (width \u003e= 768px) {}\n```\n\n### calc() and @value\n\nTo enable calculations *inside* **@value**, enable media queries support in [postcss-calc]:\n\n```js\npostcss([\n  require('postcss-modules-values-replace'),\n  require('postcss-calc')({mediaQueries: true})\n])\n```\n\nor via [postcss-cssnext]:\n\n```js\npostcss([\n  require('postcss-modules-values-replace'),\n  require('postcss-cssnext')({features: {calc: {mediaQueries: true}}})\n])\n```\n\nExample with `calc` enabled:\n\n```css\n/* constants.css */\n@value unit: 8px;\n@value footer-height: calc(unit * 5);\n\n/* my-components.css */\n@value unit, footer-height from \"./constants.css\";\n@value component-height: calc(unit * 10);\n\n.my-component {\n  padding: unit;\n  margin-top: footer-height;\n  height: component-height;\n}\n```\n\nyields `my-components.css`:\n\n```css\n @value unit, footer-height from \"./constants.css\";\n @value component-height: 80px;\n\n .my-component {\n   padding: 8px;\n   margin-top: 40px;\n   height: 80px;\n }\n ```\n\nand leads to export of following values to JS:\n\n```js\n{\n    \"unit\": \"8px\",\n    \"footer-height\": \"40px\",\n    \"component-height\": \"80px\",\n    ...\n}\n```\n\n### Other computations and @value\n\n[postcss-calc] and [postcss-color-function] are known to work *inside* **@value** as they traverse media queries.\nExperience with other plugins may differ if they ignore media queries.\n\n### Extracting values for programmatic use\nThis plugin provides to postcss a custom [messages](http://api.postcss.org/Result.html#messages) object with `type: 'values'`.\nThe `values` property of that object will contain all the extracted values with all substitution performed (i.e. for values that reference other values).\n\nSee [modules-values-extract] for an example of how this can be used.\n\n## Environment\n\nNode.js 6.5 or above is recomended.\n\n## License\n\nISC\n\n## With thanks\n\nCode is mostly taken from [postcss-modules-values] by Glen Maddern, Mark Dalgleish and other contributors.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprinced%2Fpostcss-modules-values-replace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprinced%2Fpostcss-modules-values-replace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprinced%2Fpostcss-modules-values-replace/lists"}