fix(addStyles): correctly check singleton behavior when {Boolean}…

… (`options.singleton`) (#285)
webpack-contrib · Dec 14, 2017 · 2bfc93e · 2bfc93e
1 parent 57c457d
commit 2bfc93e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -140,6 +140,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
 |**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
 |**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
+|**`singleton`**|`{Boolean}`|`undefined`|Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module.|
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
 
@@ -331,7 +332,7 @@ You can also insert the styles into a [ShadowRoot](https://developer.mozilla.org
 
 ### `singleton`
 
-If defined, the style-loader will reuse a single `<style>` element, instead of adding/removing individual elements for each required module.
+If defined, the style-loader will reuse a single `<style></style>` element, instead of adding/removing individual elements for each required module.
 
 > ℹ️  This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.
 

diff --git a/lib/addStyles.js b/lib/addStyles.js
@@ -64,7 +64,7 @@ module.exports = function(list, options) {
 
 	// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 	// tags it will allow on a page
-	if (!options.singleton) options.singleton = isOldIE();
+	if (!options.singleton && typeof options.singleton !== "boolean") options.singleton = isOldIE();
 
 	// By default, add <style> tags to the <head> element
 	if (!options.insertInto) options.insertInto = "head";

diff --git a/test/basicTest.js b/test/basicTest.js
@@ -140,7 +140,7 @@ describe("basic tests", function() {
     }, selector);
   }); // it insert into
 
-  it("singleton", function(done) {
+  it("singleton (true)", function(done) {
     // Setup
     styleLoaderOptions.singleton = true;
 
@@ -161,6 +161,27 @@ describe("basic tests", function() {
     runCompilerTest(expected, done);
   }); // it singleton
 
+  it("singleton (false)", function(done) {
+    // Setup
+    styleLoaderOptions.singleton = false;
+
+    fs.writeFileSync(
+      rootDir + "main.js",
+      [
+        "var a = require('./style.css');",
+        "var b = require('./styleTwo.css');"
+      ].join("\n")
+    );
+
+    // Run
+    let expected = [
+      existingStyle,
+      `<style type="text/css">${requiredCss}</style><style type="text/css">${requiredCssTwo}</style>`
+    ].join("\n");
+
+    runCompilerTest(expected, done);
+  }); // it singleton
+
   it("attrs", function(done) {
     // Setup
     styleLoaderOptions.attrs = {id: 'style-tag-id'};