Add support for Master CSS

[ansarizafar]

Is your feature request related to a problem? Please describe.
I want to use Master CSS with Svelte in <style> block

Describe the solution you'd like
Master CSS is a new virtual CSS language with an enhanced and concise syntax.

<h1 class="heading">Svelte + MasterCSS = A great Combination</h1>

<style lang="mcss">
.heading {
    fg:blue-70 font:medium p:10
}
</style>

Describe alternatives you've considered
There is no alternative

How important is this feature to you?
It would be great If we can use MasterCSS in <style> block.

Additional context
Master CSS website https://css.master.co/
Master CSS 2.0 Beta website https://beta.css.master.co/docs/guides

[kaisermann]

Hey @ansarizafar 👋

You can add support for it by defining a mcss property on svelte-preprocess options. You can then use Master CSS's compiler API to compile the style tags.

[ansarizafar]

@kaisermann Yes, I have used compiler API.

<div class="content">
    <h1 class="heading">About Page</h1>
    <a class="primary-btn" href="/">Go Home</a>
</div>

<style lang="mcss">
    .content::flex flex:column gap:10 p:30
    .heading:: fg:green-70
    .primary-btn::bg:blue-70 fg:white bg:blue-60:hover px:20 py:10 w:fit-content
</style>