Apply CSS class mixins on the browser-side using vanilla JavaScript.
Inspired by Tailwind's @apply and MasterCSS's customization.
Define your mixins in JavaScript like this:
window.liveMixins = {
btn: 'btn btn-primary btn-xs',
heading: "display-1 fw-bold text-success"
}Then include the CDN link just before your closing </body> tag:
<script src="https://cdn.jsdelivr.net/gh/harryfear/Live-Class-Mixins@latest/master.min.js"></script>
We're using this in production to polyfil for Bootstrap's lack of @apply.
If you're worried about a flash of unstyled or half-style content, you can add the stopFOUC class to your element's initial class list, and put this style snippet in your <head>:
<style>
.stopFOUC { visibility:hidden; }
</style>
For example:
<h1 class="stopFOUC heading">Hello World</h1>