ajstrand / cssx

CSS in MDX

mdx-cssx

https://cssx.netlify.com

CSSX is CSS in MDX files.

Why?

Why not?

Usage

yarn add mdx-cssx

npm i mdx-cssx

import ReactDOM from "react-dom"
import React from "react"
import App from "./App"
import CSSX from "mdx-cssx"

ReactDOM.render(
  <CSSX>
    <App />
  </CSSX>,
  document.getElementById("root")
)

Under the hood I use the mdx-provider so you can pass more components to it if you wish to override more

Then use it in your MDX files like so:

# CSSX

CSSX is CSS in MDX

it uses emotion under the hood to create the styles.

## Why?

Why not?

```cssx
body {
    background: #d9d9d9;
    padding: 20px;
    justify-content: center;
    display: flex;
    height: 100vh;
    align-items: center;
    text-align: center;
}

h1 {
  color: blue;
}

pre {
  text-align: left;
}

Build note:

The example included in the project uses Yarn workspaces to include the compiled file. The index.js in the workspace is the content from the dist folder when you run the build command.

See a local example

A local example is included in the cssx-example folder

...

License

MIT License, see the included License.md file.