defer-css - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

dist/browser.d.ts

@@ -12,3 +12,3 @@ interface DeferredLink extends Partial<HTMLLinkElement> {
  * @param links - Array of links to defer
- * @param mountOnId - Id of the element to mount the links on
+ * @param mountId - Id of the element to mount the links on
  *
@@ -37,3 +37,3 @@ * @example
  */
-declare function deferCss(links: string | DeferredLink | (string | DeferredLink)[], mountOnId?: string): void;
+declare function deferCss(links: string | DeferredLink | (string | DeferredLink)[], mountId?: string): void;
 /**
@@ -40,0 +40,0 @@ * hasStyleSheet - Check if a stylesheet is loaded

dist/browser.js

@@ -6,6 +6,10 @@ "use strict";
   var ignoreKeys = ["onDefer"];
-  function deferCss(links, mountOnId = "defer-css") {
+  function deferCss(links, mountId = "defer-css") {
     if (!Array.isArray(links))
       links = [links];
-    deferCssData[mountOnId] = { total: links.length, loaded: 0 };
+    if (deferCssData[mountId] === void 0) {
+      deferCssData[mountId] = { total: 0, loaded: 0 };
+    } else {
+      deferCssData[mountId].total += links.length;
+    }
     for (const link of links) {
@@ -16,3 +20,3 @@ let linkData = typeof link === "string" ? { href: link } : link;
       newLink.onload = function() {
-        deferCssData[mountOnId].loaded++;
+        deferCssData[mountId].loaded++;
         if (typeof linkData.onDefer === "function")
@@ -31,11 +35,11 @@ linkData.onDefer(linkData);
       }
-      let firstLink = document.getElementById(mountOnId);
-      if (firstLink === null) {
-        return console.error("DEFER-CSS: no link element with id: <" + mountOnId + "> found in DOM");
+      let firstLink = document.getElementById(mountId);
+      if (firstLink === null || firstLink === void 0) {
+        return console.error("DEFER-CSS: no link element with id: <" + mountId + "> found in DOM");
       }
+      if (!firstLink.parentNode) {
+        return console.error("DEFER-CSS: no parent node found for link element with id: <" + mountId + "> found in DOM");
+      }
       firstLink.parentNode.insertBefore(newLink, firstLink);
     }
-    const mountOnIdElement = document.getElementById(mountOnId);
-    if (mountOnIdElement !== null)
-      mountOnIdElement.remove();
   }
@@ -42,0 +46,0 @@ function ___getStyleSheet(search, $return = false) {

index.d.ts

@@ -12,3 +12,3 @@ export interface DeferredLink extends Partial<HTMLLinkElement> {
  * @param links - Array of links to defer
- * @param mountOnId - Id of the element to mount the links on
+ * @param mountId - Id of the element to mount the links on
  *
@@ -37,3 +37,3 @@ * @example
  */
-export declare function deferCss(links: string | DeferredLink | (string | DeferredLink)[], mountOnId?: string): void;
+export declare function deferCss(links: string | DeferredLink | (string | DeferredLink)[], mountId?: string): void;
 /**
@@ -40,0 +40,0 @@ * hasStyleSheet - Check if a stylesheet is loaded

index.js

@@ -6,3 +6,3 @@ export const deferCssData = {};
  * @param links - Array of links to defer
- * @param mountOnId - Id of the element to mount the links on
+ * @param mountId - Id of the element to mount the links on
  *
@@ -31,6 +31,11 @@ * @example
  */
-export function deferCss(links, mountOnId = "defer-css") {
+export function deferCss(links, mountId = "defer-css") {
     if (!Array.isArray(links))
         links = [links];
-    deferCssData[mountOnId] = { total: links.length, loaded: 0 };
+    if (deferCssData[mountId] === undefined) {
+        deferCssData[mountId] = { total: 0, loaded: 0 };
+    }
+    else {
+        deferCssData[mountId].total += links.length;
+    }
     for (const link of links) {
@@ -41,3 +46,3 @@ let linkData = typeof link === "string" ? { href: link } : link;
         newLink.onload = function () {
-            deferCssData[mountOnId].loaded++;
+            deferCssData[mountId].loaded++;
             if (typeof linkData.onDefer === "function")
@@ -58,11 +63,13 @@ linkData.onDefer(linkData);
         }
-        let firstLink = document.getElementById(mountOnId);
-        if (firstLink === null) {
-            return console.error("DEFER-CSS: no link element with id: <" + mountOnId + "> found in DOM");
+        let firstLink = document.getElementById(mountId);
+        if (firstLink === null || firstLink === undefined) {
+            return console.error("DEFER-CSS: no link element with id: <" + mountId + "> found in DOM");
         }
+        if (!firstLink.parentNode) {
+            return console.error("DEFER-CSS: no parent node found for link element with id: <" +
+                mountId +
+                "> found in DOM");
+        }
         firstLink.parentNode.insertBefore(newLink, firstLink);
     }
-    const mountOnIdElement = document.getElementById(mountOnId);
-    if (mountOnIdElement !== null)
-        mountOnIdElement.remove();
 }
@@ -69,0 +76,0 @@ function ___getStyleSheet(search, $return = false) {

package.json

 {
   "name": "defer-css",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "ExtraSlim Javascript to Load css in your page without affecting load speed.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/trapcodeio/defer-css.git",

readme.md

@@ -5,13 +5,26 @@ ### Defer Css
 
+It's 2023 and there is still a need to defer CSS yourself. One would think that with all the frameworks and libraries
+out there, this would be a solved problem.
+But it's not. This is a simple plugin that will help you defer your CSS.
+
+##### Why or when should I use this plugin?
+
+There are some styles that are not needed for the initial page load.
+A good list of these styles are:
+
+- Fonts
+- Icons
+- AnimateCSS
+
+With this plugin you can defer these styles and load them when they are needed.
+
+##### Do I need this if am I using a framework like angular, react or vue?
+
+Yes, you do. Most frameworks have a way to defer CSS, but they are not perfect.
+You don't get to decide when to load the CSS. You can only decide if you want to load it or not in the component.
+
 **DEMO**: [Jsfiddle.net](https://jsfiddle.net/trapcode/j8vsg7az/)
 
-Two **functions** and one **object** is set to global `window`
+## Direct Browser Installation
 
-| Function      | Arguments                             | Usage                                                                                                                                                     |
-|---------------|---------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| deferCss      | `(scripts=[], mountOnId='defer-css')` | For loading a style or array of styles                                                                                                                    |
-| hasStyleSheet | `(search='', return=false)`           | A bonus helper function for checking if the browser has loaded a particular stylesheet using `document.styleSheets`                                       |
-|               |                                       | if `$return` is "all" the `CSSStyleSheet` Object is returned, else if any string we assume its a key in the `CSSStyleSheet` object you are trying to get. |
-
-#### Direct Browser Installation
 ```html
@@ -23,59 +36,88 @@ <!--Using JsDeliver CDN-->
 <script src="https://unpkg.com/defer-css"></script>
+
+<!-- Example Script -->
+<script>
+  const { deferCss } = window;
+</script>
 ```
-#### From Package Managers
-You can include `defer-css` in your project using `require` or `import` but defer-css does not export anything.
 
-It sets `window.deferCss`, `window.deferCssData` && `window.hasStyleSheet`
+## Using Package Managers
 
+```shell
+npm i defer-css
+# or using yarn
+yarn add defer-css
+```
 
-#### Usage
-Defined styles are loaded before any element with id `defer-css` id in your page
-```html
-<html>
-    <head>
-        <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
-        <!-- Styles will be placed before this element-->
-        <link id="defer-css"/>
-    </head>
-</html>
+Import the package in your project
+
+```typescript
+import { deferCss } from 'defer-css';
 ```
 
-You can change this to your custom id
+## Example Usage
+
+
 ```html
+
+<html>
 <head>
-    <!-- Some Styles  -->
-    <link href="....">
-    <link href="....">
-    <link href="....">
-    
-    <!-- Styles will be placed before this add-css-here element-->
-    <link id="add-css-here"/>
+  <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
+
+  <!-- Styles will be placed before this element-->
+  <link id="defer-css" />
+  <!--  OR   -->
+  <link id="custom-id" />
 </head>
+</html>
 ```
 
-Load Css using javascript
+The deferCss function takes two arguments, the first is the path/paths to the css file and the second is the id of the element to place the styles before.
+
+The default id is `defer-css` but you can change it to any id you want by passing it as the second argument.
+
 ```javascript
-deferCss([
-    'style-1.min.css',
-    {href: 'style-2.min.css', crossOrigin: 'anonymous'}
-], 'add-css-here')
+// Using a string
+deferCss("/style-1.min.css");
+
+// Using a single object
+deferCss({ href: "/style-2.min.css", crossOrigin: "anonymous" });
+
+// using a mix of string and object in an array
+const styles = [
+    "/style-3.min.css",
+    { href: "/style-4.min.css", crossOrigin: "anonymous" }, 
+];
+
+deferCss(styles, "custom-id");
 ```
 
-Adds the following styles
+Result:
+
 ```html
-    <link rel="stylesheet" href="style-1.min.css">
-    <link rel="stylesheet" href="style-2.min.css" crossorigin="anonymous">
+
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
+  
+  <link rel="stylesheet" href="/style-1.min.css" />
+  <link rel="stylesheet" href="/style-2.min.css" crossorigin="anonymous" />
+  <link id="defer-css" />
+  
+  <link rel="stylesheet" href="/style-3.min.css" />
+  <link rel="stylesheet" href="/style-4.min.css" crossorigin="anonymous" />
+  <link id="custom-id">
+</head>
 ```
 
-The values of the styles array can either be a url `string` or an `object` that will be used to build your `link` element
+If a link object includes an `onDefer` function, it is executed when the css file is loaded.
 
-If the object includes an `onDefer` function, it is executed when the css file is loaded.
 ```javascript
 deferCss([
-    {
-        href: 'style-1.min.css', 
-        onDefer: function() {
-            // do something
-        }
-    },
+  {
+    href: 'style-1.min.css',
+    onDefer: function() {
+      // do something
+    }
+  },
 ])
@@ -85,12 +127,15 @@ ```
 #### Multiple deferCss
-Lets say you want to mount css in multiple places.
+
+Let's say you want to mount css in multiple places.
+
 ```html
+
 <head>
-    <link id="main-css">
-    <style>
-        .some-style-before-other-css{
-            background: teal;
-        }
-    </style>
-    <link id="other-css">
+  <link id="main-css">
+  <style>
+    .some-style-before-other-css {
+      background: teal;
+    }
+  </style>
+  <link id="other-css">
 </head>
@@ -102,4 +147,4 @@ ```
 deferCss([
-    { href: 'other-css-1.css', crossOrigin: 'anonymous' },
-    'other-css-2.css'
+  { href: 'other-css-1.css', crossOrigin: 'anonymous' },
+  'other-css-2.css'
 ], 'other-css');
@@ -109,16 +154,20 @@ ```
 This will result to.
+
 ```html
-    <link rel="stylesheet" href="main-css-1.css">
-    <link rel="stylesheet" href="main-css-2.css">
-    <style>
-        .some-style-before-other-css{
-            background: teal;
-        }
-    </style>
-    <link rel="stylesheet" href="other-css-1.css" crossorigin="anonymous">
-    <link rel="stylesheet" href="other-css-2.css">
+
+<link rel="stylesheet" href="main-css-1.css">
+<link rel="stylesheet" href="main-css-2.css">
+<style>
+  .some-style-before-other-css {
+    background: teal;
+  }
+</style>
+<link rel="stylesheet" href="other-css-1.css" crossorigin="anonymous">
+<link rel="stylesheet" href="other-css-2.css">
 ```
 
 #### DeferCssData
+
 The `deferCssData` includes details you may need.
+
 ```javascript
@@ -125,0 +174,0 @@ ({

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17721

increased by0.89%

Lines of code

347

increased by3.27%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

177

increased by38.28%

No dependency changes