Native CSS Modules

[ennioVisco]

What problem does this feature solve?

CSS Modules are the framework-agnostic build-stage way to write scoped styles. However, they are currently a bit cumbersome to use in vue, compared to other styling techniques.

Proposal: when in SFC there is a <style module> block (and perhaps no other <style> tag), automatically interpret all CSS classes as module classes.

What does the proposed API look like?

Currently, it works like this:

<template>
    <button :class="$style['btn--dark']">Sample button</button>
</template>

<style module>
.btn--dark {
    background-color: #000;
}
</style>

Ideally, we should have:

<template>
    <button class="btn--dark">Sample button</button>
</template>

<style module>
.btn--dark {
    background-color: #000;
}
</style>

Where essentially the compiler automatically wraps the classNames in $style['className'].