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'].

[haoqunjiang]

IMO, this is too implicit.
It's not like <style scoped>, where the class names are preserved, only the affecting scope is limited.
CSS modules transpiles the class names into something very different from the original one, without explicitly writing them in a deliberately different manner, users may not notice that their compiled HTML isn't the same as the written template.
They may have a hard time debugging their CSS, only to realize at the end that someone some time ago has added a <style module> at the end.

[darrylnoakes]

I agree. It appears this would prevent using any externally-defined classes, which would be a major limitation.