append-styles - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.js

		@@ -1,4 +0,1 @@
		var styleElements = {};
		var head;

		function appendStyles(options) {
		@@ -16,4 +13,3 @@ options = options \|\| {};

		styleElements[id] = styleElements[id] \|\| createStyleElement(options);
		var styleElement = styleElements[id];
		var styleElement = document.getElementById(id) \|\| createStyleElement(options);

		@@ -34,6 +30,2 @@ // strip potential UTF-8 BOM if css was read from a file

		function getElementById(id) {
		return (styleElements[id] = styleElements[id] \|\| document.getElementById(id));
		}

		function createStyleElement(options) {
		@@ -44,7 +36,7 @@ var styleElement = document.createElement('style');

		head = head \|\| document.querySelector('head');
		var head = document.head

		var target = head.childNodes[0];
		var before = options.before && getElementById(options.before);
		var after = options.after && getElementById(options.after);
		var before = options.before && document.getElementById(options.before);
		var after = options.after && document.getElementById(options.after);

		@@ -51,0 +43,0 @@ target = before \|\| (after && after.nextSibling) \|\| target;

package.json

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

test/index.spec.js

		@@ -14,2 +14,6 @@ var expect = require('unexpected')
		describe('append-styles', function() {
		beforeEach(() => {
		document.head.innerHTML = ''
		})

		it('appends styles in the right order', function() {
		@@ -59,2 +63,57 @@ appendStyles({
		});

		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>'
		]);
		})
		})
		});

append-styles - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics