feat(all): normalize features across css configs

Author: niieani

package.json

@@ -31,11 +31,11 @@
   "devDependencies": {
     "ava": "^0.15.2",
     "semantic-release": "^4.3.5",
-    "ts-node": "^0.9.1",
-    "tslint": "^3.11.0",
-    "tslint-config-standard": "^1.2.2",
+    "ts-node": "^0.9.3",
+    "tslint": "^3.13.0",
+    "tslint-config-standard": "^1.3.0",
     "typescript": ">=1.9.0-dev.20160619-1.0 || ^2.0.0",
-    "typings": "^1.3.0"
+    "typings": "^1.3.1"
   },
   "dependencies": {
     "css-loader": "^0.23.1",

src/index.ts

@@ -1,34 +1,51 @@
-import {WebpackConfig, get} from '@easy-webpack/core'
+import {WebpackConfig, get} from '@easy-webpack/core';
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 /**
- * CSS loader support for *.less
- * @param sourceMap enable generating source maps (slower build)
- * @param extractCss leave empty to skip extracting CSS or define an object with filename and optionally allChunks (boolean)
+ * LESS loader support for *.less
+ * filename: name of the extracted file
+ * allChunks: should we extract all chunks to the file?
+ * sourceMap: do you want a sourceMap generated? (takes longer)
+ * extractText: do you want to extract all css to a separate file? boolean, configuration object or instance of ExtractTextPlugin, defaults to true
+ * resolveRelativeUrl: boolean or object with parameters
  */
-export = function less(extractCss = { filename: '[name].css', allChunks: false, sourceMap: false }) {
+export = function less({ filename = '[name].css', allChunks = false, sourceMap = false, extractText = undefined, resolveRelativeUrl = undefined } = {}) {
   return function less(this: WebpackConfig): WebpackConfig {
-    const extractCSSinstance = extractCss ? new ExtractTextPlugin(extractCss.filename || '[name].css', extractCss) : null
-    const cssLoader = `css${extractCss.sourceMap ? '?sourceMap!less' : '!less'}`
+    const loaders = ['style', `css${sourceMap ? '?sourceMap' : ''}`]
+
+    if (resolveRelativeUrl) {
+      loaders.push(`resolve-url${sourceMap ? '?sourceMap' : ''}`)
+      sourceMap = true // source maps need to be on for this
+    }
+
+    loaders.push(`less${sourceMap ? '?sourceMap' : ''}`)
+
+    const extractCss = extractText === false
+    const providedInstance = extractText instanceof ExtractTextPlugin
+    if (!providedInstance)
+      extractText = extractCss ? new ExtractTextPlugin(filename, extractText instanceof Object ? extractText : { allChunks, sourceMap }) : null
     const config = {
       module: {
         loaders: get(this, 'module.loaders', []).concat([{
           test: /\.less$/i,
-          loaders: extractCss ? extractCSSinstance.extract('style', cssLoader) : ['style', cssLoader]
+          loaders: extractCss ? extractText.extract(...loaders) : loaders
         }])
       }
     } as WebpackConfig
-    if (extractCSSinstance) {
+    if (extractText && !providedInstance) {
       config.plugins = [
         /**
          * Plugin: ExtractTextPlugin
          * It moves every import "style.css" in entry chunks into a single concatenated css output file. 
          * So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). 
          * If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
          */
-        extractCSSinstance
+        extractText
       ].concat(get(this, 'plugins', []))
     }
+    if (resolveRelativeUrl instanceof Object) {
+      config['resolveUrlLoader'] = resolveRelativeUrl
+    }
     return config
   }
 }