PostCSS :heading Plugin

PostCSS polyfill to use the :heading pseudo-class selector today.

Usage

pre.css:

:heading {
  font-weight: bold;
  text-decoration: underline;
}

import fs from "node:fs/promises"
import postcss from "postcss"
import plugin  from "postcss-heading"

const from = "pre.css"
const css  = await fs.readFile(from, new TextDecoder)
const post = await postcss(plugin).process(css, { from, to: "post.css" })
console.log(post.css)

post.css:

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
  text-decoration: underline;
}

Examples

Also processes functional pseudo-class :heading()s:

:heading(2, 4) {
  font-weight: bold;
  text-decoration: underline;
}

post.css:

:is(h2, h4) {
  font-weight: bold;
  text-decoration: underline;
}

Install

pnpm add postcss postcss-heading

[!IMPORTANT] This package is ESM only, so must be imported instead of required, and depends on Node.js >=20.

Specify this requirement with engines and/or devEngines:

// package.json
"type": "module",
"engines": {
  "node": ">=20"
},
"devEngines": {
  "runtime": {
    "name": "node",
    "version": ">=20"
  }
},

License

MIT © Daniel Bayley