append-styles - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

index.js

		function appendStyles(options) {
		options = options \|\| {};

		var css = options.css;
		var id = options.id;

		if (!css) throw new Error('You need to specify the css to be inserted');
		if (!id) throw new Error('You need to specify the id of the style element');
		if (!options.css) throw new Error('You need to specify the css to be inserted');
		if (!options.id) throw new Error('You need to specify the id of the style element');
		if (!options.before && !options.after) {
		throw new Error('You need to specify the id of the style element');
		throw new Error('You need to specify a before or an after id');
		}
		if (options.before && options.after) {
		throw new Error('You can only specify either a before or an after id');
		}

		var styleElement = createStyleElement(options);

		// strip potential UTF-8 BOM if css was read from a file
		if (css.charCodeAt(0) === 0xfeff) {
		css = css.substr(1, css.length);
		}

		if (styleElement.styleSheet) {
		styleElement.styleSheet.cssText += css;
		} else {
		styleElement.textContent += css;
		}

		return styleElement;
		@@ -30,5 +19,8 @@ }
		function createStyleElement(options) {
		var css = options.css;
		var id = options.id;

		var styleElement = document.createElement('style');
		styleElement.setAttribute('type', 'text/css');
		styleElement.setAttribute('data-append-styles', options.id);
		styleElement.setAttribute('data-append-styles', id);

		@@ -38,9 +30,26 @@ var head = document.head
		var target = head.childNodes[0];
		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 = startElement \|\| (endElement && endElement.nextSibling) \|\| target;
		var existing = document.querySelectorAll('[data-append-styles="' + id + '"]');

		if (existing.length > 0) {
		target = existing[existing.length - 1].nextSibling
		} else if (options.before) {
		var before = document.querySelectorAll('[data-append-styles="' + options.before + '"]');
		target = before.length > 0 && before[0] \|\| target;
		} else if (options.after) {
		var after = document.querySelectorAll('[data-append-styles="' + options.after + '"]');
		target = after.length > 0 && after[after.length - 1].nextSibling \|\| target;
		}

		// strip potential UTF-8 BOM if css was read from a file
		if (css.charCodeAt(0) === 0xfeff) {
		css = css.substr(1, css.length);
		}

		if (styleElement.styleSheet) {
		styleElement.styleSheet.cssText = css;
		} else {
		styleElement.textContent = css;
		}

		head.insertBefore(styleElement, target);
		@@ -47,0 +56,0 @@

package.json

		{
		"name": "append-styles",
		"version": "2.0.0",
		"version": "2.0.1",
		"description": "Append CSS in a given order",
		"main": "index.js",
		"scripts": {
		"test": "jest"
		"test": "jest",
		"changelog": "offline-github-changelog > CHANGELOG.md",
		"postversion": "npm run changelog && git add CHANGELOG.md && git commit --allow-empty -m 'Update changelog'"
		},
		@@ -16,2 +18,3 @@ "keywords": [
		"jest": "19.0.2",
		"offline-github-changelog": "1.2.0",
		"unexpected": "10.26.3",
		@@ -18,0 +21,0 @@ "unexpected-dom": "3.1.1"

Readme.md

		@@ -57,10 +57,6 @@ # append-styles
		<head>
		<style type="text/css" id="module-a">
		body { background:blue; }
		h1 { color:papayawhip; }
		</style>
		<style type="text/css" 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">body { background:red; }</style
		<style data-append-styles="module-b">h1 { color:black; }</style>
		...
		@@ -77,6 +73,6 @@ </head>
		* `options.css` - the css to be appended.
		* `options.id` - the id of the script tag to append css to. The element will be created if it does not exist.
		* `options.before` - the id of a script tag that this script tag should be created before.
		* `options.after` - the id of a script tag that this script tag should be created after.
		* `options.id` - the append styles data id of the script tag to append css to. The element will be created if it does not exist.
		* `options.before` - the append styles data id of a script tag that this script tag should be created before.
		* `options.after` - the append styles data id of a script tag that this script tag should be created after.

		Notice that you have to specify either a `before` and `after`.

test/index.spec.js

		@@ -61,6 +61,6 @@ var expect = require('unexpected')
		'<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>'
		'<style data-append-styles="module-b">body { background:red; }</style>',
		'<style data-append-styles="module-b">h1 { color:black; }</style>'
		]);
		});
		});

append-styles - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics