No javascript for emoji styling

[8hantanu]

Currently the emojis are custom styled with the Noto Emoji font.

When the page is loaded the emojis are wrapped in a span with class emoji and then the css styling is applied.

In _layouts/default.html

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emojiRegex = /([\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2702}\u{1F004}\u{1F0CF}\u{1F191}-\u{1F251}\u{1F1E6}-\u{1F1FF}\u{200D}\u{2620}\u{26A7}\u{FE0F}\u{1F308}\u{1F38C}\u{1F3C1}\u{1F3F3}-\u{1F3F4}\u{1F6A9}\u{E0062}-\u{E007F}\u{1FA00}-\u{1FAFF}])/gu;
    document.body.innerHTML = document.body.innerHTML.replace(emojiRegex, '<span class="emoji">$1</span>');
  });
</script>

In _sass/mold.scss

.emoji {
  font-family: 'Noto Emoji', sans-serif;
  font-weight: 400;
}

Find a way to do this without JS. One option could be to do this emoji-span-wrap during static site generation step, but find a css only way.