append-styles - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

index.js

@@ -13,3 +13,3 @@ function appendStyles(options) {
 
-  var styleElement = document.getElementById(id) || createStyleElement(options);
+  var styleElement = createStyleElement(options);
 
@@ -33,3 +33,3 @@ // strip potential UTF-8 BOM if css was read from a file
   styleElement.setAttribute('type', 'text/css');
-  styleElement.setAttribute('id', options.id);
+  styleElement.setAttribute('data-append-styles', options.id);
 
@@ -39,6 +39,8 @@ var head = document.head
   var target = head.childNodes[0];
-  var before = options.before && document.getElementById(options.before);
-  var after = options.after && document.getElementById(options.after);
+  var before = options.before && document.querySelectorAll('[data-append-styles="' + options.before + '"]');
+  var after = options.after && document.querySelectorAll('[data-append-styles="' + options.after + '"]');
+  var startElement = before && before[0];
+  var endElement = after && after[after.length - 1];
 
-  target = before || (after && after.nextSibling) || target;
+  target = startElement || (endElement && endElement.nextSibling) || target;
 
@@ -45,0 +47,0 @@ head.insertBefore(styleElement, target);

package.json

 {
   "name": "append-styles",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Append CSS in a given order",
@@ -5,0 +5,0 @@ "main": "index.js",

test/index.spec.js

@@ -26,3 +26,3 @@ var expect = require('unexpected')
     expect(document, 'to contain styles', [
-      '<style id="module-b">body { background:red; }</style>'
+      '<style data-append-styles="module-b">body { background:red; }</style>'
     ]);
@@ -37,4 +37,4 @@
     expect(document, 'to contain styles', [
-      '<style id="module-a">body { background:blue; }</style>',
-      '<style id="module-b">body { background:red; }</style>'
+      '<style data-append-styles="module-a">body { background:blue; }</style>',
+      '<style data-append-styles="module-b">body { background:red; }</style>'
     ]);
@@ -49,4 +49,5 @@
     expect(document, 'to contain styles', [
-      '<style id="module-a">body { background:blue; }h1 { color:papayawhip; }</style>',
-      '<style id="module-b">body { background:red; }</style>'
+      '<style data-append-styles="module-a">body { background:blue; }</style>',
+      '<style data-append-styles="module-a">h1 { color:papayawhip; }</style>',
+      '<style data-append-styles="module-b">body { background:red; }</style>'
     ]);
@@ -61,61 +62,8 @@
     expect(document, 'to contain styles', [
-      '<style id="module-a">body { background:blue; }h1 { color:papayawhip; }</style>',
-      '<style id="module-b">body { background:red; }h1 { color:black; }</style>'
+      '<style data-append-styles="module-a">body { background:blue; }</style>',
+      '<style data-append-styles="module-a">h1 { color:papayawhip; }</style>',
+      '<style data-append-styles="module-b">h1 { color:black; }</style>',
+      '<style data-append-styles="module-b">body { background:red; }</style>'
     ]);
   });
-
-  describe('when the DOM already contains style tags with the same id', () => {
-    beforeEach(() => {
-      document.head.innerHTML = [
-        '<style id="module-a">body { background:yellow; }p { color:gray; }</style>',
-        '<style id="module-b">body { background:green; }p { color:white; }</style>'
-      ].join('')
-    })
-
-    it('appends to the existing style tag', () => {
-      appendStyles({
-        css: 'body { background:red; }',
-        id: 'module-b',
-        after: 'module-a'
-      });
-
-      expect(document, 'to contain styles', [
-        '<style id="module-a">body { background:yellow; }p { color:gray; }</style>',
-        '<style id="module-b">body { background:green; }p { color:white; }body { background:red; }</style>'
-      ]);
-
-      appendStyles({
-        css: 'body { background:blue; }',
-        id: 'module-a',
-        before: 'module-b'
-      });
-
-      expect(document, 'to contain styles', [
-        '<style id="module-a">body { background:yellow; }p { color:gray; }body { background:blue; }</style>',
-        '<style id="module-b">body { background:green; }p { color:white; }body { background:red; }</style>'
-      ]);
-
-      appendStyles({
-        css: 'h1 { color:papayawhip; }',
-        id: 'module-a',
-        before: 'module-b'
-      });
-
-      expect(document, 'to contain styles', [
-        '<style id="module-a">body { background:yellow; }p { color:gray; }body { background:blue; }h1 { color:papayawhip; }</style>',
-        '<style id="module-b">body { background:green; }p { color:white; }body { background:red; }</style>'
-      ]);
-
-      appendStyles({
-        css: 'h1 { color:black; }',
-        id: 'module-b',
-        after: 'module-a'
-      });
-
-      expect(document, 'to contain styles', [
-        '<style id="module-a">body { background:yellow; }p { color:gray; }body { background:blue; }h1 { color:papayawhip; }</style>',
-        '<style id="module-b">body { background:green; }p { color:white; }body { background:red; }h1 { color:black; }</style>'
-      ]);
-    })
-  })
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

7041

decreased by-18.37%

Lines of code

92

decreased by-30.83%

No dependency changes