|
| 1 | +var loader = require("@loader"); |
| 2 | +var steal = require("@steal"); |
| 3 | + |
| 4 | +var isNode = typeof process === "object" && {}.toString.call(process) === |
| 5 | + "[object process]"; |
| 6 | +var importRegEx = /@import [^uU]['"]?([^'"\)]*)['"]?/g; |
| 7 | +var resourceRegEx = /url\(['"]?([^'"\)]*)['"]?\)/g; |
| 8 | + |
| 9 | +var waitSeconds = (loader.cssOptions && loader.cssOptions.timeout) |
| 10 | + ? parseInt(loader.cssOptions.timeout, 10) : 60; |
| 11 | +var onloadCss = function(link, cb){ |
| 12 | + var styleSheets = getDocument().styleSheets, |
| 13 | + i = styleSheets.length; |
| 14 | + while( i-- ){ |
| 15 | + if( styleSheets[ i ].href === link.href ){ |
| 16 | + return cb(); |
| 17 | + } |
| 18 | + } |
| 19 | + setTimeout(function() { |
| 20 | + onloadCss(link, cb); |
| 21 | + }); |
| 22 | +}; |
| 23 | + |
| 24 | +function isIE9() { |
| 25 | + var doc = getDocument(); |
| 26 | + |
| 27 | + // https://github.com/conditionizr/conditionizr/blob/111964e63ddda5f2db5dbc3c1587dfda9f5ca3b2/detects/ie9.js#L6 |
| 28 | + return doc && |
| 29 | + !!(Function('/*@cc_on return (/^9/.test(@_jscript_version) && /MSIE 9\.0(?!.*IEMobile)/i.test(navigator.userAgent)); @*/')()); |
| 30 | +} |
| 31 | + |
| 32 | +function getDocument() { |
| 33 | + if(typeof doneSsr !== "undefined" && doneSsr.globalDocument) { |
| 34 | + return doneSsr.globalDocument; |
| 35 | + } |
| 36 | + |
| 37 | + if(typeof document !== "undefined") { |
| 38 | + return document; |
| 39 | + } |
| 40 | + |
| 41 | + throw new Error("Unable to load CSS in an environment without a document."); |
| 42 | +} |
| 43 | + |
| 44 | +function getHead() { |
| 45 | + var doc = getDocument(); |
| 46 | + var head = doc.head || doc.getElementsByTagName("head")[0]; |
| 47 | + |
| 48 | + if(!head) { |
| 49 | + var docEl = doc.documentElement || doc; |
| 50 | + head = doc.createElement("head"); |
| 51 | + docEl.insertBefore(head, docEl.firstChild); |
| 52 | + } |
| 53 | + return head; |
| 54 | +} |
| 55 | + |
| 56 | +/** |
| 57 | + * |
| 58 | + */ |
| 59 | +function CSSModule(load, loader) { |
| 60 | + if(typeof load === "object") { |
| 61 | + this.load = load; |
| 62 | + this.loader = loader; |
| 63 | + this.address = this.load.address; |
| 64 | + this.source = this.load.source; |
| 65 | + } else { |
| 66 | + this.address = load; // this is a string |
| 67 | + this.source = loader; // this is a string |
| 68 | + } |
| 69 | +} |
| 70 | + |
| 71 | +// required for IE9 stylesheet limit hack |
| 72 | +CSSModule.cssCount = 0; |
| 73 | +CSSModule.ie9MaxStyleSheets = 31; |
| 74 | +CSSModule.currentStyleSheet = null; |
| 75 | + |
| 76 | +CSSModule.prototype = { |
| 77 | + injectLink: function(){ |
| 78 | + if(this._loaded) { |
| 79 | + return this._loaded; |
| 80 | + } |
| 81 | + |
| 82 | + if(this.linkExists()) { |
| 83 | + this._loaded = Promise.resolve(''); |
| 84 | + return this._loaded; |
| 85 | + } |
| 86 | + |
| 87 | + // inspired by https://github.com/filamentgroup/loadCSS |
| 88 | + var doc = getDocument(); |
| 89 | + |
| 90 | + var link = this.link = doc.createElement("link"); |
| 91 | + link.type = "text/css"; |
| 92 | + link.rel = "stylesheet"; |
| 93 | + link.href = this.address; |
| 94 | + |
| 95 | + // wait until the css file is loaded |
| 96 | + this._loaded = new Promise(function(resolve, reject) { |
| 97 | + var timeout = setTimeout(function() { |
| 98 | + reject('Unable to load CSS'); |
| 99 | + }, waitSeconds * 1000); |
| 100 | + |
| 101 | + var loadCB = function(event) { |
| 102 | + clearTimeout(timeout); |
| 103 | + link.removeEventListener("load", loadCB); |
| 104 | + link.removeEventListener("error", loadCB); |
| 105 | + |
| 106 | + if(event && event.type === "error"){ |
| 107 | + reject('Unable to load CSS'); |
| 108 | + } else { |
| 109 | + resolve(''); |
| 110 | + } |
| 111 | + }; |
| 112 | + |
| 113 | + // This code is for browsers that don’t support onload |
| 114 | + // No support for onload (it'll bind but never fire): |
| 115 | + // * Android 4.3 (Samsung Galaxy S4, Browserstack) |
| 116 | + // * Android 4.2 Browser (Samsung Galaxy SIII Mini GT-I8200L) |
| 117 | + // * Android 2.3 (Pantech Burst P9070) |
| 118 | + // * Zombie headless browser |
| 119 | + // Weak inference targets Android < 4.4 and |
| 120 | + // a fallback for IE 8 and beneath |
| 121 | + if("isApplicationInstalled" in navigator || !link.addEventListener) { |
| 122 | + // fallback, polling styleSheets |
| 123 | + onloadCss(link, loadCB); |
| 124 | + } else if(navigator.noUI){ |
| 125 | + // Zombie |
| 126 | + loadCB(); |
| 127 | + } else { |
| 128 | + // attach onload event for all modern browser |
| 129 | + link.addEventListener( "load", loadCB ); |
| 130 | + link.addEventListener( "error", loadCB ); |
| 131 | + } |
| 132 | + |
| 133 | + getHead().appendChild(link); |
| 134 | + }); |
| 135 | + |
| 136 | + return this._loaded; |
| 137 | + }, |
| 138 | + |
| 139 | + injectStyle: function(){ |
| 140 | + var doc = getDocument(); |
| 141 | + var head = getHead(); |
| 142 | + var style = this.style = doc.createElement('style'); |
| 143 | + |
| 144 | + // make source load relative to the current page |
| 145 | + style.type = 'text/css'; |
| 146 | + |
| 147 | + // Starting with IE11, `styleSheet` isn't support but `sheet` is |
| 148 | + // https://msdn.microsoft.com/en-us/library/dd347030(v=vs.85).aspx |
| 149 | + if (style.sheet) { |
| 150 | + style.sheet.cssText = this.source; |
| 151 | + } else if (style.styleSheet) { |
| 152 | + style.styleSheet.cssText = this.source; |
| 153 | + } else { |
| 154 | + style.appendChild(doc.createTextNode(this.source)); |
| 155 | + } |
| 156 | + |
| 157 | + head.appendChild(style); |
| 158 | + }, |
| 159 | + |
| 160 | + /** |
| 161 | + * Inject stylesheets and re-used them to avoid IE9 limit |
| 162 | + * https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/ |
| 163 | + */ |
| 164 | + ie9StyleSheetLimitHack: function() { |
| 165 | + var doc = getDocument(); |
| 166 | + |
| 167 | + // create the sheet to be re-used until limit is reached |
| 168 | + if (!CSSModule.cssCount) { |
| 169 | + CSSModule.currentStyleSheet = doc.createStyleSheet(); |
| 170 | + } |
| 171 | + |
| 172 | + CSSModule.cssCount += 1; |
| 173 | + CSSModule.currentStyleSheet.cssText += this.source; |
| 174 | + |
| 175 | + // reset the count to force the creation of a new stylesheet |
| 176 | + if (CSSModule.cssCount === CSSModule.ie9MaxStyleSheets) { |
| 177 | + CSSModule.cssCount = 0; |
| 178 | + } |
| 179 | + }, |
| 180 | + |
| 181 | + // Replace @import's that don't start with a "u" or "U" and do start |
| 182 | + // with a single or double quote with a path wrapped in "url()" |
| 183 | + // relative to the page |
| 184 | + updateURLs: function(){ |
| 185 | + var rawSource = this.source, |
| 186 | + address = this.address; |
| 187 | + |
| 188 | + this.source = rawSource.replace(importRegEx, function(whole, part){ |
| 189 | + if(isNode) { |
| 190 | + return "@import url(" + part + ")"; |
| 191 | + }else{ |
| 192 | + return "@import url(" + steal.joinURIs(address, part) + ")"; |
| 193 | + } |
| 194 | + }); |
| 195 | + |
| 196 | + if(!loader.isEnv('build')) { |
| 197 | + this.source = this.source + "/*# sourceURL=" + address + " */"; |
| 198 | + this.source = this.source.replace(resourceRegEx, function(whole, part){ |
| 199 | + return "url(" + steal.joinURIs(address, part) + ")"; |
| 200 | + }); |
| 201 | + |
| 202 | + } |
| 203 | + return this.source; |
| 204 | + }, |
| 205 | + |
| 206 | + getExistingNode: function(){ |
| 207 | + var doc = getDocument(); |
| 208 | + var selector = "[href='" + this.address + "']"; |
| 209 | + return doc.querySelector && doc.querySelector(selector); |
| 210 | + }, |
| 211 | + |
| 212 | + linkExists: function(){ |
| 213 | + var styleSheets = getDocument().styleSheets; |
| 214 | + for (var i = 0; i < styleSheets.length; ++i) { |
| 215 | + if(this.address === styleSheets[i].href){ |
| 216 | + return true; |
| 217 | + } |
| 218 | + } |
| 219 | + return false; |
| 220 | + }, |
| 221 | + |
| 222 | + setupLiveReload: function(loader, name){ |
| 223 | + var head = getHead(); |
| 224 | + var css = this; |
| 225 | + |
| 226 | + if(loader.liveReloadInstalled) { |
| 227 | + var cssReload = loader["import"]("live-reload", { |
| 228 | + name: module.id |
| 229 | + }); |
| 230 | + |
| 231 | + Promise.resolve(cssReload).then(function(reload){ |
| 232 | + loader["import"](name).then(function(){ |
| 233 | + reload.once("!dispose/" + name, function(){ |
| 234 | + css.style.__isDirty = true; |
| 235 | + reload.once("!cycleComplete", function(){ |
| 236 | + head.removeChild(css.style); |
| 237 | + }); |
| 238 | + }); |
| 239 | + }); |
| 240 | + }); |
| 241 | + } |
| 242 | + } |
| 243 | +}; |
| 244 | + |
| 245 | + |
| 246 | +if(loader.isEnv("production")) { |
| 247 | + exports.fetch = function(load) { |
| 248 | + var css = new CSSModule(load.address); |
| 249 | + return css.injectLink(); |
| 250 | + }; |
| 251 | +} else { |
| 252 | + exports.instantiate = function(load) { |
| 253 | + var loader = this; |
| 254 | + |
| 255 | + var css = new CSSModule(load.address, load.source); |
| 256 | + load.source = css.updateURLs(); |
| 257 | + |
| 258 | + load.metadata.deps = []; |
| 259 | + load.metadata.format = "css"; |
| 260 | + load.metadata.execute = function(){ |
| 261 | + if (getDocument()) { |
| 262 | + if (isIE9()) { |
| 263 | + css.ie9StyleSheetLimitHack(); |
| 264 | + } else { |
| 265 | + css.injectStyle(); |
| 266 | + } |
| 267 | + css.setupLiveReload(loader, load.name); |
| 268 | + } |
| 269 | + |
| 270 | + return loader.newModule({ |
| 271 | + source: css.source |
| 272 | + }); |
| 273 | + }; |
| 274 | + }; |
| 275 | + |
| 276 | +} |
| 277 | + |
| 278 | +exports.CSSModule = CSSModule; |
| 279 | +exports.getDocument = getDocument; |
| 280 | +exports.getHead = getHead; |
| 281 | +exports.locateScheme = true; |
| 282 | +exports.buildType = "css"; |
| 283 | +exports.includeInBuild = true; |
| 284 | +exports.pluginBuilder = "steal-css/slim"; |
0 commit comments