@stylable/runtime - npm Package Compare versions

Comparing version 5.0.1 to 5.1.0

dist/inject-styles.js

@@ -5,3 +5,3 @@ "use strict";
 function injectStyles(host) {
-    function stylableRuntime(namespace, css, depth, runtimeId) {
+    function stylableRuntime(id, css, depth, runtimeId) {
         if (typeof document === 'undefined') {
@@ -13,3 +13,3 @@ return;
         var style = d.createElement('style');
-        style.setAttribute('st_id', namespace);
+        style.setAttribute('st_id', id);
         style.setAttribute('st_depth', depth);
@@ -20,8 +20,9 @@ style.setAttribute('st_runtime', runtimeId);
         var inserted = false;
+        var insertAfter;
         for (var i = 0; i < loadedStyleElements.length; i++) {
             var styleElement = loadedStyleElements[i];
-            var stId = styleElement.getAttribute('st_id');
-            var stDepth = Number(styleElement.getAttribute('st_depth'));
-            if (stId === namespace) {
-                if (stDepth === depth) {
+            var existingStId = styleElement.getAttribute('st_id');
+            var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+            if (existingStId === id) {
+                if (existingStDepth === depth) {
                     head.replaceChild(style, styleElement);
@@ -32,11 +33,15 @@ return;
                     styleElement.parentElement.removeChild(styleElement);
+                    continue;
                 }
             }
-            if (!inserted && depth < stDepth) {
+            if (!inserted && depth < existingStDepth) {
                 head.insertBefore(style, styleElement);
                 inserted = true;
             }
+            insertAfter = styleElement;
         }
         if (!inserted) {
-            head.append(style);
+            insertAfter
+                ? head.insertBefore(style, insertAfter.nextElementSibling)
+                : head.appendChild(style);
         }
@@ -43,0 +48,0 @@ }

esm/inject-styles.js

 export function injectStyles(host) {
-    function stylableRuntime(namespace, css, depth, runtimeId) {
+    function stylableRuntime(id, css, depth, runtimeId) {
         if (typeof document === 'undefined') {
@@ -9,3 +9,3 @@ return;
         var style = d.createElement('style');
-        style.setAttribute('st_id', namespace);
+        style.setAttribute('st_id', id);
         style.setAttribute('st_depth', depth);
@@ -16,8 +16,9 @@ style.setAttribute('st_runtime', runtimeId);
         var inserted = false;
+        var insertAfter;
         for (var i = 0; i < loadedStyleElements.length; i++) {
             var styleElement = loadedStyleElements[i];
-            var stId = styleElement.getAttribute('st_id');
-            var stDepth = Number(styleElement.getAttribute('st_depth'));
-            if (stId === namespace) {
-                if (stDepth === depth) {
+            var existingStId = styleElement.getAttribute('st_id');
+            var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+            if (existingStId === id) {
+                if (existingStDepth === depth) {
                     head.replaceChild(style, styleElement);
@@ -28,11 +29,15 @@ return;
                     styleElement.parentElement.removeChild(styleElement);
+                    continue;
                 }
             }
-            if (!inserted && depth < stDepth) {
+            if (!inserted && depth < existingStDepth) {
                 head.insertBefore(style, styleElement);
                 inserted = true;
             }
+            insertAfter = styleElement;
         }
         if (!inserted) {
-            head.append(style);
+            insertAfter
+                ? head.insertBefore(style, insertAfter.nextElementSibling)
+                : head.appendChild(style);
         }
@@ -39,0 +44,0 @@ }

package.json

 {
   "name": "@stylable/runtime",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Stylable runtime DOM integration",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/inject-styles.ts

@@ -5,8 +5,3 @@ /* eslint-disable no-var */
 export function injectStyles(host: Host) {
-    function stylableRuntime(
-        namespace: string,
-        css: string,
-        depth: number,
-        runtimeId: string
-    ): void {
+    function stylableRuntime(id: string, css: string, depth: number, runtimeId: string): void {
         if (typeof document === 'undefined') {
@@ -18,3 +13,3 @@ return;
         var style = d.createElement('style');
-        style.setAttribute('st_id', namespace);
+        style.setAttribute('st_id', id);
         style.setAttribute('st_depth', depth as unknown as string);
@@ -27,8 +22,9 @@ style.setAttribute('st_runtime', runtimeId);
         var inserted = false;
+        var insertAfter: HTMLElement | undefined;
         for (var i = 0; i < loadedStyleElements.length; i++) {
             var styleElement = loadedStyleElements[i];
-            var stId = styleElement.getAttribute('st_id');
-            var stDepth = Number(styleElement.getAttribute('st_depth'));
-            if (stId === namespace) {
-                if (stDepth === depth) {
+            var existingStId = styleElement.getAttribute('st_id');
+            var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+            if (existingStId === id) {
+                if (existingStDepth === depth) {
                     head.replaceChild(style, styleElement);
@@ -38,11 +34,15 @@ return;
                     styleElement.parentElement!.removeChild(styleElement);
+                    continue;
                 }
             }
-            if (!inserted && depth < stDepth) {
+            if (!inserted && depth < existingStDepth) {
                 head.insertBefore(style, styleElement);
                 inserted = true;
             }
+            insertAfter = styleElement;
         }
         if (!inserted) {
-            head.append(style);
+            insertAfter
+                ? head.insertBefore(style, insertAfter.nextElementSibling)
+                : head.appendChild(style);
         }
@@ -49,0 +49,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

112947

0.85%

Lines of code

1403

0.72%

No dependency changes