postcss-emoji

PostCSS Emoji

PostCSS plugin that converts CSS selectors into emojis.

Motivation

While the use case of converting all CSS selectors to emojis isn’t quite useful, I was inspired by a post on Hacker News in which the author worked on an iteration of the Google homepage where they abbreviated CSS class names to 1-3 letters to decrease page weight. I wonder if they would’ve considered emoji Unicode class names, as .may be more memorable than .xmw.

Output

/* Before */

.widget {
	transition: 1s;
}
.tool {
	color: orange;
}
.widget.tool {
	transition: 1s;
}
.tool:first-child {
	color: blue;
}

/* After */

.🎬 {
	transition: 1s;
}
.🎭 {
	color: orange;
}
.🎬.🎭 {
	transition: 1s;
}
.🎭:first-child {
	color: blue;
}

Usage

postcss([ require('postcss-emoji') ])

See PostCSS docs for examples for your environment.