csz - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

index.js

		@@ -17,2 +17,4 @@ import stylis from './stylis.js';

		const isExternalStyleSheet = key => /^(\/\|https?:\/\/)/.test(key.trim());

		const process = key => hash => rules => {
		@@ -23,3 +25,3 @@ sheet.innerHTML += (cache[key] = {
		}).rules;
		if (key.startsWith('/')) show(hash);
		if (isExternalStyleSheet(key)) show(hash);
		};
		@@ -41,3 +43,3 @@

		if (key.startsWith('/')) {
		if (isExternalStyleSheet(key)) {
		hide(className);
		@@ -44,0 +46,0 @@ fetch(key)

package.json

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

README.md

		@@ -27,4 +27,8 @@ # 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
		```
		@@ -34,3 +38,3 @@

		> 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`.

		@@ -37,0 +41,0 @@ 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.

test/test.js

		@@ -21,2 +21,5 @@ import { React, ReactDOM } from 'https://unpkg.com/es-react'
		<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>
		@@ -23,0 +26,0 @@ `

New alerts