insert-css - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

example.js

+var on = require('dom-event');
+var insertCss = require('./');
+
+document.querySelector('body').innerHTML = '<h1>insert-css example</h1><button id="blue">blue</button><button id="red">red</button>';
+
+on(document.querySelector('#blue'), 'click', function() {
+  insertCss('body{background: blue}');
+});
+
+on(document.querySelector('#red'), 'click', function() {
+  insertCss('body{background: red}');
+});

test.js

+var test = require('tape');
+
+test(function (t) {
+    var insertCss = require('./');
+    var initialNbStyleTags = nbStyleTags();
+
+    // basic usage
+    var baseStyle = 'body{position:relative;text-decoration:overline}';
+    insertCss(baseStyle);
+    t.equal(position(), 'relative', 'initial position is `relative`');
+
+    // adds one style tag
+    t.equal(nbStyleTags(), initialNbStyleTags + 1, 'we added one style tag');
+
+    // default to appending style
+    var appendStyle = 'body{position:absolute}';
+    var appendStyleTag = insertCss(appendStyle);
+    t.equal(position(), 'absolute', 'new position is `absolute`');
+
+    // reuse same style tag
+    t.equal(nbStyleTags(), initialNbStyleTags + 1, 'we kept using the same style tag');
+
+    // prepend should add a new style tag before the append one
+    t.equal(textDecoration(), 'overline', 'text-decoration is overline by default');
+    var prependStyleTag = insertCss('body{text-decoration:underline !important}', {prepend: true});
+    t.equal(nbStyleTags(), initialNbStyleTags + 2, 'we added a new style tag');
+    t.equal(textDecoration(), 'underline', 'text-decoration is now underline');
+    var tag = prependStyleTag;
+    while (tag !== appendStyleTag) {
+        tag = tag.nextSibling;
+    }
+    t.equal(tag, appendStyleTag, 'prepend mode should add a style tag before the append one');
+
+    // uses old school styleSheet prop when present (IE)
+    if (!appendStyleTag.styleSheet) {
+        appendStyleTag.styleSheet = {cssText: 'a'};
+        insertCss('p{color:blue}');
+        t.equal(appendStyleTag.styleSheet.cssText, 'ap{color:blue}', 'we use old school styleSheet prop');
+        delete appendStyleTag.styleSheet;
+    }
+
+    // allow re-adding added style
+    insertCss(baseStyle);
+    t.equal(position(), 'relative', 'position is again `relative`');
+
+    // allow using a custom container
+    var customContainer = document.createElement('div');
+    document.querySelector('body').appendChild(customContainer);
+    t.equal(nbStyleTags(customContainer), 0, 'no style tag in custom container');
+    insertCss('body{position:absolute}', {container: customContainer});
+    t.equal(nbStyleTags(customContainer), 1, 'new style tag added in custom container');
+    t.equal(position(), 'absolute', 'position is absolute again');
+
+    t.end();
+});
+
+function position() {
+    var getStyle = require('computed-style');
+    return getStyle(document.querySelector('body'), 'position');
+}
+
+function textDecoration() {
+    var getStyle = require('computed-style');
+    return getStyle(document.querySelector('body'), 'text-decoration');
+}
+
+function nbStyleTags(container) {
+    if (!container) container = document;
+    return container.querySelectorAll('style').length
+}

index.js

@@ -1,22 +0,46 @@
-var inserted = {};
+var containers = []; // will store container HTMLElement references
+var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
 
 module.exports = function (css, options) {
-    if (inserted[css]) return;
-    inserted[css] = true;
-    
-    var elem = document.createElement('style');
-    elem.setAttribute('type', 'text/css');
+    options = options || {};
 
-    if ('textContent' in elem) {
-      elem.textContent = css;
+    var position = options.prepend === true ? 'prepend' : 'append';
+    var container = options.container !== undefined ? options.container : document.querySelector('head');
+    var containerId = containers.indexOf(container);
+
+    // first time we see this container, create the necessary entries
+    if (containerId === -1) {
+        containerId = containers.push(container) - 1;
+        styleElements[containerId] = {};
+    }
+
+    // try to get the correponding container + position styleElement, create it otherwise
+    var styleElement;
+
+    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
+        styleElement = styleElements[containerId][position];
     } else {
-      elem.styleSheet.cssText = css;
+        styleElement = styleElements[containerId][position] = createStyleElement();
+
+        if (position === 'prepend') {
+            container.insertBefore(styleElement, container.childNodes[0]);
+        } else {
+            container.appendChild(styleElement);
+        }
     }
-    
-    var head = document.getElementsByTagName('head')[0];
-    if (options && options.prepend) {
-        head.insertBefore(elem, head.childNodes[0]);
+
+    // actually add the stylesheet
+    if (styleElement.styleSheet) {
+        styleElement.styleSheet.cssText += css
     } else {
-        head.appendChild(elem);
+        styleElement.textContent += css;
     }
+
+    return styleElement;
 };
+
+function createStyleElement() {
+    var styleElement = document.createElement('style');
+    styleElement.setAttribute('type', 'text/css');
+    return styleElement;
+}

package.json

 {
     "name": "insert-css",
-    "version": "0.2.0",
+    "version": "1.0.0",
     "description": "insert a string of css into the <head>",
     "main": "index.js",
     "dependencies": {},
+    "scripts": {
+        "test": "browserify test.js | tape-run",
+        "example": "budo example.js"
+    },
     "devDependencies": {
-        "tape": "^2.13.3",
-        "computed-style": "~0.1.3"
+        "browserify": "^13.0.1",
+        "budo": "^8.3.0",
+        "computed-style": "^0.3.0",
+        "dom-event": "^1.0.0",
+        "tape": "^4.6.0",
+        "tape-run": "^2.1.4"
     },
@@ -16,3 +24,3 @@ "repository": {
     "testling" : {
-        "files" : "test/*.js",
+        "files" : "test.js",
         "browsers" : [
@@ -33,3 +41,10 @@ "ie/6..latest",
         "browser",
-        "browserify"
+        "browserify",
+        "inject",
+        "styles",
+        "stylesheet",
+        "style",
+        "html",
+        "head",
+        "link"
     ],
@@ -36,0 +51,0 @@ "author": {

example/bundle.js

-;(function(e,t,n,r){function i(r){if(!n[r]){if(!t[r]){if(e)return e(r);throw new Error("Cannot find module '"+r+"'")}var s=n[r]={exports:{}};t[r][0](function(e){var n=t[r][1][e];return i(n?n:e)},s,s.exports)}return n[r].exports}for(var s=0;s<r.length;s++)i(r[s]);return i})(typeof require!=="undefined"&&require,{1:[function(require,module,exports){
-var fs = require('fs');
-var insertCss = require('../');
-var css = "body {\n    background-color: purple;\n    color: yellow;\n}\n";
-insertCss(css);
-document.body.appendChild(document.createTextNode('HELLO CRUEL WORLD'));
-
-},{"fs":2,"../":3}],3:[function(require,module,exports){
-var inserted = [];
-
-module.exports = function (css) {
-    if (inserted.indexOf(css) >= 0) return;
-    inserted.push(css);
-    
-    var elem = document.createElement('style');
-    var text = document.createTextNode(css);
-    elem.appendChild(text);
-    
-    if (document.head.childNodes.length) {
-        document.head.insertBefore(elem, document.head.childNodes[0]);
-    }
-    else {
-        document.head.appendChild(elem);
-    }
-};
-
-},{}],2:[function(require,module,exports){
-// nothing to see here... no file methods for the browser
-
-},{}]},{},[1])
-;

example/index.html

-<html>
-  <head></head>
-  <body>
-    <script src="bundle.js"></script>
-  </body>
-</html>

example/insert.js

-var fs = require('fs');
-var insertCss = require('../');
-var css = fs.readFileSync(__dirname + '/style.css');
-insertCss(css);
-document.body.appendChild(document.createTextNode('HELLO CRUEL WORLD'));

example/style.css

-body {
-    background-color: purple;
-    color: yellow;
-}

test/insert.js

-var test = require('tape');
-var insertCss = require('../');
-var getStyle = require('computed-style');
-
-var css = 'body { background-color: purple; color: yellow; }';
-
-test(function (t) {
-    t.plan(10);
-    
-    var before = colors();
-    t.ok(before.bg === 'rgba(0,0,0,0)' || before.bg === 'transparent');
-    t.ok(before.fg === 'rgb(0,0,0)' || before.fg === '#000000');
-    
-    insertCss(css, { prepend: true });
-    
-    var after = colors();
-    t.ok(after.bg === 'rgb(128,0,128)' || after.bg === 'purple');
-    t.ok(after.fg === 'rgb(255,255,0)' || after.fg === 'yellow');
-
-    var resetStyle = 'body { background-color: transparent; color: #000000; }';
-    insertCss(resetStyle);
-
-    var reset = colors();
-    t.ok(reset.bg === 'rgba(0,0,0,0)' || reset.bg === 'transparent');
-    t.ok(reset.fg === 'rgb(0,0,0)' || reset.fg === '#000000');
-
-    var resetStyle = 'body { background-color: green; color: pink; }';
-    insertCss(resetStyle, { prepend: true });
-
-    var reset = colors();
-    t.ok(reset.bg === 'rgba(0,0,0,0)' || reset.bg === 'transparent');
-    t.ok(reset.fg === 'rgb(0,0,0)' || reset.fg === '#000000');
-
-    var resetStyle = 'body { background-color: yellow; color: purple; }';
-    insertCss(resetStyle, { prepend: false });
-
-    var reset = colors();
-    t.ok(reset.bg === 'rgb(255,255,0)' || reset.bg === 'yellow');
-    t.ok(reset.fg === 'rgb(128,0,128)' || reset.fg === 'purple');
-});
-
-function colors () {
-    var body = document.getElementsByTagName('body')[0];
-    return {
-        bg: getStyle(body, 'backgroundColor').replace(/\s+/g, ''),
-        fg: getStyle(body, 'color').replace(/\s+/g, '')
-    };
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

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

8020

17.08%

Lines of code

103

17.05%

Number of low quality alerts

1

-50%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

6

200%

Number of package files

6

-33.33%

Number of lines in readme file

45

-16.67%

Number of medium supply chain risk alerts

2

Infinity%

No dependency changes