Skip to content
This repository has been archived by the owner on Jan 21, 2022. It is now read-only.

Latest commit

 

History

History
88 lines (67 loc) · 1.61 KB

README.md

File metadata and controls

88 lines (67 loc) · 1.61 KB
Raw

import-css

NPM version

Load CSS asynchronously without render blocking in the given order.

Install

npm i -S import-css
# or
yarn add import-css

About

import-css contains 2 variants of importCSS function

  1. link.js variant uses <link> tag. If you want to import multiple styles for "progressive loading" recommended move all function calls before </body>.

  2. link-in-body.js also uses<link> tag, but this variant a little lighter than link.js because of restricted to use only in <body>.

Also exist *-async.js variants of both files, where you can import CSS outside of queue.

API

importCSS(String url, String media)

Files: link.js, link-in-body.js

importCSS(String url, String media, Boolean async)

Files: link-async.js, link-in-body-async.js

Examples

critical css

section, footer {
	display: none;
}

section.css

section {
	display: block;
	color: green;
}

footer.css

footer {
	display: block;
	color: red;
}

index.html with link.js

<!DOCTYPE html>
<html>
	<head>
		<script>(link.js)</script>
		<style>(critical css)</style>
	</head>
	<body>
		<header>
			<h1>Header</h1>
		</header>
		<section>
			<h1>Section</h1>
		</section>
		<footer>
			<h1>Footer</h1>
		</footer>
		<script>importCSS('section.css')</script>
		<script>importCSS('footer.css')</script>
	</body>
</html>

NPM