Convert Svelte components styles into Stylify optimized CSS

[katriellucas]

Describe the problem

Stylify is already very close to vanilla CSS, woudn't be interesting to be able convert the native style tags that already exists on Svelte files to Stylify optimized classes? The proposal is basically converting the CSS inside the components.

Describe the proposed solution

What I thought:

// PrimaryButton.svelte
<button class="primary-button">Button</button>

<style> // Might also be interesting to add lang="stylify" attribute to hint the compilation
  primary-button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
  }
</style>

compiled into:

// html
<button class="a b c">Button</button>

// stylify.css
a: {
  padding: 10px 15px;
}

b: {
  font-size: 16px;
}

c: {
  cursor: pointer;
}

Alternatives considered

Do nothing, with the current component syntax, it's possible to achieve something similar:

<!--
  stylify-components
    'primary-button': `padding:10px_15px font-size:16px cursor:pointer`
  /stylify-components
-->

But we lose perks like syntax highlight, utility class generation and other, so it's not exactly the same, you end up with some repeated classes due to how stylify componentization works.

Importance

would make my life easier

[Machy8]

Thanks for the submit @katriellucas!

[Machy8]

Additional ideas:

• The following approach would work anywere: it would match native stylify definition block and process content between it.
• It would process the block and then remove it from the file so no additional css will be generated

<style>
// stylify-components:css
  primary-button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
  }
// /stylify-components
</style>

another way

<style stylify-components>
  primary-button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
  }
</style>