diff --git a/README.md b/README.md index 81d9169..c5ffe92 100644 --- a/README.md +++ b/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. diff --git a/index.js b/index.js index 19f48d0..cfd36b3 100644 --- a/index.js +++ b/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()) diff --git a/package.json b/package.json index a3cd30f..54120c4 100644 --- a/package.json +++ b/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", diff --git a/test/test.js b/test/test.js index 84ffe93..7bab844 100644 --- a/test/test.js +++ b/test/test.js @@ -18,6 +18,9 @@ const App = () => { >

Hello World!

+
+

Hello from tailwind

+
` }