search

twitter / twemoji

Emoji for everyone. https://twemoji.twitter.com/
MIT License
16.84k stars 1.85k forks source link

Parsing pseudo elements #369

Open LauraSophieM opened 5 years ago

LauraSophieM commented 5 years ago

Hi!

I am parsing the whole body with twemoji.parse(document.body);. The content the body's ::before pseudo element (just a ✨) is not being parsed... What could be wrong?

WebReflection commented 5 years ago

The parser replaces occurrences of emoji with <img> tags, pointing at the related file. Pseudo elements are not replaceable using the same technique, neither discoverable with ease, unless you check per each element before and after and related content, which would be a performance killer on cases like yours, where you pass a whole document body, instead of a smaller container.

Even if pseudo nodes where discovered, the current library parses strings returning <img src="..." tags.

But even if it was returning just the image, how would you put such image as pseudo element? The library would need to modify the pseudo element CSS to not use the content and use a background-image instead, resulting in conflicts if the pseudo-element had bg image already.

The long story short of this, is that pseudo elements are not (and cannot trivially be) supported, so all this project should do is (IMHO) flag this as won't fix and explicit this limitation on the README.

I let other maintainers eventually correct my reply or act differently 👋

LauraSophieM commented 5 years ago

Thanks. Guess I'll use an png or svg instead then.