From d60438df9237b8b480248cc33edc4477e2b8dc1f Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.ir>
Date: Fri, 23 Mar 2018 19:56:24 +0430
Subject: [PATCH] refactor(style-loader): explicit loaders order on apply
 function

---
 lib/builder/webpack/utils/style-loader.js | 66 ++++++++++-------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/lib/builder/webpack/utils/style-loader.js b/lib/builder/webpack/utils/style-loader.js
index 28774f2ada..70b613d46f 100644
--- a/lib/builder/webpack/utils/style-loader.js
+++ b/lib/builder/webpack/utils/style-loader.js
@@ -28,7 +28,7 @@ export default class StyleLoader {
     ))
   }
 
-  styleResource(ext, loaders) {
+  styleResource(ext) {
     const extResource = this.resources[ext]
     // style-resources-loader
     // https://github.com/yenshih/style-resources-loader
@@ -37,31 +37,31 @@ export default class StyleLoader {
         ? extResource
         : [extResource]
 
-      loaders.push({
+      return {
         loader: 'style-resources-loader',
         options: Object.assign(
           { patterns },
           this.resources.options || {}
         )
-      })
+      }
     }
   }
 
-  postcss(loaders) {
+  postcss() {
     // postcss-loader
     // https://github.com/postcss/postcss-loader
     if (this.postcssConfig) {
       const config = this.postcssConfig.config()
       if (config) {
-        loaders.unshift({
+        return {
           loader: 'postcss-loader',
           options: Object.assign({ sourceMap: this.sourceMap }, config)
-        })
+        }
       }
     }
   }
 
-  css(loaders) {
+  css(importLoaders) {
     // css-loader
     // https://github.com/webpack-contrib/css-loader
     const cssLoaderAlias = {
@@ -69,52 +69,42 @@ export default class StyleLoader {
       [`/${this.staticDir}`]: path.join(this.srcDir, this.staticDir)
     }
 
-    loaders.unshift({
+    return {
       loader: 'css-loader',
       options: {
         sourceMap: this.sourceMap,
         minimize: !this.dev,
-        importLoaders: loaders.length, // Important!
+        importLoaders: importLoaders,
         alias: cssLoaderAlias
       }
-    })
-  }
-
-  extract(loaders) {
-    if (this.extractCSS) {
-      loaders.unshift(MiniCssExtractPlugin.loader)
-      if (this.dev) {
-        // css-hot-loader
-        // https://github.com/shepherdwind/css-hot-loader
-        loaders.unshift({
-          loader: 'css-hot-loader',
-          options: { sourceMap: this.sourceMap }
-        })
-      }
-      return true
     }
   }
 
-  vueStyle(loaders) {
+  extract() {
+    if (this.extractCSS) {
+      return MiniCssExtractPlugin.loader
+    }
+  }
+
+  vueStyle() {
     // https://github.com/vuejs/vue-style-loader
-    loaders.unshift({
+    return {
       loader: 'vue-style-loader',
       options: { sourceMap: this.sourceMap }
-    })
+    }
   }
 
   apply(ext, loaders = []) {
-    // Normalize loaders
-    loaders = this.normalize(loaders)
+    const _customLoaders = [].concat(
+      this.postcss(loaders),
+      this.styleResource(ext),
+      this.normalize(loaders)
+    ).filter(Boolean)
 
-    // -- Configure additional loaders --
-    this.styleResource(ext, loaders)
-    this.postcss(loaders)
-    this.css(loaders)
-    if (!this.extract(loaders)) {
-      this.vueStyle(loaders)
-    }
-
-    return loaders
+    return [].concat(
+      this.extract() || this.vueStyle(),
+      this.css(_customLoaders.length),
+      _customLoaders
+    ).filter(Boolean)
   }
 }