fela-dom - npm Package Compare versions

Comparing version 10.8.2 to 11.0.0

es/dom/connection/createNode.js

@@ -0,11 +1,17 @@
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 import objectReduce from 'fast-loops/lib/objectReduce';
 
-export default function createNode(nodes, score, _ref) {
-  var type = _ref.type,
-      media = _ref.media,
-      support = _ref.support;
-  var targetDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+import getNodeSibling from './getNodeSibling';
 
+export default function createNode(attributes) {
+  var targetDocument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  var sortMediaQuery = arguments[2];
+
   var head = targetDocument.head || {};
+  var type = attributes.type,
+      media = attributes.media,
+      support = attributes.support;
 
+
   var node = targetDocument.createElement('style');
@@ -23,10 +29,7 @@ node.setAttribute('data-fela-type', type);
 
-  // we calculate the most next bigger style node
-  // to correctly inject the node just before it
-  var moreSpecificReference = objectReduce(nodes, function (closest, currentNode, reference) {
-    return currentNode.score > score && (!closest || nodes[closest].score > currentNode.score) ? reference : closest;
-  }, undefined);
+  var nodes = head.querySelectorAll('[data-fela-type]');
+  var sibling = getNodeSibling([].concat(_toConsumableArray(nodes)), attributes, sortMediaQuery);
 
-  if (moreSpecificReference) {
-    head.insertBefore(node, nodes[moreSpecificReference].node);
+  if (sibling) {
+    head.insertBefore(node, sibling);
   } else {
@@ -33,0 +36,0 @@ head.appendChild(node);

es/dom/connection/createSubscription.js

@@ -14,4 +14,3 @@
     if (change.type === CLEAR_TYPE) {
-      objectEach(renderer.nodes, function (_ref) {
-        var node = _ref.node;
+      objectEach(renderer.nodes, function (node) {
         return node.parentNode.removeChild(node);
@@ -29,9 +28,17 @@ });
       case KEYFRAME_TYPE:
-        node.textContent += change.keyframe;
+        if (node.textContent.indexOf(change.keyframe) === -1) {
+          node.textContent += change.keyframe;
+        }
         break;
       case FONT_TYPE:
-        node.textContent += change.fontFace;
+        if (node.textContent.indexOf(change.fontFace) === -1) {
+          node.textContent += change.fontFace;
+        }
         break;
       case STATIC_TYPE:
-        node.textContent += change.selector ? generateCSSRule(change.selector, change.css) : change.css;
+        var css = change.selector ? generateCSSRule(change.selector, change.css) : change.css;
+
+        if (node.textContent.indexOf(css) === -1) {
+          node.textContent += css;
+        }
         break;
@@ -38,0 +45,0 @@ case RULE_TYPE:

es/dom/connection/getNodeFromCache.js

@@ -1,2 +0,1 @@
-import calculateNodeScore from './calculateNodeScore';
 import queryNode from './queryNode';
@@ -21,12 +20,8 @@ import createNode from './createNode';
   if (!renderer.nodes[reference]) {
-    var score = calculateNodeScore(attributes, renderer.mediaQueryOrder);
-    var node = queryNode(attributes, targetDocument) || createNode(renderer.nodes, score, attributes, targetDocument);
+    var node = queryNode(attributes, targetDocument) || createNode(attributes, targetDocument, renderer.sortMediaQuery);
 
-    renderer.nodes[reference] = {
-      node: node,
-      score: score
-    };
+    renderer.nodes[reference] = node;
   }
 
-  return renderer.nodes[reference].node;
+  return renderer.nodes[reference];
 }

es/dom/connection/insertRule.js

@@ -64,3 +64,3 @@ import { generateCSSRule, generateCSSSupportRule, getRuleScore } from 'fela-utils';
     // We're disabled these warnings due to false-positive errors with browser prefixes
-    // See https://github.com/rofrischmann/fela/issues/634
+    // See https://github.com/robinweser/fela/issues/634
     // console.warn(
@@ -67,0 +67,0 @@ //   `An error occurred while inserting the rules into DOM.\n`,

es/dom/connection/insertRuleInDevMode.js

@@ -11,3 +11,3 @@ import { RULE_TYPE } from 'fela-utils';
   var media = node.getAttribute('media') || undefined;
-  var support = node.getAttribute('data-fela-support') || undefined;
+  var support = node.getAttribute('data-fela-support') ? true : undefined;
 
@@ -14,0 +14,0 @@ var currentSheet = sheetList.find(function (sheet) {

es/dom/rehydrate.js

@@ -6,3 +6,2 @@ import arrayEach from 'fast-loops/lib/arrayEach';
 import rehydrateRules from './rehydration/rehydrateRules';
-import calculateNodeScore from './connection/calculateNodeScore';
 
@@ -35,6 +34,3 @@ import render from './render';
       var reference = type + media + support;
-      renderer.nodes[reference] = {
-        score: calculateNodeScore({ type: type, media: media, support: support }, renderer.mediaQueryOrder),
-        node: node
-      };
+      renderer.nodes[reference] = node;
 
@@ -50,3 +46,3 @@ if (type === RULE_TYPE) {
         // can yield null for node.sheet
-        // https://github.com/rofrischmann/fela/issues/431#issuecomment-423239591
+        // https://github.com/robinweser/fela/issues/431#issuecomment-423239591
         if (node.sheet && node.sheet.cssRules) {
@@ -53,0 +49,0 @@ var nodeReference = media + support;

es/server/renderToMarkup.js

@@ -11,3 +11,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; };
 export default function renderToMarkup(renderer) {
-  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder, renderer.ruleOrder);
+  var cacheCluster = clusterCache(renderer.cache, renderer.ruleOrder);
 
@@ -30,3 +30,3 @@ var rehydrationIndex = getRehydrationIndex(renderer);
 
-  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules)).sort(renderer.sortMediaQuery);
 
@@ -33,0 +33,0 @@ return arrayReduce(mediaKeys, function (markup, media) {

es/server/renderToSheetList.js

@@ -10,3 +10,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; };
 export default function renderToSheetList(renderer) {
-  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder, renderer.ruleOrder);
+  var cacheCluster = clusterCache(renderer.cache, renderer.ruleOrder);
 
@@ -38,3 +38,3 @@ var rehydrationIndex = getRehydrationIndex(renderer);
 
-  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules)).sort(renderer.sortMediaQuery);
 
@@ -41,0 +41,0 @@ return arrayReduce(mediaKeys, function (list, media) {

lib/dom/connection/createNode.js

@@ -12,12 +12,20 @@ 'use strict';
 
+var _getNodeSibling = require('./getNodeSibling');
+
+var _getNodeSibling2 = _interopRequireDefault(_getNodeSibling);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function createNode(nodes, score, _ref) {
-  var type = _ref.type,
-      media = _ref.media,
-      support = _ref.support;
-  var targetDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
+function createNode(attributes) {
+  var targetDocument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  var sortMediaQuery = arguments[2];
+
   var head = targetDocument.head || {};
+  var type = attributes.type,
+      media = attributes.media,
+      support = attributes.support;
 
+
   var node = targetDocument.createElement('style');
@@ -35,10 +43,7 @@ node.setAttribute('data-fela-type', type);
 
-  // we calculate the most next bigger style node
-  // to correctly inject the node just before it
-  var moreSpecificReference = (0, _objectReduce2.default)(nodes, function (closest, currentNode, reference) {
-    return currentNode.score > score && (!closest || nodes[closest].score > currentNode.score) ? reference : closest;
-  }, undefined);
+  var nodes = head.querySelectorAll('[data-fela-type]');
+  var sibling = (0, _getNodeSibling2.default)([].concat(_toConsumableArray(nodes)), attributes, sortMediaQuery);
 
-  if (moreSpecificReference) {
-    head.insertBefore(node, nodes[moreSpecificReference].node);
+  if (sibling) {
+    head.insertBefore(node, sibling);
   } else {
@@ -45,0 +50,0 @@ head.appendChild(node);

lib/dom/connection/createSubscription.js

@@ -30,4 +30,3 @@ 'use strict';
     if (change.type === _felaUtils.CLEAR_TYPE) {
-      (0, _objectEach2.default)(renderer.nodes, function (_ref) {
-        var node = _ref.node;
+      (0, _objectEach2.default)(renderer.nodes, function (node) {
         return node.parentNode.removeChild(node);
@@ -45,9 +44,17 @@ });
       case _felaUtils.KEYFRAME_TYPE:
-        node.textContent += change.keyframe;
+        if (node.textContent.indexOf(change.keyframe) === -1) {
+          node.textContent += change.keyframe;
+        }
         break;
       case _felaUtils.FONT_TYPE:
-        node.textContent += change.fontFace;
+        if (node.textContent.indexOf(change.fontFace) === -1) {
+          node.textContent += change.fontFace;
+        }
         break;
       case _felaUtils.STATIC_TYPE:
-        node.textContent += change.selector ? (0, _felaUtils.generateCSSRule)(change.selector, change.css) : change.css;
+        var css = change.selector ? (0, _felaUtils.generateCSSRule)(change.selector, change.css) : change.css;
+
+        if (node.textContent.indexOf(css) === -1) {
+          node.textContent += css;
+        }
         break;
@@ -54,0 +61,0 @@ case _felaUtils.RULE_TYPE:

lib/dom/connection/getNodeFromCache.js

@@ -8,6 +8,2 @@ 'use strict';
 
-var _calculateNodeScore = require('./calculateNodeScore');
-
-var _calculateNodeScore2 = _interopRequireDefault(_calculateNodeScore);
-
 var _queryNode = require('./queryNode');
@@ -32,2 +28,3 @@
 }
+
 function getNodeFromCache(attributes, renderer) {
@@ -39,12 +36,8 @@ var targetDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
   if (!renderer.nodes[reference]) {
-    var score = (0, _calculateNodeScore2.default)(attributes, renderer.mediaQueryOrder);
-    var node = (0, _queryNode2.default)(attributes, targetDocument) || (0, _createNode2.default)(renderer.nodes, score, attributes, targetDocument);
+    var node = (0, _queryNode2.default)(attributes, targetDocument) || (0, _createNode2.default)(attributes, targetDocument, renderer.sortMediaQuery);
 
-    renderer.nodes[reference] = {
-      node: node,
-      score: score
-    };
+    renderer.nodes[reference] = node;
   }
 
-  return renderer.nodes[reference].node;
+  return renderer.nodes[reference];
 }

lib/dom/connection/insertRule.js

@@ -75,3 +75,3 @@ 'use strict';
     // We're disabled these warnings due to false-positive errors with browser prefixes
-    // See https://github.com/rofrischmann/fela/issues/634
+    // See https://github.com/robinweser/fela/issues/634
     // console.warn(
@@ -78,0 +78,0 @@ //   `An error occurred while inserting the rules into DOM.\n`,

lib/dom/connection/insertRuleInDevMode.js

@@ -22,3 +22,3 @@ 'use strict';
   var media = node.getAttribute('media') || undefined;
-  var support = node.getAttribute('data-fela-support') || undefined;
+  var support = node.getAttribute('data-fela-support') ? true : undefined;
 
@@ -25,0 +25,0 @@ var currentSheet = sheetList.find(function (sheet) {

lib/dom/rehydrate.js

@@ -22,6 +22,2 @@ 'use strict';
 
-var _calculateNodeScore = require('./connection/calculateNodeScore');
-
-var _calculateNodeScore2 = _interopRequireDefault(_calculateNodeScore);
-
 var _render = require('./render');
@@ -37,2 +33,3 @@
 // TODO: static, keyframe, font
+
 function rehydrate(renderer) {
@@ -58,6 +55,3 @@ var targetDocument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
       var reference = type + media + support;
-      renderer.nodes[reference] = {
-        score: (0, _calculateNodeScore2.default)({ type: type, media: media, support: support }, renderer.mediaQueryOrder),
-        node: node
-      };
+      renderer.nodes[reference] = node;
 
@@ -73,3 +67,3 @@ if (type === _felaUtils.RULE_TYPE) {
         // can yield null for node.sheet
-        // https://github.com/rofrischmann/fela/issues/431#issuecomment-423239591
+        // https://github.com/robinweser/fela/issues/431#issuecomment-423239591
         if (node.sheet && node.sheet.cssRules) {
@@ -76,0 +70,0 @@ var nodeReference = media + support;

lib/server/renderToMarkup.js

@@ -32,3 +32,3 @@ 'use strict';
 function renderToMarkup(renderer) {
-  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder, renderer.ruleOrder);
+  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.ruleOrder);
 
@@ -51,3 +51,3 @@ var rehydrationIndex = (0, _getRehydrationIndex2.default)(renderer);
 
-  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules)).sort(renderer.sortMediaQuery);
 
@@ -54,0 +54,0 @@ return (0, _arrayReduce2.default)(mediaKeys, function (markup, media) {

lib/server/renderToSheetList.js

@@ -28,3 +28,3 @@ 'use strict';
 function renderToSheetList(renderer) {
-  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder, renderer.ruleOrder);
+  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.ruleOrder);
 
@@ -56,3 +56,3 @@ var rehydrationIndex = (0, _getRehydrationIndex2.default)(renderer);
 
-  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules)).sort(renderer.sortMediaQuery);
 
@@ -59,0 +59,0 @@ return (0, _arrayReduce2.default)(mediaKeys, function (list, media) {

package.json

 {
   "name": "fela-dom",
-  "version": "10.8.2",
+  "version": "11.0.0",
   "description": "Fela package for working with the DOM",
@@ -15,3 +15,3 @@ "main": "lib/index.js",
   ],
-  "repository": "https://github.com/rofrischmann/fela/",
+  "repository": "https://github.com/robinweser/fela/",
   "keywords": [
@@ -30,10 +30,11 @@ "fela",
     "fast-loops": "^1.0.1",
-    "fela-utils": "^10.8.2"
+    "fela-utils": "^11.0.0",
+    "sort-css-media-queries": "^1.4.3"
   },
   "devDependencies": {
-    "fela": "^10.8.2",
-    "fela-preset-web": "^10.8.2",
-    "fela-tools": "^10.8.2"
+    "fela": "^11.0.0",
+    "fela-preset-web": "^11.0.0",
+    "fela-tools": "^11.0.0"
   },
-  "gitHead": "9e672da639a79155774bab89060d47bd8d461d57"
+  "gitHead": "ff394c7a5d741ddd039145fd6d5944bf3e918f58"
 }

README.md

@@ -7,2 +7,2 @@ # fela-dom
 
-Check out the [Fela repository](https://github.com/rofrischmann/fela) for further information.
+Check out the [Fela repository](https://github.com/robinweser/fela) for further information.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58088

increased by13.22%

Number of package files

49

increased by8.89%

Lines of code

1275

increased by16.97%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedsort-css-media-queries@^1.4.3

• + Addedfela-utils@11.7.0(transitive)

• + Addedsort-css-media-queries@1.5.4(transitive)

• - Removedfela-utils@10.8.2(transitive)

• Updatedfela-utils@^11.0.0