Fix(style): reduce ReSpec FOUC (relates to #326)

js/core/style.js

@@ -1,32 +1,35 @@
-
 // Module core/style
 // Inserts the CSS that ReSpec uses into the document.
+//
 // IMPORTANT NOTE
-//  The extraCSS configuration option is now deprecated. People rarely use it, and it
-//  does not work well with the growing restrictions that browsers impose on loading
-//  local content. You can still add your own styles: for that you will have to create
-//  a plugin that declares the css as a dependency and create a build of your new
-//  ReSpec profile. It's rather easy, really.
+//  To add you own styles, create a plugin that declares the css as a dependency
+//  and create a build of your new ReSpec profile.
+//
 // CONFIGURATION
 //  - noReSpecCSS: if you're using a profile that loads this module but you don't want
 //    the style, set this to true
-
+"use strict";
 define(
-    ["text!core/css/respec2.css"],
-    function (css) {
-        return {
-            run:    function (conf, doc, cb, msg) {
-                msg.pub("start", "core/style");
-                if (conf.extraCSS) {
-                    msg.pub("warn", "The 'extraCSS' configuration property is now deprecated.");
-                }
-                if (!conf.noReSpecCSS) {
-                    $("<style/>").appendTo($("head", $(doc)))
-                                 .text(css);
-                }
-                msg.pub("end", "core/style");
-                cb();
-            }
-        };
-    }
+  [
+    "text!core/css/respec2.css",
+    "core/utils",
+  ],
+  function(css, utils) {
+    // Opportunistically inserts the style, with the chance to reduce some FOUC
+    var styleElement = document.createElement("style");
+    styleElement.id = "respec-mainstyle";
+    styleElement.textContent = css;
+    var swapStyleOwner = utils.makeOwnerSwapper(styleElement);
+    swapStyleOwner(document, document.head);
+    return {
+      run: function(conf, doc, cb) {
+        if (conf.noReSpecCSS) {
+          styleElement.remove();
+        } else if (styleElement.ownerDocument !== doc) {
+          swapStyleOwner(doc, doc.head);
+        }
+        cb();
+      },
+    };
+  }
 );