fela-dom - npm Package Compare versions

Comparing version 10.2.3 to 10.2.4

es/dom/__helpers__/cleanHead.js

 export default function cleanHead() {
-  var head = document.head;
+  var _document = document,
+      head = _document.head;
+
   while (head.firstChild) {
@@ -4,0 +6,0 @@ head.removeChild(head.firstChild);

es/dom/connection/calculateNodeScore.js

@@ -33,3 +33,6 @@ import { FONT_TYPE, STATIC_TYPE, KEYFRAME_TYPE, RULE_TYPE } from 'fela-utils';
       return getRuleScore(support ? 4 : 3, media, mediaQueryOrder);
+    default:
+      // TODO: warning
+      return 9999;
   }
 }

es/dom/connection/createNode.js

@@ -7,2 +7,3 @@ import objectReduce from 'fast-loops/lib/objectReduce';
       support = _ref.support;
+  var id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
 
@@ -12,2 +13,3 @@ var head = document.head || {};
   var node = document.createElement('style');
+  node.setAttribute('data-fela-id', id);
   node.setAttribute('data-fela-type', type);
@@ -26,4 +28,4 @@ node.type = 'text/css';
   // to correctly inject the node just before it
-  var moreSpecificReference = objectReduce(nodes, function (closest, node, reference) {
-    return node.score > score && (!closest || nodes[closest].score > node.score) ? reference : closest;
+  var moreSpecificReference = objectReduce(nodes, function (closest, currentNode, reference) {
+    return currentNode.score > score && (!closest || nodes[closest].score > currentNode.score) ? reference : closest;
   }, undefined);
@@ -30,0 +32,0 @@

es/dom/connection/createSubscription.js

 
 /* eslint-disable consistent-return */
 import objectEach from 'fast-loops/lib/objectEach';
-import { RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE, CLEAR_TYPE, getRuleScore, generateCSSRule } from 'fela-utils';
+import { RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE, CLEAR_TYPE, generateCSSRule } from 'fela-utils';
 
@@ -18,2 +18,3 @@ import getNodeFromCache from './getNodeFromCache';
       renderer.nodes = {};
+      renderer.scoreIndex = {};
       return;
@@ -37,4 +38,7 @@ }
         break;
+      default:
+        // TODO: warning
+        break;
     }
   };
 }

es/dom/connection/getNodeFromCache.js

@@ -20,3 +20,3 @@ import calculateNodeScore from './calculateNodeScore';
     var score = calculateNodeScore(attributes, renderer.mediaQueryOrder);
-    var node = queryNode(attributes) || createNode(renderer.nodes, score, attributes);
+    var node = queryNode(attributes, renderer.rendererId) || createNode(renderer.nodes, score, attributes, renderer.rendererId);
 
@@ -23,0 +23,0 @@ renderer.nodes[reference] = {

es/dom/connection/insertRule.js

@@ -9,8 +9,11 @@ import { generateCSSRule, generateCSSSupportRule, getRuleScore } from 'fela-utils';
       support = _ref.support,
+      media = _ref.media,
       pseudo = _ref.pseudo;
 
+  var nodeReference = media + support;
   // only use insertRule in production as browser devtools might have
   // weird behavior if used together with insertRule at runtime
   if (renderer.devMode) {
-    return insertRuleInDevMode(renderer, node);
+    insertRuleInDevMode(renderer, node);
+    return;
   }
@@ -22,12 +25,22 @@
 
+
     var index = cssRules.length;
 
-    // TODO: (PERF) instead of checking the score every time
-    // we could save the latest score=0 index to quickly inject
-    // basic styles and only check for score!=0 (e.g. pseudo classes)
-    for (var i = 0, len = cssRules.length; i < len; ++i) {
-      if (cssRules[i].score > score) {
-        index = i;
-        break;
+    if (score === 0) {
+      if (renderer.scoreIndex[nodeReference] === undefined) {
+        index = 0;
+      } else {
+        index = renderer.scoreIndex[nodeReference] + 1;
       }
+    } else {
+      // we start iterating from the last score=0 entry
+      // to corretly inject pseudo classes etc.
+      var startIndex = renderer.scoreIndex[nodeReference] || 0;
+
+      for (var i = startIndex, len = cssRules.length; i < len; ++i) {
+        if (cssRules[i].score > score) {
+          index = i;
+          break;
+        }
+      }
     }
@@ -44,6 +57,16 @@
 
+    if (score === 0) {
+      renderer.scoreIndex[nodeReference] = index;
+    }
+
     cssRules[index].score = score;
   } catch (e) {
-    console.warn('An error occurred while inserting the rules into DOM.\n', declaration.replace(/;/g, ';\n'), e);
+    // We're disabled these warnings due to false-positive errors with browser prefixes
+    // See https://github.com/rofrischmann/fela/issues/634
+    // console.warn(
+    //   `An error occurred while inserting the rules into DOM.\n`,
+    //   declaration.replace(/;/g, ';\n'),
+    //   e
+    // )
   }
 }

es/dom/connection/insertRuleInDevMode.js

@@ -13,9 +13,9 @@ import { RULE_TYPE } from 'fela-utils';
 
-  var sheet = sheetList.find(function (sheet) {
+  var currentSheet = sheetList.find(function (sheet) {
     return sheet.type === RULE_TYPE && sheet.media === media && sheet.support === support;
   });
 
-  if (sheet) {
-    node.textContent = sheet.css;
+  if (currentSheet) {
+    node.textContent = currentSheet.css;
   }
 }

es/dom/connection/queryNode.js

@@ -7,7 +7,9 @@
       support = _ref.support;
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
-  var mediaQuery = media ? '[media="' + media + '"]' : '';
-  var supportQuery = support ? '[data-fela-support="true"]' : '';
+  var idQuery = '[data-fela-id="' + id + '"]';
+  var mediaQuery = media ? '[media="' + media + '"]' : ':not([media])';
+  var supportQuery = support ? '[data-fela-support="true"]' : ':not([data-fela-support="true"])';
 
-  return document.querySelector('[data-fela-type="' + type + '"]' + supportQuery + mediaQuery);
+  return document.querySelector('[data-fela-type="' + type + '"]' + idQuery + supportQuery + mediaQuery);
 }

es/dom/rehydrate.js

@@ -17,3 +17,5 @@ import arrayEach from 'fast-loops/lib/arrayEach';
 
-  arrayEach(document.querySelectorAll('[data-fela-type]'), function (node) {
+  var idQuery = '[data-fela-id="' + renderer.rendererId + '"]';
+
+  arrayEach(document.querySelectorAll('[data-fela-type]' + idQuery), function (node) {
     var rehydrationAttribute = node.getAttribute('data-fela-rehydration') || -1;
@@ -49,6 +51,14 @@ var rehydrationIndex = renderer.uniqueRuleIdentifier || parseInt(rehydrationAttribute, 10);
         if (node.sheet && node.sheet.cssRules) {
-          arrayEach(node.sheet.cssRules, function (rule) {
+          var nodeReference = media + support;
+
+          arrayEach(node.sheet.cssRules, function (rule, index) {
             var selectorText = rule.conditionText ? rule.cssRules[0].selectorText : rule.selectorText;
 
-            rule.score = getRuleScore(renderer.ruleOrder, selectorText.split(CLASSNAME_REGEX)[1]);
+            var score = getRuleScore(renderer.ruleOrder, selectorText.split(CLASSNAME_REGEX)[1]);
+
+            if (score === 0) {
+              renderer.scoreIndex[nodeReference] = index;
+            }
+
+            rule.score = score;
           });
@@ -55,0 +65,0 @@ }

es/dom/rehydration/rehydrateSupportRules.js

@@ -14,2 +14,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
+  // eslint-disable-next-line no-cond-assign
   while (decl = SUPPORT_REGEX.exec(css)) {
@@ -16,0 +17,0 @@ var _decl = decl,

es/dom/render.js

@@ -7,2 +7,3 @@ import objectEach from 'fast-loops/lib/objectEach';
   if (!renderer.updateSubscription) {
+    renderer.scoreIndex = {};
     renderer.nodes = {};
@@ -9,0 +10,0 @@

es/server/createStyleTagMarkup.js

 
 
-export default function createStyleMarkup(css, type) {
-  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var rehydrationIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : -1;
-  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+export default function createStyleTagMarkup(css, type) {
+  var rendererId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var media = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var rehydrationIndex = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
+  var support = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
+  var idAttribute = ' data-fela-id="' + rendererId + '"';
   var mediaAttribute = media.length > 0 ? ' media="' + media + '"' : '';
   var supportAttribute = support ? ' data-fela-support="true"' : '';
 
-  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + supportAttribute + mediaAttribute + '>' + css + '</style>';
+  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + idAttribute + supportAttribute + mediaAttribute + '>' + css + '</style>';
 }

es/server/renderToMarkup.js

@@ -17,3 +17,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
     if (cacheCluster[key].length > 0) {
-      markup += createStyleTagMarkup(cacheCluster[key], type, '', rehydrationIndex);
+      markup += createStyleTagMarkup(cacheCluster[key], type, renderer.rendererId, '', rehydrationIndex);
     }
@@ -27,3 +27,3 @@
   if (support) {
-    styleMarkup += createStyleTagMarkup(support, RULE_TYPE, '', rehydrationIndex, true);
+    styleMarkup += createStyleTagMarkup(support, RULE_TYPE, renderer.rendererId, '', rehydrationIndex, true);
   }
@@ -36,3 +36,3 @@
     if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
-      markup += createStyleTagMarkup(cacheCluster.mediaRules[media], RULE_TYPE, media, rehydrationIndex);
+      markup += createStyleTagMarkup(cacheCluster.mediaRules[media], RULE_TYPE, renderer.rendererId, media, rehydrationIndex);
     }
@@ -45,3 +45,3 @@
       if (mediaSupport.length > 0) {
-        markup += createStyleTagMarkup(mediaSupport, RULE_TYPE, media, rehydrationIndex, true);
+        markup += createStyleTagMarkup(mediaSupport, RULE_TYPE, renderer.rendererId, media, rehydrationIndex, true);
       }
@@ -48,0 +48,0 @@ }

lib/dom/__helpers__/cleanHead.js

@@ -8,3 +8,5 @@ "use strict";
 function cleanHead() {
-  var head = document.head;
+  var _document = document,
+      head = _document.head;
+
   while (head.firstChild) {
@@ -11,0 +13,0 @@ head.removeChild(head.firstChild);

lib/dom/connection/calculateNodeScore.js

@@ -39,3 +39,6 @@ 'use strict';
       return getRuleScore(support ? 4 : 3, media, mediaQueryOrder);
+    default:
+      // TODO: warning
+      return 9999;
   }
 }

lib/dom/connection/createNode.js

@@ -18,2 +18,3 @@ 'use strict';
       support = _ref.support;
+  var id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
 
@@ -23,2 +24,3 @@ var head = document.head || {};
   var node = document.createElement('style');
+  node.setAttribute('data-fela-id', id);
   node.setAttribute('data-fela-type', type);
@@ -37,4 +39,4 @@ node.type = 'text/css';
   // to correctly inject the node just before it
-  var moreSpecificReference = (0, _objectReduce2.default)(nodes, function (closest, node, reference) {
-    return node.score > score && (!closest || nodes[closest].score > node.score) ? reference : closest;
+  var moreSpecificReference = (0, _objectReduce2.default)(nodes, function (closest, currentNode, reference) {
+    return currentNode.score > score && (!closest || nodes[closest].score > currentNode.score) ? reference : closest;
   }, undefined);
@@ -41,0 +43,0 @@

lib/dom/connection/createSubscription.js

@@ -34,2 +34,3 @@ 'use strict';
       renderer.nodes = {};
+      renderer.scoreIndex = {};
       return;
@@ -53,4 +54,7 @@ }
         break;
+      default:
+        // TODO: warning
+        break;
     }
   };
 }

lib/dom/connection/getNodeFromCache.js

@@ -36,3 +36,3 @@ 'use strict';
     var score = (0, _calculateNodeScore2.default)(attributes, renderer.mediaQueryOrder);
-    var node = (0, _queryNode2.default)(attributes) || (0, _createNode2.default)(renderer.nodes, score, attributes);
+    var node = (0, _queryNode2.default)(attributes, renderer.rendererId) || (0, _createNode2.default)(renderer.nodes, score, attributes, renderer.rendererId);
 
@@ -39,0 +39,0 @@ renderer.nodes[reference] = {

lib/dom/connection/insertRule.js

@@ -20,8 +20,11 @@ 'use strict';
       support = _ref.support,
+      media = _ref.media,
       pseudo = _ref.pseudo;
 
+  var nodeReference = media + support;
   // only use insertRule in production as browser devtools might have
   // weird behavior if used together with insertRule at runtime
   if (renderer.devMode) {
-    return (0, _insertRuleInDevMode2.default)(renderer, node);
+    (0, _insertRuleInDevMode2.default)(renderer, node);
+    return;
   }
@@ -33,12 +36,22 @@
 
+
     var index = cssRules.length;
 
-    // TODO: (PERF) instead of checking the score every time
-    // we could save the latest score=0 index to quickly inject
-    // basic styles and only check for score!=0 (e.g. pseudo classes)
-    for (var i = 0, len = cssRules.length; i < len; ++i) {
-      if (cssRules[i].score > score) {
-        index = i;
-        break;
+    if (score === 0) {
+      if (renderer.scoreIndex[nodeReference] === undefined) {
+        index = 0;
+      } else {
+        index = renderer.scoreIndex[nodeReference] + 1;
       }
+    } else {
+      // we start iterating from the last score=0 entry
+      // to corretly inject pseudo classes etc.
+      var startIndex = renderer.scoreIndex[nodeReference] || 0;
+
+      for (var i = startIndex, len = cssRules.length; i < len; ++i) {
+        if (cssRules[i].score > score) {
+          index = i;
+          break;
+        }
+      }
     }
@@ -55,6 +68,16 @@
 
+    if (score === 0) {
+      renderer.scoreIndex[nodeReference] = index;
+    }
+
     cssRules[index].score = score;
   } catch (e) {
-    console.warn('An error occurred while inserting the rules into DOM.\n', declaration.replace(/;/g, ';\n'), e);
+    // We're disabled these warnings due to false-positive errors with browser prefixes
+    // See https://github.com/rofrischmann/fela/issues/634
+    // console.warn(
+    //   `An error occurred while inserting the rules into DOM.\n`,
+    //   declaration.replace(/;/g, ';\n'),
+    //   e
+    // )
   }
 }

lib/dom/connection/insertRuleInDevMode.js

@@ -24,9 +24,9 @@ 'use strict';
 
-  var sheet = sheetList.find(function (sheet) {
+  var currentSheet = sheetList.find(function (sheet) {
     return sheet.type === _felaUtils.RULE_TYPE && sheet.media === media && sheet.support === support;
   });
 
-  if (sheet) {
-    node.textContent = sheet.css;
+  if (currentSheet) {
+    node.textContent = currentSheet.css;
   }
 }

lib/dom/connection/queryNode.js

@@ -11,7 +11,9 @@ 'use strict';
       support = _ref.support;
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
-  var mediaQuery = media ? '[media="' + media + '"]' : '';
-  var supportQuery = support ? '[data-fela-support="true"]' : '';
+  var idQuery = '[data-fela-id="' + id + '"]';
+  var mediaQuery = media ? '[media="' + media + '"]' : ':not([media])';
+  var supportQuery = support ? '[data-fela-support="true"]' : ':not([data-fela-support="true"])';
 
-  return document.querySelector('[data-fela-type="' + type + '"]' + supportQuery + mediaQuery);
+  return document.querySelector('[data-fela-type="' + type + '"]' + idQuery + supportQuery + mediaQuery);
 }

lib/dom/rehydrate.js

@@ -39,3 +39,5 @@ 'use strict';
 
-  (0, _arrayEach2.default)(document.querySelectorAll('[data-fela-type]'), function (node) {
+  var idQuery = '[data-fela-id="' + renderer.rendererId + '"]';
+
+  (0, _arrayEach2.default)(document.querySelectorAll('[data-fela-type]' + idQuery), function (node) {
     var rehydrationAttribute = node.getAttribute('data-fela-rehydration') || -1;
@@ -71,6 +73,14 @@ var rehydrationIndex = renderer.uniqueRuleIdentifier || parseInt(rehydrationAttribute, 10);
         if (node.sheet && node.sheet.cssRules) {
-          (0, _arrayEach2.default)(node.sheet.cssRules, function (rule) {
+          var nodeReference = media + support;
+
+          (0, _arrayEach2.default)(node.sheet.cssRules, function (rule, index) {
             var selectorText = rule.conditionText ? rule.cssRules[0].selectorText : rule.selectorText;
 
-            rule.score = (0, _felaUtils.getRuleScore)(renderer.ruleOrder, selectorText.split(CLASSNAME_REGEX)[1]);
+            var score = (0, _felaUtils.getRuleScore)(renderer.ruleOrder, selectorText.split(CLASSNAME_REGEX)[1]);
+
+            if (score === 0) {
+              renderer.scoreIndex[nodeReference] = index;
+            }
+
+            rule.score = score;
           });
@@ -77,0 +87,0 @@ }

lib/dom/rehydration/rehydrateSupportRules.js

@@ -29,2 +29,3 @@ 'use strict';
 
+  // eslint-disable-next-line no-cond-assign
   while (decl = SUPPORT_REGEX.exec(css)) {
@@ -31,0 +32,0 @@ var _decl = decl,

lib/dom/render.js

@@ -20,2 +20,3 @@ 'use strict';
   if (!renderer.updateSubscription) {
+    renderer.scoreIndex = {};
     renderer.nodes = {};
@@ -22,0 +23,0 @@

lib/server/createStyleTagMarkup.js

@@ -6,12 +6,14 @@ 'use strict';
 });
-exports.default = createStyleMarkup;
-function createStyleMarkup(css, type) {
-  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var rehydrationIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : -1;
-  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+exports.default = createStyleTagMarkup;
+function createStyleTagMarkup(css, type) {
+  var rendererId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var media = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var rehydrationIndex = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
+  var support = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
+  var idAttribute = ' data-fela-id="' + rendererId + '"';
   var mediaAttribute = media.length > 0 ? ' media="' + media + '"' : '';
   var supportAttribute = support ? ' data-fela-support="true"' : '';
 
-  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + supportAttribute + mediaAttribute + '>' + css + '</style>';
+  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + idAttribute + supportAttribute + mediaAttribute + '>' + css + '</style>';
 }

lib/server/renderToMarkup.js

@@ -38,3 +38,3 @@ 'use strict';
     if (cacheCluster[key].length > 0) {
-      markup += (0, _createStyleTagMarkup2.default)(cacheCluster[key], type, '', rehydrationIndex);
+      markup += (0, _createStyleTagMarkup2.default)(cacheCluster[key], type, renderer.rendererId, '', rehydrationIndex);
     }
@@ -48,3 +48,3 @@
   if (support) {
-    styleMarkup += (0, _createStyleTagMarkup2.default)(support, _felaUtils.RULE_TYPE, '', rehydrationIndex, true);
+    styleMarkup += (0, _createStyleTagMarkup2.default)(support, _felaUtils.RULE_TYPE, renderer.rendererId, '', rehydrationIndex, true);
   }
@@ -57,3 +57,3 @@
     if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
-      markup += (0, _createStyleTagMarkup2.default)(cacheCluster.mediaRules[media], _felaUtils.RULE_TYPE, media, rehydrationIndex);
+      markup += (0, _createStyleTagMarkup2.default)(cacheCluster.mediaRules[media], _felaUtils.RULE_TYPE, renderer.rendererId, media, rehydrationIndex);
     }
@@ -66,3 +66,3 @@
       if (mediaSupport.length > 0) {
-        markup += (0, _createStyleTagMarkup2.default)(mediaSupport, _felaUtils.RULE_TYPE, media, rehydrationIndex, true);
+        markup += (0, _createStyleTagMarkup2.default)(mediaSupport, _felaUtils.RULE_TYPE, renderer.rendererId, media, rehydrationIndex, true);
       }
@@ -69,0 +69,0 @@ }

package.json

 {
   "name": "fela-dom",
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Fela package for working with the DOM",
@@ -29,10 +29,10 @@ "main": "lib/index.js",
     "fast-loops": "^1.0.1",
-    "fela-utils": "^10.2.3"
+    "fela-utils": "^10.2.4"
   },
   "devDependencies": {
-    "fela": "^10.2.3",
-    "fela-preset-web": "^10.2.3",
-    "fela-tools": "^10.2.3"
+    "fela": "^10.2.4",
+    "fela-preset-web": "^10.2.4",
+    "fela-tools": "^10.2.4"
   },
-  "gitHead": "4edeeffc5be2e05473a52c24523dbebcd9e0ef0d"
+  "gitHead": "3ebc6e467fd99f0cefffe29ee42eaac3d32ef7ce"
 }

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Improved metrics

Total package byte prevSize

70648

increased by43.66%

Number of package files

63

increased by34.04%

Lines of code

1515

increased by47.37%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

• Updatedfela-utils@^10.2.4