{"id":14968131,"url":"https://github.com/postcss/postcss-plugin-context","last_synced_at":"2025-10-19T09:31:51.043Z","repository":{"id":31362838,"uuid":"34925739","full_name":"postcss/postcss-plugin-context","owner":"postcss","description":"Limit a PostCSS processor to a local stylesheet context.","archived":false,"fork":false,"pushed_at":"2015-08-27T17:02:45.000Z","size":150,"stargazers_count":35,"open_issues_count":0,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-14T02:32:48.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/postcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-01T21:52:10.000Z","updated_at":"2024-03-26T10:08:38.000Z","dependencies_parsed_at":"2022-09-18T17:22:53.090Z","dependency_job_id":null,"html_url":"https://github.com/postcss/postcss-plugin-context","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-plugin-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-plugin-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-plugin-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-plugin-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-plugin-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219869976,"owners_count":16555409,"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:21.726Z","updated_at":"2025-10-19T09:31:50.695Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# [postcss]-plugin-context [![Build Status](https://travis-ci.org/postcss/postcss-plugin-context.svg?branch=master)][ci]\n\n\u003e Limit a PostCSS processor to a local stylesheet context.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-plugin-context) do:\n\n```\nnpm install postcss-plugin-context --save\n```\n\n## Example\n\nThis plugin is useful should you need to contextualize another processor inside\nyour CSS file. For example, [`postcss-map`] will allow you to specify a short\nsyntax if only one file is specified. Using this module, we can limit the scope\nof the transform to be of our choice, rather than the module's. In this example,\nonly the first ruleset is actually passed to postcss-map, and the rest of the\nCSS file is untouched.\n\nSimply define a `@context` block inside your CSS file, such as:\n\n```css\n@context brandColors {\n    h1 {\n        color: map(primary);\n    }\n}\n```\n\nThen, the plugin will work on the `brandColors` context. The `@context` block is\nremoved automatically for you after the fact.\n\n```js\nvar postcss = require('postcss');\nvar map = require('postcss-map');\nvar context = require('postcss-plugin-context');\n\nvar css = '@context brandColors { h1 { color: map(primary) } } h2 { color: map(primary) }';\nconsole.log(postcss([\n    context({\n        brandColors: map({\n            maps: ['brand.yml']\n        })\n    })\n]).process(css).css);\n\n// =\u003e 'h1 { color: red } h2 { color: map(primary) }'\n```\n\nNote that you can pass multiple processors to a single context block:\n\n```css\nh1 {\n    @context brandColors, size {\n        color: map(primary);\n        size: 100px;\n    }\n}\n```\n\nOutputs:\n\n```css\nh1 {\n    color: red;\n    width: 100px;\n    height: 100px;\n}\n```\n\nNote that a context may also be defined across a whole file; if you specify\n`@context` without curly braces. For example:\n\n```css\n@context size;\n\nh1 {\n    size: 100px;\n}\n```\n\nOutputs:\n\n```css\nh1 {\n    width: 100px;\n    height: 100px;\n}\n```\n\n## API\n\n### context(plugins)\n\n#### plugins\n\nType: `object`\n*Required value*.\n\nPass an object of processors to contextualize.\n\n```js\ncontext({\n    brandColors: map({maps: ['brand.yml']})\n    size: require('postcss-size')\n});\n```\n\n## Contributing\n\nPull requests are welcome. If you add functionality, then please add unit tests\nto cover it.\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n[ci]:            https://travis-ci.org/postcss/postcss-plugin-context\n[postcss]:       https://github.com/postcss/postcss\n[`postcss-map`]: https://github.com/pascalduez/postcss-map\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-plugin-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-plugin-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-plugin-context/lists"}