Remark plugin for converting CSS code blocks to MDX style.
MDX 2+ has limited support in many code formatters. This plugin provides a solution by allowing you to use CSS in standard Markdown (.md) files. You can write CSS code blocks with the execute meta tag, and they'll be automatically transformed into MDX <style> elements during processing, avoiding formatting issues that occur with direct MDX syntax.
Turn:
```css execute
button {
color: red;
}
```
Into:
<style>
{"button {\\n color: red;\\n}"}
</style>npm install remark-css-execute --save-devimport readFileSync from 'node:fs';
import { remark } from 'remark';
import { remarkCssExecute } from 'remark-css-execute';
const markdownText = readFileSync('example.md', 'utf8');
remark()
.use(remarkCssExecute)
.process(markdownText)
.then((file) => console.info(file))
.catch((error) => console.warn(error));