fela-dom - npm Package Compare versions

Comparing version 6.0.6 to 7.0.0

es/dom/connectDOMNodes.js

@@ -1,21 +0,18 @@
-import { clusterCache, objectEach, RULE_TYPE, STATIC_TYPE, KEYFRAME_TYPE, FONT_TYPE } from 'fela-utils';
+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; };
 
+import forEach from 'lodash/forEach';
+
+import { clusterCache, cssifySupportRules, sheetMap, RULE_TYPE } from 'fela-utils';
+
 import initDOMNode from './initDOMNode';
 import findDOMNodes from './findDOMNodes';
 
-var sheetMap = {
-  fontFaces: FONT_TYPE,
-  statics: STATIC_TYPE,
-  keyframes: KEYFRAME_TYPE,
-  rules: RULE_TYPE
-};
-
 export default function connectDOMNodes(renderer) {
   renderer.nodes = findDOMNodes();
 
-  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var baseNode = renderer.nodes[RULE_TYPE];
 
-  objectEach(sheetMap, function (type, key) {
+  forEach(sheetMap, function (type, key) {
     if (cacheCluster[key].length > 0) {
@@ -26,7 +23,23 @@ initDOMNode(renderer.nodes, baseNode, cacheCluster[key], type);
 
-  objectEach(cacheCluster.mediaRules, function (clusteredCache, media) {
-    if (clusteredCache.length > 0) {
-      initDOMNode(renderer.nodes, baseNode, clusteredCache, RULE_TYPE, media);
+  var support = cssifySupportRules(cacheCluster.supportRules);
+
+  if (support) {
+    initDOMNode(renderer.nodes, baseNode, support, RULE_TYPE, '', true);
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  forEach(mediaKeys, function (media) {
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
+      initDOMNode(renderer.nodes, baseNode, cacheCluster.mediaRules[media], RULE_TYPE, media);
     }
+
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = cssifySupportRules(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        initDOMNode(renderer.nodes, baseNode, mediaSupport, RULE_TYPE, media, true);
+      }
+    }
   });
 }

es/dom/createDOMNode.js

@@ -5,5 +5,5 @@ function getDocumentHead() {
 
-export default function createDOMNode(type) {
-  var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var anchorNode = arguments[2];
+export default function createDOMNode(type, anchorNode) {
+  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var support = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
 
@@ -16,9 +16,16 @@ var head = getDocumentHead();
 
+  if (support) {
+    node.setAttribute('data-fela-support', 'true');
+  }
+
   if (media.length > 0) {
     node.media = media;
+  }
+
+  if (support || media.length > 0) {
     head.appendChild(node);
+  } else if (anchorNode) {
+    head.insertBefore(node, anchorNode);
   } else {
-    // if anchorNode is undefined it will
-    // be added at the end by default
-    head.insertBefore(node, anchorNode);
+    head.appendChild(node);
   }
@@ -25,0 +32,0 @@

es/dom/createDOMSubscription.js

@@ -6,5 +6,7 @@ var _changeHandlers;
 /* eslint-disable consistent-return */
-import { RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE, CLEAR_TYPE, generateCSSRule, objectEach } from 'fela-utils';
+import forEach from 'lodash/forEach';
+import { RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE, CLEAR_TYPE, generateCSSRule } from 'fela-utils';
 
 import getDOMNode from './getDOMNode';
+import generateRule from './generateRule';
 
@@ -16,3 +18,3 @@ var changeHandlers = (_changeHandlers = {}, _defineProperty(_changeHandlers, RULE_TYPE, function (node, _ref) {
 
-  var cssRule = generateCSSRule(selector, declaration, support);
+  var cssRule = generateRule(selector, declaration, support);
 
@@ -55,3 +57,3 @@ // only use insertRule in production as browser devtools might have
     if (change.type === CLEAR_TYPE) {
-      return objectEach(nodes, function (node) {
+      return forEach(nodes, function (node) {
         node.textContent = '';
@@ -64,3 +66,4 @@ });
     if (handleChange) {
-      var node = getDOMNode(nodes, baseNode, change.type, change.media);
+      var node = getDOMNode(nodes, baseNode, change.type, change.media, !!change.support);
+
       handleChange(node, change);
@@ -67,0 +70,0 @@ }

es/dom/findDOMNodes.js

@@ -1,11 +0,12 @@
-import { arrayReduce } from 'fela-utils';
+import reduce from 'lodash/reduce';
 
-export default function selectDOMNodes() {
-  return arrayReduce(document.querySelectorAll('[data-fela-type]'), function (DOMNodes, node) {
+export default function findDOMNodes() {
+  return reduce(document.querySelectorAll('[data-fela-type]'), function (nodes, node) {
     var type = node.getAttribute('data-fela-type') || '';
     var media = node.getAttribute('media') || '';
+    var support = node.getAttribute('support') ? 'support' : '';
 
-    DOMNodes[type + media] = node;
-    return DOMNodes;
+    nodes[type + media + support] = node;
+    return nodes;
   }, {});
 }

es/dom/getDOMNode.js

@@ -5,7 +5,8 @@ import createDOMNode from './createDOMNode';
   var media = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
-  var key = type + media;
+  var key = type + media + (support ? 'support' : '');
 
   if (!nodes.hasOwnProperty(key)) {
-    nodes[key] = createDOMNode(type, media, baseNode);
+    nodes[key] = createDOMNode(type, baseNode, media, support);
   }
@@ -12,0 +13,0 @@

es/dom/initDOMNode.js

@@ -5,4 +5,5 @@ import getDOMNode from './getDOMNode';
   var media = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
+  var support = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
-  var node = getDOMNode(nodes, baseNode, type, media);
+  var node = getDOMNode(nodes, baseNode, type, media, support);
   // in case that there is a node coming from server already
@@ -9,0 +10,0 @@ // but rules are not matchnig

es/dom/rehydration/rehydrate.js

@@ -1,12 +0,11 @@
-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; };
+import forEach from 'lodash/forEach';
+import { RULE_TYPE } from 'fela-utils';
 
-import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty';
-import { arrayEach, generateCSSSelector, RULE_TYPE } from 'fela-utils';
+import rehydrateSupportRules from './rehydrateSupportRules';
+import rehydrateRules from './rehydrateRules';
 
-import rehydrateCache from './rehydrateCache';
-
 // rehydration (WIP)
 // TODO: static, keyframe, font
 export default function rehydrate(renderer) {
-  arrayEach(document.querySelectorAll('[data-fela-type]'), function (node) {
+  forEach(document.querySelectorAll('[data-fela-type]'), function (node) {
     var rehydrationAttribute = node.getAttribute('data-fela-rehydration') || -1;
@@ -20,2 +19,3 @@ var rehydrationIndex = parseInt(rehydrationAttribute);
       var media = node.getAttribute('media') || '';
+      var support = node.getAttribute('data-fela-support');
       var css = node.textContent;
@@ -26,3 +26,7 @@
       if (type === RULE_TYPE) {
-        renderer.cache = _extends({}, rehydrateCache(css, media), renderer.cache);
+        if (support) {
+          rehydrateSupportRules(css, media, renderer.cache);
+        } else {
+          rehydrateRules(css, media, '', renderer.cache);
+        }
       }
@@ -29,0 +33,0 @@ }

es/dom/rehydration/rehydrateRules.js

 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"); } }; }();
 
-import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty';
-import { generateCSSSelector, RULE_TYPE } from 'fela-utils';
+import { RULE_TYPE } from 'fela-utils';
 
+import generateCacheEntry from './generateCacheEntry';
+import generateDeclarationReference from './generateDeclarationReference';
+
 var DECL_REGEX = /[.]([0-9a-z_-]+)([^{]+)?{([^:]+):([^}]+)}/gi;
 
-export default function rehydrateRules(cache, css) {
-  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var support = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+export default function rehydrateRules(css) {
+  var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var support = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var cache = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
@@ -23,4 +26,3 @@ var decl = void 0;
         className = _decl2[1],
-        _decl2$ = _decl2[2],
-        pseudo = _decl2$ === undefined ? '' : _decl2$,
+        pseudo = _decl2[2],
         property = _decl2[3],
@@ -30,12 +32,8 @@ value = _decl2[4];
 
-    var declarationReference = support + media + pseudo + camelCaseProperty(property) + value;
-    cache[declarationReference] = {
-      type: RULE_TYPE,
-      className: className,
-      selector: generateCSSSelector(className, pseudo),
-      declaration: property + ':' + value,
-      media: media,
-      support: support
-    };
+    var declarationReference = generateDeclarationReference(property, value, pseudo, media, support);
+
+    cache[declarationReference] = generateCacheEntry(RULE_TYPE, className, property, value, pseudo, media, support);
   }
+
+  return cache;
 }

es/dom/rehydration/rehydrateSupportRules.js

 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"); } }; }();
 
-import { extractSupportQuery } from 'fela-utils';
-
+import extractSupportQuery from './extractSupportQuery';
 import rehydrateRules from './rehydrateRules';
 
-var SUPPORT_REGEX = /@supports[^{]+\{([\s\S]+?})\s*}/g;
+var SUPPORT_REGEX = /@supports[^{]+\{([\s\S]+?})\s*}/gi;
 
 export default function rehydrateSupportRules(css) {
   var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var cache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-  var supportCache = {};
-  var ruleCss = css;
-
   var decl = void 0;
@@ -21,14 +18,9 @@
         ruleSet = _decl2[0],
-        rules = _decl2[1];
+        cssRules = _decl2[1];
 
-    var support = extractSupportQuery(ruleSet);
-    ruleCss = ruleCss.replace(ruleSet, '');
-
-    rehydrateRules(supportCache, rules, media, support);
+    var supportQuery = extractSupportQuery(ruleSet);
+    rehydrateRules(cssRules, media, supportQuery, cache);
   }
 
-  return {
-    ruleCss: ruleCss,
-    supportCache: supportCache
-  };
+  return cache;
 }

es/index.js

@@ -7,14 +7,2 @@ import render from './dom/render';
 
-var didWarn = false;
-
-function rehydrateCache() {
-  if (!didWarn) {
-    didWarn = true;
-
-    console.warn('[fela-dom] `rehydrateCache` has been renamed to simply `rehydrate`.\n' + 'Import `rehydrate` directly as it will be removed in version 7.0.0.');
-  }
-
-  return rehydrate.apply(undefined, arguments);
-}
-
-export { render, rehydrateCache, rehydrate, renderToMarkup, renderToSheetList };
+export { render, rehydrate, renderToMarkup, renderToSheetList };

es/server/createStyleTagMarkup.js

@@ -6,6 +6,8 @@
   var rehydrationIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : -1;
+  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
   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 + '"' + mediaAttribute + '>' + css + '</style>';
+  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + supportAttribute + mediaAttribute + '>' + css + '</style>';
 }

es/server/renderToMarkup.js

@@ -1,19 +0,16 @@
-import { objectReduce, clusterCache, RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE } from 'fela-utils';
+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; };
 
+import reduce from 'lodash/reduce';
+
+import { clusterCache, cssifySupportRules, sheetMap, RULE_TYPE } from 'fela-utils';
+
 import createStyleTagMarkup from './createStyleTagMarkup';
 import getRehydrationIndex from './getRehydrationIndex';
 
-var sheetMap = {
-  fontFaces: FONT_TYPE,
-  statics: STATIC_TYPE,
-  keyframes: KEYFRAME_TYPE,
-  rules: RULE_TYPE
-};
-
 export default function renderToMarkup(renderer) {
-  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var rehydrationIndex = getRehydrationIndex(renderer);
 
-  var basicMarkup = objectReduce(sheetMap, function (markup, type, key) {
+  var styleMarkup = reduce(sheetMap, function (markup, type, key) {
     if (cacheCluster[key].length > 0) {
@@ -26,9 +23,27 @@ markup += createStyleTagMarkup(cacheCluster[key], type, '', rehydrationIndex);
 
-  return objectReduce(cacheCluster.mediaRules, function (markup, css, media) {
-    if (css.length > 0) {
-      markup += createStyleTagMarkup(css, RULE_TYPE, media, rehydrationIndex);
+  var support = cssifySupportRules(cacheCluster.supportRules);
+
+  if (support) {
+    styleMarkup += createStyleTagMarkup(support, RULE_TYPE, '', rehydrationIndex, true);
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  return reduce(mediaKeys, function (markup, media) {
+    // basic media query rules
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
+      markup += createStyleTagMarkup(cacheCluster.mediaRules[media], RULE_TYPE, media, rehydrationIndex);
     }
 
+    // support media rules
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = cssifySupportRules(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        markup += createStyleTagMarkup(mediaSupport, RULE_TYPE, media, rehydrationIndex, true);
+      }
+    }
+
     return markup;
-  }, basicMarkup);
+  }, styleMarkup);
 }

es/server/renderToSheetList.js

@@ -1,18 +0,14 @@
-import { clusterCache, objectReduce, RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE } from 'fela-utils';
+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; };
 
+import reduce from 'lodash/reduce';
+import { clusterCache, cssifySupportRules, sheetMap, RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, STATIC_TYPE } from 'fela-utils';
+
 import getRehydrationIndex from './getRehydrationIndex';
 
-var sheetMap = {
-  fontFaces: FONT_TYPE,
-  statics: STATIC_TYPE,
-  keyframes: KEYFRAME_TYPE,
-  rules: RULE_TYPE
-};
-
 export default function renderToSheetList(renderer) {
-  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var rehydrationIndex = getRehydrationIndex(renderer);
 
-  var sheetList = objectReduce(sheetMap, function (list, type, key) {
+  var sheetList = reduce(sheetMap, function (list, type, key) {
     if (cacheCluster[key].length > 0) {
@@ -29,6 +25,20 @@ list.push({
 
-  return objectReduce(cacheCluster.mediaRules, function (list, css, media) {
-    if (css.length > 0) {
+  var support = cssifySupportRules(cacheCluster.supportRules);
+
+  if (support) {
+    sheetList.push({
+      css: support,
+      type: RULE_TYPE,
+      rehydration: rehydrationIndex,
+      support: true
+    });
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  return reduce(mediaKeys, function (list, media) {
+    // basic media query rules
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
       list.push({
-        css: css,
+        css: cacheCluster.mediaRules[media],
         type: RULE_TYPE,
@@ -40,4 +50,19 @@ rehydration: rehydrationIndex,
 
+    // support media rules
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = cssifySupportRules(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        list.push({
+          css: mediaSupport,
+          type: RULE_TYPE,
+          rehydration: rehydrationIndex,
+          support: true,
+          media: media
+        });
+      }
+    }
+
     return list;
   }, sheetList);
 }

lib/dom/connectDOMNodes.js

@@ -6,4 +6,11 @@ 'use strict';
 });
+
+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; };
+
 exports.default = connectDOMNodes;
 
+var _forEach = require('lodash/forEach');
+
+var _forEach2 = _interopRequireDefault(_forEach);
+
 var _felaUtils = require('fela-utils');
@@ -21,16 +28,10 @@
 
-var sheetMap = {
-  fontFaces: _felaUtils.FONT_TYPE,
-  statics: _felaUtils.STATIC_TYPE,
-  keyframes: _felaUtils.KEYFRAME_TYPE,
-  rules: _felaUtils.RULE_TYPE
-};
 function connectDOMNodes(renderer) {
   renderer.nodes = (0, _findDOMNodes2.default)();
 
-  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var baseNode = renderer.nodes[_felaUtils.RULE_TYPE];
 
-  (0, _felaUtils.objectEach)(sheetMap, function (type, key) {
+  (0, _forEach2.default)(_felaUtils.sheetMap, function (type, key) {
     if (cacheCluster[key].length > 0) {
@@ -41,7 +42,23 @@ (0, _initDOMNode2.default)(renderer.nodes, baseNode, cacheCluster[key], type);
 
-  (0, _felaUtils.objectEach)(cacheCluster.mediaRules, function (clusteredCache, media) {
-    if (clusteredCache.length > 0) {
-      (0, _initDOMNode2.default)(renderer.nodes, baseNode, clusteredCache, _felaUtils.RULE_TYPE, media);
+  var support = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportRules);
+
+  if (support) {
+    (0, _initDOMNode2.default)(renderer.nodes, baseNode, support, _felaUtils.RULE_TYPE, '', true);
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  (0, _forEach2.default)(mediaKeys, function (media) {
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
+      (0, _initDOMNode2.default)(renderer.nodes, baseNode, cacheCluster.mediaRules[media], _felaUtils.RULE_TYPE, media);
     }
+
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        (0, _initDOMNode2.default)(renderer.nodes, baseNode, mediaSupport, _felaUtils.RULE_TYPE, media, true);
+      }
+    }
   });
 }

lib/dom/createDOMNode.js

@@ -11,5 +11,5 @@ 'use strict';
 
-function createDOMNode(type) {
-  var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var anchorNode = arguments[2];
+function createDOMNode(type, anchorNode) {
+  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var support = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
 
@@ -22,9 +22,16 @@ var head = getDocumentHead();
 
+  if (support) {
+    node.setAttribute('data-fela-support', 'true');
+  }
+
   if (media.length > 0) {
     node.media = media;
+  }
+
+  if (support || media.length > 0) {
     head.appendChild(node);
+  } else if (anchorNode) {
+    head.insertBefore(node, anchorNode);
   } else {
-    // if anchorNode is undefined it will
-    // be added at the end by default
-    head.insertBefore(node, anchorNode);
+    head.appendChild(node);
   }
@@ -31,0 +38,0 @@

lib/dom/createDOMSubscription.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _forEach = require('lodash/forEach');
+
+var _forEach2 = _interopRequireDefault(_forEach);
+
 var _felaUtils = require('fela-utils');
@@ -18,2 +22,6 @@
 
+var _generateRule = require('./generateRule');
+
+var _generateRule2 = _interopRequireDefault(_generateRule);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,3 +38,3 @@
 
-  var cssRule = (0, _felaUtils.generateCSSRule)(selector, declaration, support);
+  var cssRule = (0, _generateRule2.default)(selector, declaration, support);
 
@@ -69,3 +77,3 @@ // only use insertRule in production as browser devtools might have
     if (change.type === _felaUtils.CLEAR_TYPE) {
-      return (0, _felaUtils.objectEach)(nodes, function (node) {
+      return (0, _forEach2.default)(nodes, function (node) {
         node.textContent = '';
@@ -78,3 +86,4 @@ });
     if (handleChange) {
-      var node = (0, _getDOMNode2.default)(nodes, baseNode, change.type, change.media);
+      var node = (0, _getDOMNode2.default)(nodes, baseNode, change.type, change.media, !!change.support);
+
       handleChange(node, change);
@@ -81,0 +90,0 @@ }

lib/dom/findDOMNodes.js

@@ -6,14 +6,19 @@ 'use strict';
 });
-exports.default = selectDOMNodes;
+exports.default = findDOMNodes;
 
-var _felaUtils = require('fela-utils');
+var _reduce = require('lodash/reduce');
 
-function selectDOMNodes() {
-  return (0, _felaUtils.arrayReduce)(document.querySelectorAll('[data-fela-type]'), function (DOMNodes, node) {
+var _reduce2 = _interopRequireDefault(_reduce);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function findDOMNodes() {
+  return (0, _reduce2.default)(document.querySelectorAll('[data-fela-type]'), function (nodes, node) {
     var type = node.getAttribute('data-fela-type') || '';
     var media = node.getAttribute('media') || '';
+    var support = node.getAttribute('support') ? 'support' : '';
 
-    DOMNodes[type + media] = node;
-    return DOMNodes;
+    nodes[type + media + support] = node;
+    return nodes;
   }, {});
 }

lib/dom/getDOMNode.js

@@ -16,7 +16,8 @@ 'use strict';
   var media = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
-  var key = type + media;
+  var key = type + media + (support ? 'support' : '');
 
   if (!nodes.hasOwnProperty(key)) {
-    nodes[key] = (0, _createDOMNode2.default)(type, media, baseNode);
+    nodes[key] = (0, _createDOMNode2.default)(type, baseNode, media, support);
   }
@@ -23,0 +24,0 @@

lib/dom/initDOMNode.js

@@ -16,4 +16,5 @@ 'use strict';
   var media = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
+  var support = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
-  var node = (0, _getDOMNode2.default)(nodes, baseNode, type, media);
+  var node = (0, _getDOMNode2.default)(nodes, baseNode, type, media, support);
   // in case that there is a node coming from server already
@@ -20,0 +21,0 @@ // but rules are not matchnig

lib/dom/rehydration/rehydrate.js

@@ -6,17 +6,18 @@ 'use strict';
 });
-
-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; };
-
 exports.default = rehydrate;
 
-var _camelCaseProperty = require('css-in-js-utils/lib/camelCaseProperty');
+var _forEach = require('lodash/forEach');
 
-var _camelCaseProperty2 = _interopRequireDefault(_camelCaseProperty);
+var _forEach2 = _interopRequireDefault(_forEach);
 
 var _felaUtils = require('fela-utils');
 
-var _rehydrateCache = require('./rehydrateCache');
+var _rehydrateSupportRules = require('./rehydrateSupportRules');
 
-var _rehydrateCache2 = _interopRequireDefault(_rehydrateCache);
+var _rehydrateSupportRules2 = _interopRequireDefault(_rehydrateSupportRules);
 
+var _rehydrateRules = require('./rehydrateRules');
+
+var _rehydrateRules2 = _interopRequireDefault(_rehydrateRules);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,3 +28,3 @@
 function rehydrate(renderer) {
-  (0, _felaUtils.arrayEach)(document.querySelectorAll('[data-fela-type]'), function (node) {
+  (0, _forEach2.default)(document.querySelectorAll('[data-fela-type]'), function (node) {
     var rehydrationAttribute = node.getAttribute('data-fela-rehydration') || -1;
@@ -37,2 +38,3 @@ var rehydrationIndex = parseInt(rehydrationAttribute);
       var media = node.getAttribute('media') || '';
+      var support = node.getAttribute('data-fela-support');
       var css = node.textContent;
@@ -43,3 +45,7 @@
       if (type === _felaUtils.RULE_TYPE) {
-        renderer.cache = _extends({}, (0, _rehydrateCache2.default)(css, media), renderer.cache);
+        if (support) {
+          (0, _rehydrateSupportRules2.default)(css, media, renderer.cache);
+        } else {
+          (0, _rehydrateRules2.default)(css, media, '', renderer.cache);
+        }
       }
@@ -46,0 +52,0 @@ }

lib/dom/rehydration/rehydrateRules.js

@@ -11,8 +11,12 @@ 'use strict';
 
-var _camelCaseProperty = require('css-in-js-utils/lib/camelCaseProperty');
+var _felaUtils = require('fela-utils');
 
-var _camelCaseProperty2 = _interopRequireDefault(_camelCaseProperty);
+var _generateCacheEntry = require('./generateCacheEntry');
 
-var _felaUtils = require('fela-utils');
+var _generateCacheEntry2 = _interopRequireDefault(_generateCacheEntry);
 
+var _generateDeclarationReference = require('./generateDeclarationReference');
+
+var _generateDeclarationReference2 = _interopRequireDefault(_generateDeclarationReference);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,5 +26,6 @@
 
-function rehydrateRules(cache, css) {
-  var media = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var support = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+function rehydrateRules(css) {
+  var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var support = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var cache = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
@@ -38,4 +43,3 @@ var decl = void 0;
         className = _decl2[1],
-        _decl2$ = _decl2[2],
-        pseudo = _decl2$ === undefined ? '' : _decl2$,
+        pseudo = _decl2[2],
         property = _decl2[3],
@@ -45,12 +49,8 @@ value = _decl2[4];
 
-    var declarationReference = support + media + pseudo + (0, _camelCaseProperty2.default)(property) + value;
-    cache[declarationReference] = {
-      type: _felaUtils.RULE_TYPE,
-      className: className,
-      selector: (0, _felaUtils.generateCSSSelector)(className, pseudo),
-      declaration: property + ':' + value,
-      media: media,
-      support: support
-    };
+    var declarationReference = (0, _generateDeclarationReference2.default)(property, value, pseudo, media, support);
+
+    cache[declarationReference] = (0, _generateCacheEntry2.default)(_felaUtils.RULE_TYPE, className, property, value, pseudo, media, support);
   }
+
+  return cache;
 }

lib/dom/rehydration/rehydrateSupportRules.js

@@ -11,4 +11,6 @@ 'use strict';
 
-var _felaUtils = require('fela-utils');
+var _extractSupportQuery = require('./extractSupportQuery');
 
+var _extractSupportQuery2 = _interopRequireDefault(_extractSupportQuery);
+
 var _rehydrateRules = require('./rehydrateRules');
@@ -20,10 +22,8 @@
 
-var SUPPORT_REGEX = /@supports[^{]+\{([\s\S]+?})\s*}/g;
+var SUPPORT_REGEX = /@supports[^{]+\{([\s\S]+?})\s*}/gi;
 
 function rehydrateSupportRules(css) {
   var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var cache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-  var supportCache = {};
-  var ruleCss = css;
-
   var decl = void 0;
@@ -35,14 +35,9 @@
         ruleSet = _decl2[0],
-        rules = _decl2[1];
+        cssRules = _decl2[1];
 
-    var support = (0, _felaUtils.extractSupportQuery)(ruleSet);
-    ruleCss = ruleCss.replace(ruleSet, '');
-
-    (0, _rehydrateRules2.default)(supportCache, rules, media, support);
+    var supportQuery = (0, _extractSupportQuery2.default)(ruleSet);
+    (0, _rehydrateRules2.default)(cssRules, media, supportQuery, cache);
   }
 
-  return {
-    ruleCss: ruleCss,
-    supportCache: supportCache
-  };
+  return cache;
 }

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.renderToSheetList = exports.renderToMarkup = exports.rehydrate = exports.rehydrateCache = exports.render = undefined;
+exports.renderToSheetList = exports.renderToMarkup = exports.rehydrate = exports.render = undefined;
 
@@ -27,18 +27,5 @@ var _render = require('./dom/render');
 
-var didWarn = false;
-
-function rehydrateCache() {
-  if (!didWarn) {
-    didWarn = true;
-
-    console.warn('[fela-dom] `rehydrateCache` has been renamed to simply `rehydrate`.\n' + 'Import `rehydrate` directly as it will be removed in version 7.0.0.');
-  }
-
-  return _rehydrate2.default.apply(undefined, arguments);
-}
-
 exports.render = _render2.default;
-exports.rehydrateCache = rehydrateCache;
 exports.rehydrate = _rehydrate2.default;
 exports.renderToMarkup = _renderToMarkup2.default;
 exports.renderToSheetList = _renderToSheetList2.default;

lib/server/createStyleTagMarkup.js

@@ -10,6 +10,8 @@ 'use strict';
   var rehydrationIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : -1;
+  var support = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
   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 + '"' + mediaAttribute + '>' + css + '</style>';
+  return '<style type="text/css" data-fela-rehydration="' + rehydrationIndex + '" data-fela-type="' + type + '"' + supportAttribute + mediaAttribute + '>' + css + '</style>';
 }

lib/server/renderToMarkup.js

@@ -6,4 +6,11 @@ 'use strict';
 });
+
+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; };
+
 exports.default = renderToMarkup;
 
+var _reduce = require('lodash/reduce');
+
+var _reduce2 = _interopRequireDefault(_reduce);
+
 var _felaUtils = require('fela-utils');
@@ -21,14 +28,8 @@
 
-var sheetMap = {
-  fontFaces: _felaUtils.FONT_TYPE,
-  statics: _felaUtils.STATIC_TYPE,
-  keyframes: _felaUtils.KEYFRAME_TYPE,
-  rules: _felaUtils.RULE_TYPE
-};
 function renderToMarkup(renderer) {
-  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var rehydrationIndex = (0, _getRehydrationIndex2.default)(renderer);
 
-  var basicMarkup = (0, _felaUtils.objectReduce)(sheetMap, function (markup, type, key) {
+  var styleMarkup = (0, _reduce2.default)(_felaUtils.sheetMap, function (markup, type, key) {
     if (cacheCluster[key].length > 0) {
@@ -41,9 +42,27 @@ markup += (0, _createStyleTagMarkup2.default)(cacheCluster[key], type, '', rehydrationIndex);
 
-  return (0, _felaUtils.objectReduce)(cacheCluster.mediaRules, function (markup, css, media) {
-    if (css.length > 0) {
-      markup += (0, _createStyleTagMarkup2.default)(css, _felaUtils.RULE_TYPE, media, rehydrationIndex);
+  var support = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportRules);
+
+  if (support) {
+    styleMarkup += (0, _createStyleTagMarkup2.default)(support, _felaUtils.RULE_TYPE, '', rehydrationIndex, true);
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  return (0, _reduce2.default)(mediaKeys, function (markup, media) {
+    // basic media query rules
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
+      markup += (0, _createStyleTagMarkup2.default)(cacheCluster.mediaRules[media], _felaUtils.RULE_TYPE, media, rehydrationIndex);
     }
 
+    // support media rules
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        markup += (0, _createStyleTagMarkup2.default)(mediaSupport, _felaUtils.RULE_TYPE, media, rehydrationIndex, true);
+      }
+    }
+
     return markup;
-  }, basicMarkup);
+  }, styleMarkup);
 }

lib/server/renderToSheetList.js

@@ -6,4 +6,11 @@ 'use strict';
 });
+
+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; };
+
 exports.default = renderToSheetList;
 
+var _reduce = require('lodash/reduce');
+
+var _reduce2 = _interopRequireDefault(_reduce);
+
 var _felaUtils = require('fela-utils');
@@ -17,15 +24,8 @@
 
-var sheetMap = {
-  fontFaces: _felaUtils.FONT_TYPE,
-  statics: _felaUtils.STATIC_TYPE,
-  keyframes: _felaUtils.KEYFRAME_TYPE,
-  rules: _felaUtils.RULE_TYPE
-};
-
 function renderToSheetList(renderer) {
-  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder);
+  var cacheCluster = (0, _felaUtils.clusterCache)(renderer.cache, renderer.mediaQueryOrder, renderer.supportQueryOrder);
 
   var rehydrationIndex = (0, _getRehydrationIndex2.default)(renderer);
 
-  var sheetList = (0, _felaUtils.objectReduce)(sheetMap, function (list, type, key) {
+  var sheetList = (0, _reduce2.default)(_felaUtils.sheetMap, function (list, type, key) {
     if (cacheCluster[key].length > 0) {
@@ -42,6 +42,20 @@ list.push({
 
-  return (0, _felaUtils.objectReduce)(cacheCluster.mediaRules, function (list, css, media) {
-    if (css.length > 0) {
+  var support = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportRules);
+
+  if (support) {
+    sheetList.push({
+      css: support,
+      type: _felaUtils.RULE_TYPE,
+      rehydration: rehydrationIndex,
+      support: true
+    });
+  }
+
+  var mediaKeys = Object.keys(_extends({}, cacheCluster.supportMediaRules, cacheCluster.mediaRules));
+
+  return (0, _reduce2.default)(mediaKeys, function (list, media) {
+    // basic media query rules
+    if (cacheCluster.mediaRules[media] && cacheCluster.mediaRules[media].length > 0) {
       list.push({
-        css: css,
+        css: cacheCluster.mediaRules[media],
         type: _felaUtils.RULE_TYPE,
@@ -53,4 +67,19 @@ rehydration: rehydrationIndex,
 
+    // support media rules
+    if (cacheCluster.supportMediaRules[media]) {
+      var mediaSupport = (0, _felaUtils.cssifySupportRules)(cacheCluster.supportMediaRules[media]);
+
+      if (mediaSupport.length > 0) {
+        list.push({
+          css: mediaSupport,
+          type: _felaUtils.RULE_TYPE,
+          rehydration: rehydrationIndex,
+          support: true,
+          media: media
+        });
+      }
+    }
+
     return list;
   }, sheetList);
 }

package.json

 {
   "name": "fela-dom",
-  "version": "6.0.6",
+  "version": "7.0.0",
   "description": "Fela package for working with the DOM",
@@ -27,9 +27,10 @@ "main": "lib/index.js",
   "dependencies": {
-    "fela-tools": "^5.0.13",
-    "fela-utils": "^7.0.5"
+    "fela-utils": "^8.0.0",
+    "lodash": "^4.17.4"
   },
   "devDependencies": {
-    "fela": "^6.0.5",
-    "fela-preset-web": "^7.0.2"
+    "fela": "^6.1.0",
+    "fela-preset-web": "^8.0.0",
+    "fela-tools": "^5.0.14"
   }
 }

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

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

42862

increased by26.07%

Number of package files

41

increased by17.14%

Lines of code

835

increased by18.95%

Worsened metrics

Dev dependency count

3

increased by50%

Dependency changes

• + Addedlodash@^4.17.4

• + Addedlodash@4.17.21(transitive)

• - Removedfela-tools@^5.0.13

• - Removedcss-in-js-utils@2.0.0(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedfela@6.2.4(transitive)

• - Removedfela-tools@5.2.3(transitive)

• - Removedfela-utils@7.0.5(transitive)

• - Removedisobject@3.0.1(transitive)

• Updatedfela-utils@^8.0.0