Implement loading of CSS Modules. Resolves #1991.

README.md

@@ -21,7 +21,7 @@ The minimal [1.5KB s.js loader](dist/s.min.js) provides a workflow where code wr
 Since the ES module semantics such as live bindings, circular references, contextual metadata, dynamic import and top-level await [can all be fully supported this way](docs/system-register.md#semantics), while supporting CSP and cross-origin support, this workflow can be relied upon as a polyfill-like path.
 
 * Loads and resolves modules as URLs, throwing for bare specifier names (eg `import 'lodash'`) like the native module loader.
-* Loads System.register and JSON modules.
+* Loads System.register, JSON, and CSS modules.
 * Core hookable extensible loader supporting [custom extensions](docs/hooks.md).
 
 #### 2. system.js loader
@@ -61,6 +61,8 @@ npm install systemjs
 * [API](docs/api.md)
 * [System.register](docs/system-register.md)
 * [Loader Hooks](docs/hooks.md)
+* [JSON modules](docs/json-modules.md)
+* [CSS modules](docs/css-modules.md)
 
 ## Example Usage
 

docs/css-modules.md

@@ -0,0 +1,22 @@
+# CSS Modules
+
+[CSS Modules](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md) are supported in both
+s.js and system.js.
+
+Note that the term CSS Modules refers to two separate things: (1) the browser spec, or (2) the webpack / postcss plugin.
+The CSS modules implemented by SystemJS are the browser spec.
+
+## Example
+```css
+/* file.css */
+.brown {
+  color: brown;
+}
+```
+
+```js
+System.import('file.css').then(function (module) {
+  const styleSheet = module.default; // A CSSStyleSheet object
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]; // now your css is available to be used.
+});
+```

docs/json-modules.md

@@ -0,0 +1,18 @@
+# JSON Modules
+
+[JSON modules](https://github.com/whatwg/html/pull/4407) are supported in both s.js and system.js.
+
+## Example
+
+**file.json**
+```json
+{
+  "some": "json value"
+}
+```
+
+```js
+System.import('file.json').then(function (module) {
+  console.log(module.default); // The json as a js object.
+});
+```

package.json

@@ -14,6 +14,7 @@
   ],
   "devDependencies": {
     "bluebird": "^3.5.1",
+    "construct-style-sheets-polyfill": "^2.1.0",
     "esm": "^3.2.25",
     "mocha": "^5.2.0",
     "rollup": "^0.64.1",

src/features/script-load.js

@@ -15,10 +15,25 @@ systemJSPrototype.instantiate = function (url, firstParentUrl) {
     return fetch(url).then(function (resp) {
       return resp.text();
     }).then(function (source) {
-      return [[], function(_export) {
+      return [[], function (_export) {
         return {execute: function() {_export('default', JSON.parse(source))}};
       }];
     });
+  } else if (url.substr(-4) === '.css') {
+    return fetch(url).then(function (resp) {
+      return resp.text();
+    }).then(function (source) {
+      return [[], function (_export) {
+        return {
+          execute: function () {
+            // Relies on a Constructable Stylesheet polyfill
+            const stylesheet = new CSSStyleSheet();
+            stylesheet.replaceSync(source);
+            _export('default', stylesheet);
+          }
+        };
+      }];
+    });
   } else {
     return new Promise(function (resolve, reject) {
       let err;

test/browser/core.js

@@ -158,4 +158,10 @@ suite('SystemJS Standard Tests', function() {
       assert.equal(m.addTwo(1, 1), 2);
     });
   });
+
+  test('should load a css module', async function () {
+    const m = await System.import('./css-modules/a.css')
+    assert.ok(m);
+    assert.ok(m.default instanceof CSSStyleSheet);
+  });
 });

test/fixtures/css-modules/a.css

@@ -0,0 +1,3 @@
+.hello {
+  background-color: peru;
+}

test/test.html

@@ -8,6 +8,7 @@
 		if (typeof fetch === 'undefined')
 			document.write('<script src="../node_modules/whatwg-fetch/fetch.js"><\/script>');
 	</script>
+	<script src="../node_modules/construct-style-sheets-polyfill/adoptedStyleSheets.js"></script>
 	<script>
 		// TODO IE11 URL polyfill testing
 		// if (typeof URL === 'undefined')