Replace escaped characters in HTML class names and CSS selectors.
npm install posthtml-safe-class-namesReplace 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]
This plugin replaces escaped characters in class names from your tags and inside class="" attributes with safe characters, that do not need escaping.
By default, it replaces:
- \: and \/ with -
- \% with pc
- \. with _
See the full list of replacements.
So you can use those cool Tailwind CSS selectors in HTML emails. 😎
Escaped characters in CSS selectors are not currently supported by all email clients, so you can use this plugin to replace them with HTML email-safe alternatives.
```
npm i posthtml posthtml-safe-class-names
Consider example.html:
`html`
Lorem ipsum
`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`
Lorem ipsum
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`
Lorem ipsum
Type: Array\[{heads: '{{', tails: '}}'}, {heads: '{{{', tails: '}}}'}]
Default:
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('