{"id":17990964,"url":"https://github.com/viktor-yakubiv/rehype-postcss","last_synced_at":"2026-04-11T20:37:05.594Z","repository":{"id":101140348,"uuid":"480837085","full_name":"viktor-yakubiv/rehype-postcss","owner":"viktor-yakubiv","description":"Run PostCSS on \u003cstyle\u003e elements through rehype","archived":false,"fork":false,"pushed_at":"2023-09-29T12:59:54.000Z","size":119,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-25T09:35:42.347Z","etag":null,"topics":["postcss","rehype-plugin","unified-plugin"],"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/viktor-yakubiv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2022-04-12T14:06:31.000Z","updated_at":"2024-09-28T06:40:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ee6f0f3-3f26-4ba3-afeb-337b09217449","html_url":"https://github.com/viktor-yakubiv/rehype-postcss","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":"viktor-yakubiv/init","purl":"pkg:github/viktor-yakubiv/rehype-postcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viktor-yakubiv","download_url":"https://codeload.github.com/viktor-yakubiv/rehype-postcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-postcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31695163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T20:18:30.949Z","status":"ssl_error","status_checked_at":"2026-04-11T20:18:29.982Z","response_time":54,"last_error":"SSL_read: 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":["postcss","rehype-plugin","unified-plugin"],"created_at":"2024-10-29T19:19:46.801Z","updated_at":"2026-04-11T20:37:05.575Z","avatar_url":"https://github.com/viktor-yakubiv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![\n  Russia invaded Ukraine,\n  killing tens of thousands of civilians and displacing millions more.\n  It's a genocide.\n  Please help us defend freedom, democracy and Ukraine's right to exist.\n](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://vshymanskyy.github.io/StandWithUkraine)\n\n# rehype-postcss\n\n**[rehype][]** plugin to process `\u003cstyle\u003e` nodes\nand elements containing a `style` attribute\nwith [PostCSS][postcss].\n\n## Contents\n\n*   [What is this?](#what-is-this)\n*   [When should I use this?](#when-should-i-use-this)\n*   [Install](#install)\n*   [Use](#use)\n*   [API](#api)\n    *   [`unified().use(rehypePostCSS[, options])`](#unifieduserehypepostcss-options)\n*   [Types](#types)\n*   [Compatibility](#compatibility)\n*   [Related](#related)\n*   [License](#license)\n\n## What is this?\n\nThis package is a [unified][] ([rehype][]) plugin\nto process `\u003cstyle\u003e` nodes and elements with a `style` attribute\nusing [PostCSS][postcss].\n\n**unified** is a project that transforms content\nwith abstract syntax trees (ASTs).\n**rehype** adds support for HTML to unified.\n**hast** is the HTML AST that rehype uses.\nThis is a rehype plugin that runs PostCSS on `\u003cstyle\u003e` elements\nand other elements that have a `style` attribute.\n\n## When should I use this?\n\nIn most cases running [PostCSS][postcss] with [postcss-html][] syntax\nthrough CLI or with your build tool should be enough.\n\nWhen it's not,\nthis plugin helps you run PostCSS through nodes contextually,\nrun on fragments etc.\n\nSpecifically, the plugin was written to apply [CSS Modules][css-modules]\nin context of the parent element\nwhat would not be possible to do in another way.\n\n## Install\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\nIn Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:\n\n```sh\nnpm install rehype-postcss\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport rehypePostCSS from 'https://esm.sh/rehype-postcss@0.1'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import rehypePostCSS from 'https://esm.sh/rehype-postcss@6?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\nSay we have the following file `example.html`:\n\n```html\n\u003cstyle\u003e\n  a {\n    display: flex;\n  }\n\u003c/style\u003e\n```\n\nAnd our module `example.js` looks as follows:\n\n```js\nimport { read } from 'to-vfile'\nimport { rehype } from 'rehype'\nimport rehypePostCSS from 'rehype-postcss'\n\nconst file = await rehype()\n  .data('settings', { fragment: true })\n  .use(rehypePostCSS, {\n    plugins: [\n      autoprefixer({ overrideBrowserslist: ['ie \u003e= 10'] }),\n    ],\n  })\n  .process(await read('example.html'))\n\nconsole.log(String(file))\n```\n\nNow, running `node example.js` yields:\n\n```html\n\u003cstyle\u003e\n  a {\n    display: -ms-flexbox;\n    display: flex;\n  }\n\u003c/style\u003e\n```\n\n## API\n\nThis package exports no identifiers.\nThe default export is `rehypePostCSS`.\n\n### `unified().use(rehypePostCSS[, options])`\n\nRuns PostCSS.\n\n##### `options`\n\nConfiguration (optional).\n\n###### `options.plugins`\n\nA list of plugins to run with the PostCSS processor.\nThis list is passed directly;\nthe whole process can be imagined simply\nlike in the [example][postcss-deno-example].\n\n\u003e 👉 **Note**:\n\u003e If `options.plugins` is not passed\n\u003e or is an empty array,\n\u003e the plugin would look for a [PostCSS config][postcss-load-config]\n\u003e in the current working directory.\n\u003e\n\u003e If such a config could not be found,\n\u003e an error is thrown.\n\n###### `options.options`\n\n[Processor options][postcss-process-options].\nThe object would complement defaults and passed\nto the [process][postcss-process] call.\n\nThe initial default options are:\n\n```js\n{\n  from: 'path of the source file',\n  map: false,\n}\n```\n\n\u003e 👉 **Note**:\n\u003e Source maps (`map` option) are turned off by default.\n\u003e\n\u003e If you are going to use source maps, turn it on\n\u003e as well as pass `to` option\n\u003e to let the processor rewrite URLs properly.\n\u003e When the `from` option can be discovered from the `file`,\n\u003e there is no way to know\n\u003e where the result is going to be saved.\n\n###### `options.test`\n\nTest to define which elements should be processed.\nThe test must be a function;\nif it's anything else, it is ignored.\nThe default (no test)\nis to process all `\u003cstyle\u003e` elements\nand any element with a `style` attribute.\nIf the option is passed,\nit will be filtering out from the list of selected nodes\nby the default test.\n\n## Types\n\nThis package is not typed with [TypeScript][].\nIt can be though if you send a PR or when I have some extra time.\n\n## Compatibility\n\nThe project should be compatible with Node.js 12.20+, 14.14+, and 16.0+\nbut the compatibility is not tested.\n\n## Related\n\nThis plugin was inspired by [posthtml-postcss][].\n\n## License\n\n[MIT][license] © [Viktor Yakubiv][author]\n\n\u003c!-- Definitions --\u003e\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[esmsh]: https://esm.sh\n\n[license]: ./LICENSE\n\n[author]: https://yakubiv.com\n\n[typescript]: https://www.typescriptlang.org\n\n[unified]: https://github.com/unifiedjs/unified\n\n[rehype]: https://github.com/rehypejs/rehype\n\n[postcss]: https://github.com/postcss/postcss\n\n[postcss-html]: https://github.com/ota-meshi/postcss-html\n\n[postcss-load-config]: https://github.com/postcss/postcss-load-config\n\n[css-modules]: https://github.com/css-modules/css-modules\n\n[postcss-deno-example]: https://github.com/postcss/postcss#deno\n\n[postcss-process]: https://postcss.org/api/#processor-process\n\n[postcss-process-options]: https://postcss.org/api/#processoptions\n\n[posthtml-postcss]: https://github.com/posthtml/posthtml-postcss\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktor-yakubiv%2Frehype-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviktor-yakubiv%2Frehype-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktor-yakubiv%2Frehype-postcss/lists"}