Static GitHub Issues

[2143] CSS Modules: Redudant styles injected to <head> when accessing page directly

prev: Nuxt generate - whitelist/blacklist routes
next: rc12 when released, very much looking forward to

Problem

Using <style module> in Vue single-page component to implement CSS Modules, duplicate style declarations are being injected into <head> but only when accessing the page directly. When accessed via router (i.e. from another page via a <nuxt-link>), the behaviour seems to be as expected. The number of times it's injected corresponds to the number of components in which one of its classes are 'composed'.

Page accessed directly

screen shot 2017-11-18 at 2 53 00 pm

Page accessed via <nuxt-link>

screen shot 2017-11-18 at 2 53 47 pm

Example component (ui-a.vue)

<template>
  <section :class="$style.root"></section>
</template>

<script>
export default {}
</script>

<style lang="scss" module>

/* Dependencies
========================================================================== */
@value c-background-color "sass-loader!~/assets/styles/cosmetics/cosmetics.background-color.scss";  


/* Root class
========================================================================== */
.root {
  composes: purple  from c-background-color;
  padding: 20px;
}

</style>

Build.extend modifications

build: {
    extend (config, ctx) {
      const vueLoader = config.module.rules.find(({loader}) => loader === 'vue-loader')
      vueLoader.options.cssModules = {
        localIdentName: '[name]__[local]'
      }
      ...
   }
   ...
}

Expected

I'm a noob with absolutely all of this stuff (CSS Modules and SSR in particular), but I'd expect it to behave as it does in the second screenshot. No matter how many classes compose .class-X, class-X's stylesheet should only be injected once.

Additional Info

I've tried to keep the demo repo as minimal as I can. I've also published the static site to gh-pages: REPO: https://github.com/thisguyscode/nuxt-styleguide/tree/demo STATIC: https://thisguyscode.github.io/nuxt-styleguide/

Really I'm new to all of this - just a designer trying to play with all you smart peoples' shiny new toys. If anyone has even a little insight it would be a great help. I've looked through issues on other related repos, and the only promising one was https://github.com/css-modules/css-modules/issues/180, but that turned out not to help.

P.S. MAD love for the Nuxt team on all their hard work. Even a dunce like me was able to throw together a portfolio site that doesn't suck with Nuxt. Complete overkill for the purpose of course but a lot of learning and fun was involved so thanks Nuxt!!!

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1900">#c1900</a>)</em></sub></div>