Adds support for external stylesheets with absolute urls (#9)

* Update index.js

* Update test.js

* Update package.json

* Update test.js

* Update index.js

* Update test.js

* Update README.md

README.md

@@ -24,13 +24,17 @@ The package is designed to be used as an ES module. You can import it directly f
 ```js
 import css from 'https://unpkg.com/csz';
 
-const static = css`background: blue;`; // generate class name for ruleset
-const dynamic = css`/index.css`; // generate class name for file contents
+// static
+const inlined = css`background: blue;`; // generate class name for ruleset
+
+// dynamic (from stylesheet)
+const relative = css`/index.css`; // generate class name for file contents
+const absolute = css`https://example.com/index.css`; // generate class name for file contents
 ```
 
 Both variations (static and dynamic) are sync and return a string in a format similar to `csz-b60d61b8`. If a ruleset is provided as a string then it is processed immediately but if a filepath is provided then processing is deferred until the contents of the file has been fetched and parsed.
 
-> **NOTE:** All file paths must start with a `/` and be absolute (relative to the current hostname) so if you are running your app on `example.com` and require `/styles/index.css` then csz will try fetch it from `example.com/styles/index.css`.
+> **NOTE:** File paths starting with `/` must be relative to the current hostname, so if you are running your app on `example.com` and require `/styles/index.css` then csz will try fetch it from `example.com/styles/index.css`.
 
 Styles imported from a file are inevitably going to take some amount of time to download. Whilst the stylesheet is being downloaded a temporary ruleset is applied to the element which hides it (using `display: none`) until the fetched files have been processed. This was implemented to prevent flashes of unstyled content.
 

index.js

@@ -14,12 +14,14 @@ const hide = hash => (sheet.innerHTML = none(hash) + sheet.innerHTML);
 const show = hash =>
   (sheet.innerHTML = sheet.innerHTML.replace(none(hash), ''));
 
+const isExternalStyleSheet = key => /^(\/|https?:\/\/)/.test(key.trim());
+
 const process = key => hash => rules => {
   sheet.innerHTML += (cache[key] = {
     hash,
     rules: stylis()(`.${hash}`, rules)
   }).rules;
-  if (key.startsWith('/')) show(hash);
+  if (isExternalStyleSheet(key)) show(hash);
 };
 
 export default (strings, ...values) => {
@@ -36,7 +38,7 @@ export default (strings, ...values) => {
   const className = 'csz-' + hash();
   const append = process(key)(className);
 
-  if (key.startsWith('/')) {
+  if (isExternalStyleSheet(key)) {
     hide(className);
     fetch(key)
       .then(res => res.text())

package.json

@@ -1,6 +1,6 @@
 {
   "name": "csz",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Runtime CSS modules with SASS like preprocessing",
   "main": "index.js",
   "module": "index.js",

test/test.js

@@ -18,6 +18,9 @@ const App = () => {
     >
       <h1>Hello World!</h1>
       <button className="btn" onClick=${e => setToggle(!toggle)}>Toggle</button>
+      <div className=${css`https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css`}>
+        <h1 class="bg-blue-500">Hello from tailwind</h1>
+      </div>
     </div>
   `
 }