https://github.com/posthtml/posthtml-safe-class-names
Replace escaped characters in CSS selectors and HTML class names.
https://github.com/posthtml/posthtml-safe-class-names
css-selectors escape-char html-emails maizzle posthtml posthtml-plugin replace-escaped-characters tailwindcss
Last synced: 3 months ago
JSON representation
Replace escaped characters in CSS selectors and HTML class names.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-safe-class-names
- Owner: posthtml
- License: mit
- Created: 2020-03-29T13:05:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T15:30:00.000Z (9 months ago)
- Last Synced: 2025-04-11T20:52:43.497Z (9 months ago)
- Topics: css-selectors, escape-char, html-emails, maizzle, posthtml, posthtml-plugin, replace-escaped-characters, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 2 MB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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 `` 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](lib/index.js#L19-L51).
### But... why?
So you can use those cool [Tailwind CSS](https://tailwindcss.com) 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.
## Install
```
npm i posthtml posthtml-safe-class-names
```
## Usage
Consider `example.html`:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.w-3\/5 {
width: 60%;
}
.bg-\[\#1da1f1\] {
background-color: #1da1f1;
}
@media (max-width: 600px) {
.sm\:w-1\/2 {
width: 50%;
}
}
Lorem ipsum
Lorem ipsum
Lorem ipsum