{"id":23304219,"url":"https://github.com/sshari/remark-mdx-postcss","last_synced_at":"2026-04-16T08:31:36.708Z","repository":{"id":57688827,"uuid":"480142951","full_name":"SSHari/remark-mdx-postcss","owner":"SSHari","description":"Remark plugin to bundle a style tag with MDX content via postcss.","archived":false,"fork":false,"pushed_at":"2022-04-12T17:20:55.000Z","size":514,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T07:21:01.821Z","etag":null,"topics":["css","mdx","postcss","remark-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/SSHari.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}},"created_at":"2022-04-10T21:21:10.000Z","updated_at":"2022-04-16T16:12:40.000Z","dependencies_parsed_at":"2022-09-10T12:22:43.355Z","dependency_job_id":null,"html_url":"https://github.com/SSHari/remark-mdx-postcss","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SSHari%2Fremark-mdx-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SSHari%2Fremark-mdx-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SSHari%2Fremark-mdx-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SSHari%2Fremark-mdx-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SSHari","download_url":"https://codeload.github.com/SSHari/remark-mdx-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247565019,"owners_count":20959142,"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","mdx","postcss","remark-plugin"],"created_at":"2024-12-20T11:16:16.138Z","updated_at":"2026-04-16T08:31:36.652Z","avatar_url":"https://github.com/SSHari.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# remark-mdx-postcss\n\nA [remark][remark] plugin to bundle a style tag with MDX content via [postcss][postcss].\n\n\u003c/div\u003e\n\n## Contents\n\n- [Installation](#installation)\n- [What is this?](#what-is-this)\n- [When should I use this?](#when-should-i-use-this)\n- [Configure](#configure)\n- [Examples](#examples)\n  - [Example: basic postcss without plugins](#example-basic-postcss-without-plugins)\n  - [Example: build tailwind styles dynamically](#example-build-tailwind-styles-dynamically)\n- [Caveats](#caveats)\n- [License](#license)\n\n## Installation\n\nThis module is distributed via npm and can be installed as a project dependency:\n\n```bash\nnpm install --save remark-mdx-postcss\n```\n\n## What is this?\n\nBundle an HTML style tag with your MDX for situations where you have css which needs to be created dynamically.\n\nThis plugin uses postcss under the hood to handle processing the css. It should support any postcss plugin. postcss is listed as a peer dependency and will need to be installed along side this package for things to work properly.\n\n## When should I use this?\n\nThis plugin is useful for MDX content which is created dynamically. For example, if you store your MDX content in a database and use something like [mdx-bundler][mdx-bundler] to bundle on the fly, it can be useful to be able to generate styles for that MDX content that wouldn't already be included in your application.\n\n## Configure\n\n```js\nimport { remark } from 'remark';\nimport remarkMdx from 'remark-mdx';\nimport remarkMdxPostCss from 'remark-mdx-postcss';\n\nremark()\n  // remark-mdx-postcss expects to process mdx\n  .use(remarkMdx)\n  .use(remarkMdxPostCss, {\n    // Any valid css which will be\n    // passed to the postcss processor\n    input: '',\n    // An array of valid postcss plugins...\n    plugins: []\n    // ...or a function which gets the remark\n    // tree and virtual file (VFile) and\n    // returns an array of postcss plugins\n    plugins: (tree, file) =\u003e [],\n    // MDX content\n  }).process('');\n```\n\nSee [`use()` in `unified`s readme][unified-use] for more info on how to use plugins.\n\n## Examples\n\n### Example: basic postcss without plugins\n\n```ts\nimport { remark } from 'remark';\nimport remarkMdx from 'remark-mdx';\nimport remarkMdxPostCss from 'remark-mdx-postcss';\n\nconst css = `\n  p {\n    color: red;\n  }\n`;\n\nconst mdx = `\n  # Remark MDX PostCSS\n\n  \u003cdiv\u003eThis is some content.\u003c/div\u003e\n`;\n\nremark()\n  .use(remarkMdx)\n  .use(remarkMdxPostCss, {\n    input: css,\n  })\n  .process(mdx);\n```\n\nYields:\n\n```mdx\n\u003cstyle\u003e\n  p {\n    color: red;\n  }\n\u003c/style\u003e\n\n# Remark MDX PostCSS\n\n\u003cdiv\u003eThis is some content.\u003c/div\u003e\n```\n\n### Example: build tailwind styles dynamically\n\n```js\nimport { remark } from 'remark';\nimport remarkMdx from 'remark-mdx';\nimport remarkMdxPostCss from 'remark-mdx-postcss';\nimport autoprefixer from 'autoprefixer';\nimport cssnano from 'cssnano';\nimport tailwind from 'tailwindcss';\n\n// You may not need the @tailwind base\n// if you use tailwind within your app.\nconst css = `\n  @tailwind base;\n  @tailwind components;\n  @tailwind utilities;\n`;\n\nconst mdx = `\n  # Remark MDX PostCSS\n\n  \u003cdiv className=\"font-bold\"\u003eThis is some content.\u003c/div\u003e\n`;\n\nremark()\n  .use(remarkMdx)\n  .use(remarkMdxPostCss, {\n    input: css,\n    plugins: (_tree, file) =\u003e [\n      tailwind({\n        content: [{ raw: file.value, extension: `mdx` }],\n        corePlugins: { preflight: false },\n      }),\n      autoprefixer(),\n      cssnano(),\n    ],\n  })\n  .process(mdx);\n```\n\nYields:\n\n```mdx\n\u003cstyle\u003e.font-bold{font-weight:700;}\u003c/style\u003e\n\n# Remark MDX PostCSS\n\n\u003cdiv\u003eThis is some content.\u003c/div\u003e\n```\n\n## Caveats\n\nThis plugin works by injecting an HTML style tag directly in the body of the document alongside the component which renders the MDX. While browsers will respect this style tag and correctly apply the styles, this is technically not valid CSS as per the [HTML spec][html-spec-style].\n\n\u003e     Contexts in which this element can be used:\n\u003e       Where metadata content is expected.\n\u003e       In a noscript element that is a child of a head element.\n\nA modified approach involving building the styles and writing the style tag to the head of the document via JavaScript might work.\n\n## License\n\n[MIT][]\n\n\u003c!-- Definitions --\u003e\n\n[remark]: https://github.com/remarkjs/remark\n[postcss]: https://postcss.org/\n[mdx-bundler]: https://github.com/kentcdodds/mdx-bundler\n[unified-use]: https://github.com/unifiedjs/unified#processoruseplugin-options\n[html-spec-style]: https://html.spec.whatwg.org/multipage/semantics.html#the-style-element\n[mit]: https://github.com/SSHari/remark-mdx-postcss/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsshari%2Fremark-mdx-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsshari%2Fremark-mdx-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsshari%2Fremark-mdx-postcss/lists"}