working around a bug in vue-loader by putting module styles first

And removing redundant id="app" element

Author: weaverryan

fixtures/vuejs-css-modules/App.vue

@@ -1,7 +1,36 @@
 <template>
-  <div id="app" class="red large justified lowercase block" :class="[$css.italic, $scss.bold, $less.underline, $stylus.rtl, $postcss.hidden]"></div>
+  <div class="red large justified lowercase block" :class="[$css.italic, $scss.bold, $less.underline, $stylus.rtl, $postcss.hidden]"></div>
 </template>
 
+<style module="$css">
+  .italic {
+    font-style: italic;
+  }
+</style>
+
+<style lang="scss" module="$scss">
+  .bold {
+    font-weight: bold;
+  }
+</style>
+
+<style lang="less" module="$less">
+  .underline {
+    text-decoration: underline;
+  }
+</style>
+
+<style lang="styl" module="$stylus">
+  .rtl
+    direction: rtl;
+</style>
+
+<style lang="postcss" module="$postcss">
+  .hidden {
+    visibility: hidden;
+  }
+</style>
+
 <style>
   .red {
     color: red;
@@ -30,33 +59,3 @@
     display: block;
   }
 </style>
-
-
-<style module="$css">
-  .italic {
-    font-style: italic;
-  }
-</style>
-
-<style lang="scss" module="$scss">
-  .bold {
-    font-weight: bold;
-  }
-</style>
-
-<style lang="less" module="$less">
-  .underline {
-    text-decoration: underline;
-  }
-</style>
-
-<style lang="styl" module="$stylus">
-  .rtl
-    direction: rtl;
-</style>
-
-<style lang="postcss" module="$postcss">
-  .hidden {
-    visibility: hidden;
-  }
-</style>

test/functional.js

@@ -1802,17 +1802,17 @@ module.exports = {
                         'build/main.js'
                     ],
                     (browser) => {
-                        browser.assert.hasClass('#app', 'red'); // Standard CSS
-                        browser.assert.hasClass('#app', 'large'); // Standard SCSS
-                        browser.assert.hasClass('#app', 'justified'); // Standard Less
-                        browser.assert.hasClass('#app', 'lowercase'); // Standard Stylus
-                        browser.assert.hasClass('#app', 'block'); // Standard Stylus
-
-                        browser.assert.hasClass('#app', 'italic_foo'); // CSS module
-                        browser.assert.hasClass('#app', 'bold_foo'); // SCSS module
-                        browser.assert.hasClass('#app', 'underline_foo'); // Less module
-                        browser.assert.hasClass('#app', 'rtl_foo'); // Stylus module
-                        browser.assert.hasClass('#app', 'hidden_foo'); // Stylus module
+                        browser.assert.hasClass('#app div', 'red'); // Standard CSS
+                        browser.assert.hasClass('#app div', 'large'); // Standard SCSS
+                        browser.assert.hasClass('#app div', 'justified'); // Standard Less
+                        browser.assert.hasClass('#app div', 'lowercase'); // Standard Stylus
+                        browser.assert.hasClass('#app div', 'block'); // Standard Stylus
+
+                        browser.assert.hasClass('#app div', 'italic_foo'); // CSS module
+                        browser.assert.hasClass('#app div', 'bold_foo'); // SCSS module
+                        browser.assert.hasClass('#app div', 'underline_foo'); // Less module
+                        browser.assert.hasClass('#app div', 'rtl_foo'); // Stylus module
+                        browser.assert.hasClass('#app div', 'hidden_foo'); // Stylus module
 
                         done();
                     }