Safe Class Names

Replace escaped characters in class names and CSS selectors

[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]

Introduction

This plugin replaces escaped characters in class names from your




`js
import posthtml from 'posthtml'
import {readFileSync, writeFileSync} from 'node:fs'
import safeClassNames from 'posthtml-safe-class-names'

const source = readFileSync('./example.html')

posthtml([
safeClassNames()
])
.process(source)
.then(result => fs.writeFileSync('./after.html', result.html))
`

Result:

`html








Type: Object\
Default: see list

The plugin accepts an options object where you can define character replacement mappings:

`js
{
':': '-',
'\/': '-',
'%': 'pc',
'.': '_',
// ...
}
`

See the full list of replacements.

Besides adding new mappings, you can of course override the default ones.

Using the same example.html, let's replace \: in our class names with __ instead of -:

`js
posthtml([
safeClassNames({
replacements: {
':': '__',
}
})
])
.process(source)
.then(result => writeFileSync('./after.html', result.html))
`

Result:

`html








Type: Array\
Default: [{heads: '{{', tails: '}}'}, {heads: '{{{', tails: '}}}'}]

An array of objects each containing heads/tails strings that mark the start and end of a class name to ignore. If a class name matches a pattern defined here, it will not be processed.

`js
posthtml([
safeClassNames({
ignored: [
{heads: '[[', tails: ']]'},
]
})
])
.process('