Custom CSS - single file components

[o-t-w]

A lot of JavaScript frameworks have embraced single file components - having JavaScript and styling and markup all in one file. This is a popular and imo very nice approach. Obviously for people that are 100% using Tailwind this isn't really an issue.
Personally I do like Tailwind. But for those time when I want to write custom CSS for a component, or for people that adopt Maizzle for the component model rather than for Tailwind and who don't like Tailwind, it would be nice to have the option to write CSS in the same file as a component.

Parcel components have this functionality.

e.g.

<script props>
    module.exports = {
      href: props.href
    }
  </script>

  <style>
    a {
      color: red;
    }
  </style>

<a class="no-underline inline-block" href={{href}}>
    <content />
</a>

The build process could then just inline all those styles for that component or inject them in a <style> tag at the bottom of the head tag in the HTML (you could perhaps give users a choice over inlining vs not inlining).

Maizzle is touting Tailwind support as it's main selling point, but I find that it's component system is compelling enough by itself for people to want to use this project. Therefor giving more options for people to write CSS would be a good thing.