❤
npm
Sign UpSign In

import-css

3.0.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i import-css

Repository

github.com/TrigenSoftware/import-css

Homepage

github.com/TrigenSoftware/import-css#readme

Weekly Downloads

2

Version

3.0.0

License

MIT

Last publish

Collaborators

  • dangreen
Try on RunKit
Report malware