Composition-api: Cannot work with CSS Modules

[banricho]

<script>
  export default {
    props: {
      themeName: String
    },

    computed: {
      $theme () {
        return this[this.themeName]
      }
    }
  }
</script>

<style module="$a">
  .wrapper {
    background: #000;
  }
</style>

<style module="$b">
  .wrapper {
    background: #fff;
  }
</style>

setup (props, context) cannot work with CSS Modules, because context does not has property $a or $b.

[mgdodge]

Also, when using without custom inject names, context does not have the property $style:

<script>
  export default {
    setup(props, context) {
      // Get undefined instead of { wrapper: <random-string> }
      return context.$style;
    }
  }
</script>

<style module>
  .wrapper {
    background: #000;
  }
</style>

[mgdodge]

As a workaround, depending on your usage, it is possible to extract $a $b and $style from the onBeforeMount hook. For example:

<script>
  import { onBeforeMount } from '@vue/composition-api';
  export default {
    setup() {
      const css = { $a, $b, $style };
      onBeforeMount(function(){
        ({ $a: css.$a, $b: css.$b, $style: css.$style } = this);
      });
      // css.$a, css.$b, css.$style are now available for use in computed properties, etc.
      return {
        // no need to return $a/$b/$styles, added to instance by vue-loader
      };
    }
  }
</script>

<style module>
  .wrapper {
    background: #000;
  }
</style>

<style module="$a">
  .wrapper {
    background: #ccc;
  }
</style>

<style module="$b">
  .wrapper {
    background: #fff;
  }
</style>

[yoyo930021]

My workaround

import { getCurrentInstance } from '@vue/composition-api';

export default {
  setup () {
     const { $style } = getCurrentInstance()!
  }
}