css-var-shim - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.cssVarShim=e()}(this,function(){"use strict";function t(t,e){return(e=e||document).querySelectorAll(t)}function e(t){return u(t).reduce(function(t,n){return t.concat(n.cssRules?e(n.cssRules):n)},[])}function n(t,e,n){n=n||[];for(var r;null!==(r=e.exec(t));)n.push(r),e.lastIndex=r.index+r[0].length;return n}function r(t){return function(e){t.apply(this,e)}}function o(t,e){return e.reduce(function(t,e){return t?t[e]:void 0},t)}function c(t){return t=t||{},function(e){return t[e]=isNaN(t[e])?0:t[e]+1,t[e]}}function u(t){return[].slice.call(t)}function s(t){"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t)}return function(i){function a(t,e){var r=n(t,/--[^\s,)]+/g);return r.length&&r.forEach(function(n){var r=n[0],c=o(e,[r]);if(c){var u=new RegExp("var\\("+r+"(,[^)]+)?\\)");t=t.replace(u,c),t=a(t,e)}}),t}function f(e,n,r,o){var c=[document.documentElement];o&&":root"===o||(c=t(o)),u(c).forEach(function(t){t.style.setProperty(e,n,r||null,t)})}if(!(window.CSS&&CSS.supports&&CSS.supports("--a",0))){window.cssVarCache={};var l=CSSStyleDeclaration.prototype.setProperty;CSSStyleDeclaration.prototype.setProperty=function(n,s,f,d){if(/^--/.test(n)){window.cssVarCache[n]=s;var p=c();e(document.styleSheets).forEach(function(e){var c=e.selectorText,s=o(i.getVars,[n,c,p(c)]);s&&s.forEach(r(function(n,r,o){var s=a(r,window.cssVarCache);d?u(t(c)).forEach(function(t){d.contains(t)&&t.style.setProperty(n,s,o||null)}):e.style.setProperty(n,s,o||null)}))})}else l.call(this,n,s,f)},i.setVars.forEach(r(f)),s(function(){u(t('[data-style*="--"]')).forEach(function(t){var e=n(t.getAttribute("data-style"),/(--[^:]+)\s*:\s*([^;]+)/g);e.length&&e.forEach(r(function(e,n,r){t.style.setProperty(n,r,null,t)}))})})}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.cssVarShim=e()}(this,function(){"use strict";function t(t,e){return(e=e||document).querySelectorAll(t)}function e(t){return c(t).reduce(function(t,n){return t.concat(n.cssRules?e(n.cssRules):n)},[])}function n(t,e,n){n=n||[];for(var r;null!==(r=e.exec(t));)n.push(r),e.lastIndex=r.index+r[0].length;return n}function r(t){return function(e){t.apply(this,e)}}function o(t,e){return e.reduce(function(t,e){return t?t[e]:void 0},t)}function u(t){return t=t||{},function(e){return t[e]=isNaN(t[e])?0:t[e]+1,t[e]}}function c(t){return[].slice.call(t)}function i(t){"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t)}function a(){var t={};return function(e,n){return e?n?(t[e]=n,n):t[e]:t}}function f(t){return function(){return c(arguments).reduce(function(e,n){return n?"object"==typeof n?e+l(n,t):e+n:e},"")}}function l(t,e){if(t[e])return t[e];var n=++s;return t[e]=n,n}var s=0;return function(l){function s(t,e){var r=n(t,/--[^\s,)]+/g);return r.length&&r.forEach(function(n){var r=n[0],o=p(r,e);if(o){var u=new RegExp("var\\("+r+"(,[^)]+)?\\)");t=t.replace(u,o),t=s(t,e)}}),t}function p(t,e){for(var n=S(y(t,e));!n&&e&&e.parentElement;)e=e.parentElement,n=S(y(t,e));return n}function d(e,n,r,o){var u=[document.documentElement];o&&":root"===o||(u=t(o)),c(u).forEach(function(t){var o=t!==document.documentElement?t:null;t.style.setProperty(e,n,r||null,o)})}if(!(window.CSS&&CSS.supports&&CSS.supports("--a",0))){var y=f("wl__uuid"),S=a(),v=CSSStyleDeclaration.prototype.getPropertyValue;CSSStyleDeclaration.prototype.getPropertyValue=function(t,e){return/^--/.test(t)?p(t,e):v.call(this,t)};var h=CSSStyleDeclaration.prototype.setProperty;CSSStyleDeclaration.prototype.setProperty=function(n,i,a,f){if(/^--/.test(n)){S(y(n,f),i);var p=u();e(document.styleSheets).forEach(function(e){var u=e.selectorText,i=o(l.getVars,[n,u,p(u)]);i&&i.forEach(r(function(n,r,o){var i=s(r,f);f?c(t(u)).forEach(function(t){f.contains(t)&&t.style.setProperty(n,i,o||null)}):e.style.setProperty(n,i,o||null)}))})}else h.call(this,n,i,a)},l.setVars.forEach(r(d)),i(function(){c(t('[data-style*="--"]')).forEach(function(t){var e=n(t.getAttribute("data-style"),/(--[^:]+)\s*:\s*([^;]+)/g);e.length&&e.forEach(r(function(e,n,r){t.style.setProperty(n,r,null,t)}))})})}}});

package.json

 {
   "name": "css-var-shim",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A shim to provide basic functionality to IE/Edge for changing custom CSS properties at runtime.",
@@ -20,4 +20,5 @@ "main": "index.js",
     "rollup": "^0.45.2",
-    "rollup-plugin-uglify": "^2.0.1"
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1"
   }
 }

README.md

 # CSS Var Shim
 
-A shim to provide basic functionality to IE/Edge for changing custom properties at runtime.
+A shim to provide basic functionality to IE/Edge for changing custom CSS properties (CSS vars) at runtime.
 
-Requires a JS lookup map with used css variables in your stylesheet.  
-https://github.com/luwes/postcss-var-map
+This requires a JS lookup map, more info can be found here: 
+https://github.com/luwes/postcss-var-shim

src/index.js

@@ -1,2 +0,2 @@
-import { qsa, getCssRules, getMatches, niceArguments, objectResolve, makeCount, arrayFrom, ready } from './utils';
+import { qsa, getCssRules, getMatches, niceArguments, objectResolve, makeCount, arrayFrom, ready, makeCache, makeKey } from './utils';
 
@@ -9,3 +9,4 @@ function cssVarShim(cssVarMap) {
 
-  window.cssVarCache = {};
+  var key = makeKey('wl__uuid');
+  var cache = makeCache();
 
@@ -35,6 +36,15 @@ function init() {
 
+  var originalGetPropertyValue = CSSStyleDeclaration.prototype.getPropertyValue;
+  CSSStyleDeclaration.prototype.getPropertyValue = function (prop, element) {
+    if (/^--/.test(prop)) {
+      return getVarValue(prop, element);
+    }
+    return originalGetPropertyValue.call(this, prop);
+  };
+
   var originalSetProperty = CSSStyleDeclaration.prototype.setProperty;
   CSSStyleDeclaration.prototype.setProperty = function (prop, value, priority, element) {
     if (/^--/.test(prop)) {
-      window.cssVarCache[prop] = value;
+      cache(key(prop, element), value);
+
       var count = makeCount();
@@ -47,3 +57,3 @@ var cssRules = getCssRules(document.styleSheets);
           varDecls.forEach(niceArguments(function (mapProp, mapValue, mapPriority) {
-            var replacedValue = replaceVarsInValue(mapValue, window.cssVarCache);
+            var replacedValue = replaceVarsInValue(mapValue, element);
             if (element) {
@@ -68,3 +78,3 @@ arrayFrom(qsa(selector)).forEach(function (node) {
 
-  function replaceVarsInValue(value, map) {
+  function replaceVarsInValue(value, element) {
     var matchGetVar = /--[^\s,)]+/g;
@@ -75,7 +85,7 @@ var getVarMatches = getMatches(value, matchGetVar);
         var getVar = getVarMatch[0];
-        var getVarValue = objectResolve(map, [getVar]);
-        if (getVarValue) {
+        var varValue = getVarValue(getVar, element);
+        if (varValue) {
           var varRegex = new RegExp('var\\(' + getVar + '(,[^)]+)?\\)');
-          value = value.replace(varRegex, getVarValue);
-          value = replaceVarsInValue(value, map);
+          value = value.replace(varRegex, varValue);
+          value = replaceVarsInValue(value, element);
         }
@@ -87,2 +97,12 @@ });
 
+  function getVarValue(prop, element) {
+    var propValue = cache(key(prop, element));
+    // Go up the tree until a prop value is found
+    while (!propValue && element && element.parentElement) {
+      element = element.parentElement;
+      propValue = cache(key(prop, element));
+    }
+    return propValue;
+  }
+
   function setVar(prop, value, important, selector) {
@@ -94,3 +114,4 @@ var elements = [ document.documentElement ];
     arrayFrom(elements).forEach(function (element) {
-      element.style.setProperty(prop, value, important || null, element);
+      var target = element !== document.documentElement ? element : null;
+      element.style.setProperty(prop, value, important || null, target);
     });
@@ -97,0 +118,0 @@ }

src/utils.js

@@ -37,3 +37,3 @@
   countMap = countMap || {};
-  return function (key) {
+  return function count(key) {
     countMap[key] = isNaN(countMap[key]) ? 0 : countMap[key] + 1;
@@ -55,1 +55,40 @@ return countMap[key];
 }
+
+export function makeCache() {
+  var cacheMap = {};
+  return function cache(key, value) {
+    if (!key) {
+      return cacheMap;
+    }
+    if (!value) {
+      return cacheMap[key];
+    }
+    cacheMap[key] = value;
+    return value;
+  };
+}
+
+export function makeKey(expando) {
+  return function key() {
+    return arrayFrom(arguments).reduce(function(prev, curr) {
+      if (!curr) {
+        return prev;
+      }
+      if (typeof curr === 'object') {
+        return prev + uniqueId(curr, expando);
+      }
+      return prev + curr;
+    }, '');
+  };
+}
+
+var idCounter = 0;
+
+export function uniqueId(object, expando) {
+  if (object[expando]) {
+    return object[expando];
+  }
+  var id = ++idCounter;
+  object[expando] = id;
+  return id;
+}

No alert changes

Improved metrics

Total package byte prevSize

91303

increased by42.56%

Number of package files

12

increased by9.09%

Lines of code

233

increased by30.9%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes