millermedeiros · itaym · May 23, 2020 · May 23, 2020
diff --git a/README.mdown b/README.mdown
@@ -19,6 +19,7 @@ bower install --save requirejs-plugins
 ## Plugins
 
  - **async** : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).
+ - **css**: Load css files.
  - **font** : Load web fonts using the [WebFont Loader API](https://code.google.com/apis/webfonts/docs/webfont_loader.html)
    (requires `propertyParser`)
  - **goog** : Load [Google APIs](http://code.google.com/apis/loader/)
@@ -54,6 +55,7 @@ require.config({
     paths : {
         //create alias to plugins (not needed if plugins are on the baseUrl)
         async: 'lib/require/async',
+        css: 'lib/require/css',
         font: 'lib/require/font',
         goog: 'lib/require/goog',
         image: 'lib/require/image',
@@ -74,7 +76,8 @@ define([
         'async!http://maps.google.com/maps/api/js?sensor=false',
         'goog!visualization,1,packages:[corechart,geochart]',
         'goog!search,1',
-        'font!google,families:[Tangerine,Cantarell]'
+        'font!google,families:[Tangerine,Cantarell]',
+        'css!file.css',
     ], function(awsum, foo, bar, loremIpsum){
         //all dependencies are loaded (including gmaps and other google apis)
     }

diff --git a/bower.json b/bower.json
@@ -3,6 +3,7 @@
   "version": "1.0.3",
   "main": [
     "src/async.js",
+    "src/css.js",
     "src/depend.js",
     "src/font.js",
     "src/goog.js",

diff --git a/examples/css.html b/examples/css.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>RequireJS css plugin</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+    <body>
+        <div id="wrapper">
+            <h1>RequireJS css plugin</h1>
+            <h2>Notes:</h2>
+            <ul>
+                <li>CSS paths are relative to the HTML file by default.</li>
+                <li>Support absolute paths as well.</li>
+            </ul>
+            <hr />
+            <div class="example"><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
+        </div>
+        <script src="../lib/require.js"></script>
+        <script>
+            require.config({
+                paths : {
+                    css : '../src/css' //alias to plugin
+                }
+            });
+            require(['css!css/example.css']);
+        </script>
+    </body>
+</html>
diff --git a/examples/css/example.css b/examples/css/example.css
@@ -0,0 +1,30 @@
+* {
+    box-sizing: border-box;
+}
+.example {
+    width: 256px;
+    height: 256px;
+}
+.example div {
+    position: relative;
+    border-radius: 100%;
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+}
+.example > div { background: rgb(0 , 0, 0); }
+.example > div > div { background: rgb(16 , 16, 16); }
+.example > div > div > div { background: rgb(32 , 32, 32); }
+.example > div > div > div > div { background: rgb(48 , 48, 48); }
+.example > div > div > div > div > div { background: rgb(64 , 64, 64); }
+.example > div > div > div > div > div > div { background: rgb(80 , 80, 80); }
+.example > div > div > div > div > div > div > div { background: rgb(96 , 96, 96); }
+.example > div > div > div > div > div > div > div > div { background: rgb(112 , 112, 112); }
+.example > div > div > div > div > div > div > div > div > div { background: rgb(128 , 128, 128); }
+.example > div > div > div > div > div > div > div > div > div > div { background: rgb(144 , 144, 144); }
+.example > div > div > div > div > div > div > div > div > div > div > div { background: rgb(160 , 160, 160); }
+.example > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(176 , 176, 176); }
+.example > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(192 , 192, 192); }
+.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(208 , 208, 208); }
+.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(224 , 224, 224); }
+.example > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div { background: rgb(240 , 240, 240); }
diff --git a/src/css.js b/src/css.js
@@ -0,0 +1,81 @@
+/** @license
+ * RequireJS plugin for loading css files`
+ * Author: Itay Merchav
+ * (2017/08/23)
+ * Released under the MIT license
+ */
+define("css", function () {
+    "use strict";
+
+    var XMLHttpFactories = [
+        function () {return new XMLHttpRequest()},
+        function () {return new ActiveXObject("Msxml2.XMLHTTP")},
+        function () {return new ActiveXObject("Msxml3.XMLHTTP")},
+        function () {return new ActiveXObject("Microsoft.XMLHTTP")}
+    ];
+
+    function createXMLHTTPObject () {
+
+        var xmlHttp = false;
+
+        for (var index = 0; index < XMLHttpFactories.length; index++) {
+            try       { xmlHttp = XMLHttpFactories[index](); }
+            catch (e) { continue; }
+            break;
+        }
+        return xmlHttp;
+    }
+
+    function createLink (srcArg) {
+
+        var head = document.getElementsByTagName('head')[0];
+        var link = document.createElement('link');
+            link.type = 'text/css';
+            link.rel = 'stylesheet';
+            link.href = srcArg;
+
+        head.appendChild(link);
+        return link;
+    }
+
+    function sendRequest (urlArg, callbackSuccessArg, callbackErrorArg) {
+
+        var xmlHttpObject = createXMLHTTPObject();
+        if (!xmlHttpObject) return;
+
+        xmlHttpObject.open("GET", urlArg, true);
+
+        xmlHttpObject.onreadystatechange = function () {
+
+            if (xmlHttpObject.readyState != 4) return;
+
+            if (xmlHttpObject.status != 200 && xmlHttpObject.status != 304) {
+                callbackErrorArg(xmlHttpObject);
+            }
+            else {
+                callbackSuccessArg(xmlHttpObject.responseText);
+            }
+        };
+
+        if (xmlHttpObject.readyState == 4) return;
+        xmlHttpObject.send();
+    }
+
+    //noinspection JSUnusedLocalSymbols
+    return {
+
+        load: function (nameArg, parentRequireArg, onLoadArg, configArg) {
+
+            function callbackSuccess (cssStreamArg) {
+                //The file is here, it will be loaded as css from the cache.
+                createLink(nameArg);
+                onLoadArg(cssStreamArg);
+            }
+            function callbackError (status) {
+                //Report the error
+                onLoadArg.error(status);
+            }
+            sendRequest(nameArg, callbackSuccess, callbackError);
+        }
+    }
+});