chore: add utils.styleLoader and utils.styleRule

scripts/utils.js

@@ -1,62 +1,33 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+const IS_DEV = process.env.NODE_ENV === 'development';
 
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  var cssLoader = {
+function styleLoader({ loaders = [], extract = !IS_DEV, minimize = !IS_DEV, fallback = 'style-loader' } = {}) {
+  const cssLoader = {
     loader: 'css-loader',
     options: {
-      minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
+      minimize,
+      importLoaders: 1,
+      sourceMap: false,
+    },
+  };
+  return extract ? ExtractTextPlugin.extract({
+    fallback,
+    use: [cssLoader, ...loaders],
+  }) : [
+    fallback,
+    cssLoader,
+    ...loaders,
+  ];
+}
 
-  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+function styleRule(options = {}) {
   return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
+    test: /\.css$/,
+    use: styleLoader(options),
+  };
 }
 
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-  return output
-}
+exports.IS_DEV = IS_DEV;
+exports.styleLoader = styleLoader;
+exports.styleRule = styleRule;

scripts/vue-loader.conf.js

@@ -1,10 +1,8 @@
-const utils = require('./utils');
-const isProduction = process.env.NODE_ENV === 'production';
+const { styleLoader } = require('./utils');
 
 module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: false,
-    extract: isProduction,
-  }),
+  loaders: {
+    css: styleLoader({ fallback: 'vue-style-loader' }),
+  },
   postcss: [ require('precss') ],
 };

scripts/webpack.base.conf.js

@@ -1,10 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const vueLoaderConfig = require('./vue-loader.conf');
-const utils = require('./utils');
+const { IS_DEV, styleRule } = require('./utils');
 const DIST = 'dist';
-process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-const IS_DEV = process.env.NODE_ENV === 'development';
 const definePlugin = new webpack.DefinePlugin({
   'process.env': {
     NODE_ENV: JSON.stringify(process.env.NODE_ENV),
@@ -57,10 +55,8 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test')]
       },
-    ].concat(utils.styleLoaders({
-      sourceMap: false,
-      extract: !IS_DEV,
-    })),
+      styleRule({ fallback: 'vue-style-loader' }),
+    ],
   },
   // cheap-module-eval-source-map is faster for development
   devtool: IS_DEV ? '#inline-source-map' : false,

scripts/webpack.conf.js

@@ -3,7 +3,7 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const base = require('./webpack.base.conf');
-const IS_DEV = process.env.NODE_ENV === 'development';
+const { IS_DEV } = require('./utils');
 
 const targets = module.exports = [];