Support css modules in vue style tags

[hitautodestruct]

In snowpack it is not clear how to enable css modules for .vue files using the module attribute.

Usage example:

<template>
  <div :class="$style.App"></div>
</template>

<style lang="scss" module>
.App {
  text-align: center;
}
</style>

Using the above with snowpack the app throws an error in the browser:

TypeError: Cannot read property 'App' of undefined
    at Proxy.render (App.js?mtime=1591252156733:15)
    at renderComponentRoot (vue.js:1362)
    at componentEffect (vue.js:4140)
    at reactiveEffect (vue.js:297)
    at effect (vue.js:272)
    at setupRenderEffect (vue.js:4132)
    at mountComponent (vue.js:4091)
    at processComponent (vue.js:4048)
    at patch (vue.js:3711)
    at render (vue.js:4810)

Vue-loader for webpack allows this behaviour see docs.

[hitautodestruct]

Or point me in the direction to how to add this myself. Is it at the plugin level? Is it a vue issue?

[hitautodestruct]

Anyone? @FredKSchott

[FredKSchott]

It appears to be a limitation of our Vue plugin. I'm not familiar enough with the Vue compiler to add but I'd love to review if anyone can submit a PR.

Logic is here: https://github.com/pikapkg/create-snowpack-app/blob/master/packages/plugin-vue/plugin.js

vue compiler plugin is here: https://www.npmjs.com/package/@vue/compiler-sfc