Fork me on GitHub

A CSS syntax highlighter built on top of PostCSS.

@charset "UTF-8";

a[href*="test"] {
  font-weight: 700;

#h1 {
  color: #000!important;
  background: url('cat.jpg') no-repeat;

* {
  color: rgba(255, 255, 255, 0.5);

 * block comment

.class, a:before {
  content: 'Hello!';

@media only screen and (min-width: 500px) {
  .class {
    -webkit-border-radius: 6px;
            border-radius: 6px;



const midas = new Midas([opts])

However you consume midas, whether it is via PostCSS or standalone usage, you must instantiate it before it can be used for highlighting.

import Midas from 'midas';

const midas = new Midas();



Supply a function here to convert midas' internal HAST to a string. By default, this uses hast-util-to-html.

The function is supplied the internal HAST as the first parameter, then all other options are passed as arguments when the process method is called.

If you supply false instead, midas will return its HAST. This is for better integration with consumers of virtual nodes, such as React.


By default, midas will wrap the output in <code></code>. This option wraps the code tag with <pre class="midas"></pre>.

midas.process(css, [...args])

Once midas has been initialised, you can start processing CSS strings.

import Midas from 'midas';

const midas = new Midas();
const output = midas.process('h1{}');

This will output (indentation added for readability):

<pre class="midas">
        <span class="midas__selector">
            <span class="midas__tag">h1</span>

        <span class="midas__brace">{</span>
        <span class="midas__brace">}</span>


To use midas with PostCSS, you must initialise it and then supply the stringifier property. This allows you to highlight CSS that has optionally been transformed by PostCSS plugins.

import Midas from 'midas';
import postcss from 'postcss';

const midas = new Midas();
const output = postcss().process('h1{}', {stringifier: midas.stringifier}).css;

Note that due to the way that PostCSS stringifiers work, only string types can be returned. Therefore, if you need midas to output a virtual DOM, then you should not use this API.


With npm do:

npm install midas