CSS modules not working

[macu]

I am trying to get scoped CSS but nothing I try is working.

Here's my gulp task:

var gulp = require('gulp');
var rollup = require('gulp-rollup');
var vue = require('rollup-plugin-vue');
var scss = require('rollup-plugin-scss');
var buble = require('rollup-plugin-buble');

var caches = {};
gulp.task('vueify', ['bower'], function() {
  return gulp.src('./src/**/*.{js,scss,vue}')
    //.pipe(sourcemaps.init())
    .pipe(rollup({
      // https://www.npmjs.com/package/gulp-rollup#options
      entry: ['./src/main.js'],
      impliedExtensions: ['.js', '.vue'],
      moduleName: 'app',
      separateCaches: caches,
      format: 'iife',
      plugins: [
        vue({
          // http://rollup-plugin-vue.znck.me/configuration/
          //css: "app.css",
          compileTemplate: true,
          styleToImports: true,
          //autoStyles: true,
          //disableCssModuleStaticReplacement: false,
          modules: {
            generateScopedName: '[name]__[local]',
          },
        }),
        scss({
          output: './css/compiled.css',
        }),
        buble(),
      ],
    }))
    .on('bundle', function(bundle, name) {
      caches[name] = bundle;
    })
    .on('error', function(e) {
      console.error(e);
    })
    //.pipe(sourcemaps.write())
    .pipe(gulp.dest('./js'))
});

main.js

import TestVue from './test.vue';
export default TestVue;

test.vue

<template>
  <p :class="$style.test"><em>{{ greeting }} Yall!</em></p>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello",
    };
  },
};
</script>

<style lang="scss" module>
.test {
  background-color: yellow;
  em {
    color: blue;
  }
}
</style>

No matter what I try the compiled CSS selectors are not scoped for the single component.

[znck]

CSS modules is WIP.