feat: add option.base (#164)

README.md

@@ -93,6 +93,39 @@ require('style-loader/url?{attrs:{prop: "value"}}!file-loader!style.css')
 // will create link tag <link rel="stylesheet" type="text/css" href="[path]/style.css" prop="value">
 ```
 
+#### `base`
+This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s.  `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:
+* webpack.dll1.config.js
+```
+{
+  test: /\.css$/,
+  use: [ 
+    'style-loader',
+    'css-loader'
+  ]
+}
+```
+* webpack.dll2.config.js
+```
+{
+  test: /\.css$/,
+  use: [ 
+    { loader: 'style-loader', options: { base: 1000 } },
+    'css-loader'
+  ]
+}
+```
+* webpack.app.config.js
+```
+{
+  test: /\.css$/,
+  use: [ 
+    { loader: 'style-loader', options: { base: 2000 } },
+    'css-loader'
+  ]
+}
+```
+
 ### Recommended configuration
 
 By convention the reference-counted API should be bound to `.useable.css` and the simple API to `.css` (similar to other file types, i.e. `.useable.less` and `.less`).

addStyles.js

@@ -52,7 +52,7 @@ module.exports = function(list, options) {
 	// By default, add <style> tags to the bottom of the target
 	if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
 
-	var styles = listToStyles(list);
+	var styles = listToStyles(list, options);
 	addStylesToDom(styles, options);
 
 	return function update(newList) {
@@ -64,7 +64,7 @@ module.exports = function(list, options) {
 			mayRemove.push(domStyle);
 		}
 		if(newList) {
-			var newStyles = listToStyles(newList);
+			var newStyles = listToStyles(newList, options);
 			addStylesToDom(newStyles, options);
 		}
 		for(var i = 0; i < mayRemove.length; i++) {
@@ -100,12 +100,12 @@ function addStylesToDom(styles, options) {
 	}
 }
 
-function listToStyles(list) {
+function listToStyles(list, options) {
 	var styles = [];
 	var newStyles = {};
 	for(var i = 0; i < list.length; i++) {
 		var item = list[i];
-		var id = item[0];
+		var id = options.base ? item[0] + options.base : item[0];
 		var css = item[1];
 		var media = item[2];
 		var sourceMap = item[3];