@phun-ky/speccer 4.3.2 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.0.0](https://github.com/phun-ky/speccer/compare/v4.3.2...v5.0.0) (2022-02-22)
+
+
+### ⚠ BREAKING CHANGES
+
+* 🧨 Speccer is not supporting older browsers any more, to cut down on
+maintenance. Babel is now removed, but you can still polyfill or use
+babel for your own needs if you import the source files instead of the
+build files.
+
+### Tasks
+
+* 🤖 Remove babel, do not support older browsers anymore ([9ed11c0](https://github.com/phun-ky/speccer/commit/9ed11c06da3d1ac1b80d4cbbc6859146c596cd6f))
+
 ### [4.3.2](https://github.com/phun-ky/speccer/compare/v4.3.1...v4.3.2) (2022-02-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "4.3.2",
+  "version": "5.0.0",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -100,39 +100,29 @@
   },
   "homepage": "https://github.com/phun-ky/speccer#readme",
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-export-default-from": "^7.12.13",
-    "@babel/plugin-transform-runtime": "^7.12.17",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/register": "^7.12.13",
-    "@babel/runtime": "^7.12.18",
-    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.7.1",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
     "browser-sync": "^2.27.7",
     "cssnano": "^5.0.4",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-compat": "^3.13.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jest": "^24.4.2",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",
     "prettier-eslint": "^13.0.0",
-    "regenerator-runtime": "^0.13.7",
     "rollup": "^2.39.0",
     "rollup-plugin-terser": "^7.0.2",
-    "stylus": "^0.56.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "stylus": "^0.56.0"
   }
 }

package/speccer.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e)=>t.insertAdjacentElement("afterend",e),n=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))};function r(t,e,n,r,i,o,a){try{var c=t[o](a),s=c.value}catch(t){return void n(t)}c.done?e(s):Promise.resolve(s).then(r,i)}function i(t){return function(){var e=this,n=arguments;return new Promise((function(i,o){var a=t.apply(e,n);function c(t){r(a,i,o,c,s,"next",t)}function s(t){r(a,i,o,c,s,"throw",t)}c(void 0)}))}}var o=function(t){var e={exports:{}};return t(e,e.exports),e.exports}((function(t){var e=function(t){var e,n=Object.prototype,r=n.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},o=i.iterator||"@@iterator",a=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function s(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,n){return t[e]=n}}function l(t,e,n,r){var i=e&&e.prototype instanceof x?e:x,o=Object.create(i.prototype),a=new S(r||[]);return o._invoke=function(t,e,n){var r=h;return function(i,o){if(r===d)throw new Error("Generator is already running");if(r===u){if("throw"===i)throw o;return C()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var c=R(a,n);if(c){if(c===g)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===h)throw r=u,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=d;var s=p(t,e,n);if("normal"===s.type){if(r=n.done?u:f,s.arg===g)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(r=u,n.method="throw",n.arg=s.arg)}}}(t,n,a),o}function p(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=l;var h="suspendedStart",f="suspendedYield",d="executing",u="completed",g={};function x(){}function y(){}function m(){}var w={};s(w,o,(function(){return this}));var v=Object.getPrototypeOf,b=v&&v(v(A([])));b&&b!==n&&r.call(b,o)&&(w=b);var O=m.prototype=x.prototype=Object.create(w);function E(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function L(t,e){function n(i,o,a,c){var s=p(t[i],t,o);if("throw"!==s.type){var l=s.arg,h=l.value;return h&&"object"==typeof h&&r.call(h,"__await")?e.resolve(h.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(h).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(s.arg)}var i;this._invoke=function(t,r){function o(){return new e((function(e,i){n(t,r,e,i)}))}return i=i?i.then(o,o):o()}}function R(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=e,R(t,n),"throw"===n.method))return g;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return g}var i=p(r,t.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,g;var o=i.arg;return o?o.done?(n[t.resultName]=o.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,g):o:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,g)}function B(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(B,this),this.reset(!0)}function A(t){if(t){var n=t[o];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,a=function n(){for(;++i<t.length;)if(r.call(t,i))return n.value=t[i],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}return{next:C}}function C(){return{value:e,done:!0}}return y.prototype=m,s(O,"constructor",m),s(m,"constructor",y),y.displayName=s(m,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===y||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,m):(t.__proto__=m,s(t,c,"GeneratorFunction")),t.prototype=Object.create(O),t},t.awrap=function(t){return{__await:t}},E(L.prototype),s(L.prototype,a,(function(){return this})),t.AsyncIterator=L,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new L(l(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},E(O),s(O,c,"Generator"),s(O,o,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=A,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(T),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function i(r,i){return c.type="throw",c.arg=t,n.next=r,i&&(n.method="next",n.arg=e),!!i}for(var o=this.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],c=a.completion;if("root"===a.tryLoc)return i("end");if(a.tryLoc<=this.prev){var s=r.call(a,"catchLoc"),l=r.call(a,"finallyLoc");if(s&&l){if(this.prev<a.catchLoc)return i(a.catchLoc,!0);if(this.prev<a.finallyLoc)return i(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return i(a.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return i(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,g):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),g},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),T(n),g}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var i=r.arg;T(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:A(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),g}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}})),a=o;const c=function(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"noop";t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},s=t=>parseInt(t,10),l=t=>{const e=parseFloat(t);return e>=0&&e<1||e<=0&&e>-1?0:e},p=t=>{const{marginTop:e,marginBottom:n,marginLeft:r,marginRight:i,paddingTop:o,paddingBottom:a,paddingLeft:c,paddingRight:s}=t;return{marginTop:e,marginBottom:n,marginLeft:r,marginRight:i,paddingTop:o,paddingBottom:a,paddingLeft:c,paddingRight:s}},h=t=>{const{lineHeight:e,letterSpacing:n,fontFamily:r,fontSize:i,fontStyle:o,fontVariationSettings:a,fontWeight:c}=t;return{lineHeight:e,letterSpacing:n,fontFamily:r,fontSize:i,fontStyle:o,fontVariationSettings:a,fontWeight:c}},f=()=>new Promise(requestAnimationFrame),d=function(){var t=i(a.mark((function t(e,n){return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:if(!(!n||n&&0===n.length&&n.constructor===String||n&&0===n.length&&n.constructor===Array||n&&0===Object.keys(n).length&&n.constructor===Object)){t.next=4;break}return t.abrupt("return");case 4:return t.next=6,f();case 6:"string"==typeof n||Array.isArray(n)?n.forEach((t=>e.style[t.key]=t.value)):Object.keys(n).forEach((t=>e.style[t]=n[t]));case 7:case"end":return t.stop()}}),t)})));return function(e,n){return t.apply(this,arguments)}}(),u=function(){var t=i(a.mark((function t(e){return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,f();case 2:return t.abrupt("return",window.getComputedStyle?getComputedStyle(e,null):e.currentStyle);case 3:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),g=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],x=["TR","TH","TD","TBODY","THEAD","TFOOT"],y=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"span";const n=document.createElement(e),r=document.createTextNode(t);return n.appendChild(r),n.setAttribute("title",t+"px"),c(n,"ph speccer spacing"),n},m=function(){var t=i(a.mark((function t(n){var r,i,o,h,f,g,m,w,v,b;return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r={},t.next=3,u(n);case 3:if("none"!==(i=t.sent).display&&"hidden"!==i.visibility){t.next=6;break}return t.abrupt("return");case 6:n.classList.add("is-specced"),"static"===u(n.parentElement).position&&window.requestAnimationFrame((()=>{n.parentElement.style.position="relative"})),r.styles=p(i),r.rect=n.getBoundingClientRect(),"0px"!==r.styles.marginTop&&(o=y(s(r.styles.marginTop)),c(o,"margin top"),d(o,{height:r.styles.marginTop,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y-parseInt(r.styles.marginTop,10))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),o):e(n,o)),"0px"!==r.styles.marginRight&&(h=y(s(r.styles.marginRight)),c(h,"margin right"),d(h,{height:r.rect.height+"px",width:r.styles.marginRight,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x+parseInt(r.rect.width,10))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),h):e(n,h)),"0px"!==r.styles.marginBottom&&(f=y(s(r.styles.marginBottom)),c(f,"margin bottom"),d(f,{height:r.styles.marginBottom,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y+parseInt(r.rect.height,10))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),f):e(n,f)),"0px"!==r.styles.marginLeft&&(g=y(s(r.styles.marginLeft)),c(g,"margin left"),d(g,{height:r.rect.height+"px",width:r.styles.marginLeft,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x-parseInt(r.styles.marginLeft,10))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),g):e(n,g)),"0px"!==r.styles.paddingTop&&(m=y(s(r.styles.paddingTop)),c(m,"padding top"),d(m,{height:r.styles.paddingTop,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),m):e(n,m)),"0px"!==r.styles.paddingBottom&&(w=y(s(r.styles.paddingBottom)),c(w,"padding bottom"),d(w,{height:r.styles.paddingBottom,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y+(parseInt(r.rect.height,10)-parseInt(r.styles.paddingBottom,10)))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),w):e(n,w)),"0px"!==r.styles.paddingRight&&(v=y(s(r.styles.paddingRight)),c(v,"padding right"),d(v,{height:r.rect.height+"px",width:r.styles.paddingRight,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x+(parseInt(r.rect.width,10)-parseInt(r.styles.paddingRight,10)))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),v):e(n,v)),"0px"!==r.styles.paddingLeft&&(b=y(s(r.styles.paddingLeft)),c(b,"padding left"),d(b,{height:r.rect.height+"px",width:r.styles.paddingLeft,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),b):e(n,b));case 19:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();var w=Object.freeze({__proto__:null,create:y,element:m});const v=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"span";const r=document.createElement(n),i=document.createTextNode(t);return-1===e.indexOf("full")&&-1===e.indexOf("enclose")?r.appendChild(i):-1===e.indexOf("full")&&-1===e.indexOf("enclose")||r.setAttribute("data-dissection-counter",t),c(r,`ph speccer dissection ${e}`),r},b=(t,n)=>{const r=t.getBoundingClientRect(),i=t.getAttribute("data-anatomy"),o=v(g[n],i),a=x.indexOf(t.nodeName)>=0;let c=0,s=0;if(a){const n=t.closest("table"),r=u(n.parentElement);e(n,o);const i=n.getBoundingClientRect();c=i.top-parseInt(r.getPropertyValue("padding-top"),10),s=i.left-parseInt(r.getPropertyValue("padding-left"),10)}else e(t,o);const l=t.offsetLeft,p=t.offsetTop,h=o.getBoundingClientRect();let f=(a?r.left-s:l)-h.width-48+"px",y=(a?r.top-c:p)+r.height/2-h.height/2+"px",m=(a?r.left-s:l)+r.width+48+"px",w=(a?r.top-c:p)+r.height/2-h.height/2+"px",b=(a?r.left-s:l)+r.width/2-h.width/2+"px",O=(a?r.top-c:p)-h.height-48+"px",E=(a?r.left-s:l)+r.width/2-h.width/2+"px",L=(a?r.top-c:p)+r.height+48+"px",R={};R=-1!==i.indexOf("outline")?-1!==i.indexOf("left")?-1!==i.indexOf("full")?{left:l-8+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y}:-1!==i.indexOf("right")?-1!==i.indexOf("full")?{left:l+r.width+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l+-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:m,top:w}:-1!==i.indexOf("top")?-1!==i.indexOf("full")?{top:p+-8+"px",left:l+-1+"px",width:r.width+"px"}:-1!==i.indexOf("enclose")?{top:p+-1+"px",left:l+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:b,top:O}:-1!==i.indexOf("bottom")?-1!==i.indexOf("full")?{top:p+r.height+"px",left:l+-1+"px",width:r.width+"px"}:-1!==i.indexOf("enclose")?{top:p+-1+"px",left:l+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:E,top:L}:-1!==i.indexOf("full")?{left:l+r.width+"px",top:p+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l+r.width+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y}:-1!==i.indexOf("full")?{left:l-8+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y},d(o,R)};var O=Object.freeze({__proto__:null,create:v,element:b});const E=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"span";const r=document.createElement(n);return r.setAttribute("title",t+"px"),r.setAttribute("data-measure",parseInt(t,10)+"px"),c(r,`ph speccer measure ${e}`),r},L=t=>{if(!t)return;const n=t.getBoundingClientRect(),r=t.getAttribute("data-speccer-measure");if(""===r)return;const i=t.offsetTop,o=t.offsetLeft;if(-1!==r.indexOf("width"))if(-1!==r.indexOf("bottom")){const r=E(n.width,"width bottom");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r),d(r,{left:o+"px",top:i+n.height+1+"px",width:n.width+"px"})}else{const r=E(n.width,"width top");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r);const a=r.getBoundingClientRect();d(r,{left:o+"px",top:i-a.height+1+"px",width:n.width+"px"})}else if(-1!==r.indexOf("height"))if(-1!==r.indexOf("right")){const r=E(n.height,"height right");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r),d(r,{left:o+n.width+"px",top:i+"px",height:n.height+"px"})}else{const r=E(n.height,"height left");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r);const a=r.getBoundingClientRect();d(r,{left:o-a.width+"px",top:i+"px",height:n.height+"px"})}};var R=Object.freeze({__proto__:null,element:L});const B=t=>parseFloat(t).toFixed(3),T=(t,e)=>{const n=document.createElement("div");return n.innerHTML=t,c(n,`ph speccer typography ${e}`),n},S=function(){var t=i(a.mark((function t(n){var r,i,o,c,s,l,p,f,g,y,m,w,v,b,O,E,L,R,S,A,C;return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=n.getAttribute("data-speccer-typography"),t.next=3,u(n);case 3:if("none"!==(i=t.sent).display&&"hidden"!==i.visibility){t.next=6;break}return t.abrupt("return");case 6:n.classList.add("is-specced"),"static"===u(n.parentElement).position&&window.requestAnimationFrame((()=>{n.parentElement.style.position="relative"})),o=h(i),c=n.getBoundingClientRect(),s=`\n    font-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${o.fontFamily};</li>  <li><span class="property">font-size:</span> ${o.fontSize} / ${parseInt(o.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${o.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${o.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${o.lineHeight} / ${parseInt(o.lineHeight,10)/16}rem;</li>  <li><span class="property">letter-spacing:</span> ${o.letterSpacing};</li>  <li><span class="property">font-style:</span> ${o.fontStyle};</li></ul>}`,l=T(s,r),p=0,f=0,(g=x.indexOf(n.nodeName)>=0)?(y=n.parentElement,m=window.getComputedStyle(y.parentElement),e(y,l),p=y.getBoundingClientRect().top-parseInt(m.getPropertyValue("padding-top"),10),f=y.getBoundingClientRect().left-parseInt(m.getPropertyValue("padding-left"),10)):e(n,l),w=l.getBoundingClientRect(),v=(g?w.left-f:n.offsetLeft)-w.width-48+"px",b=B((g?w.top-p:n.offsetTop)-w.height/2+c.height/2)+"px",O=(g?w.left-f:n.offsetLeft)+c.width+48+"px",E=B((g?w.top-p:n.offsetTop)-w.height/2+c.height/2)+"px",L=B((g?w.left-f:n.offsetLeft)-w.width/2+c.width/2)+"px",R=(g?w.top-p:n.offsetTop)-w.height-48+"px",S=B((g?w.left-f:n.offsetLeft)-w.width/2+c.width/2)+"px",A=(g?w.top-p:n.offsetTop)+c.height+48+"px",C={left:v,top:b},-1!==r.indexOf("right")?C={left:O,top:E}:-1!==r.indexOf("top")?C={left:L,top:R}:-1!==r.indexOf("bottom")&&(C={left:S,top:A}),d(l,C);case 29:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();const A=t=>{const e=(n=()=>{t()},r=300,function(){var t=this,e=arguments,a=function(){o=null,i||n.apply(t,e)},c=i&&!o;clearTimeout(o),o=setTimeout(a,r),c&&n.apply(t,e)});var n,r,i,o;window.removeEventListener("resize",e),window.addEventListener("resize",e)},C=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()},_=()=>{n(".speccer"),n(".dissection");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)"),e=document.querySelectorAll("[data-speccer-measure]"),r=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section] [data-anatomy]");t.forEach(m),e.forEach(L),r.forEach(S),i.forEach(b)},N=w,j=O,I=R,k=Object.freeze({__proto__:null,create:T,element:S});(t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?C(t):e.hasAttribute("data-lazy")?(()=>{let t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(m(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)").forEach((e=>{t.observe(e)}));let e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(L(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));let n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(b),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():C(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}})(_),t.default=_,t.dissect=j,t.measure=I,t.spacing=N,t.typography=k,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e)=>t.insertAdjacentElement("afterend",e),n=(t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))},i=(t,e,n="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},o=t=>parseInt(t,10),p=t=>{const e=parseFloat(t);return e>=0&&e<1||e<=0&&e>-1?0:e},s=()=>new Promise(requestAnimationFrame),a=async(t,e)=>{t&&(!e||e&&0===e.length&&e.constructor===String||e&&0===e.length&&e.constructor===Array||e&&0===Object.keys(e).length&&e.constructor===Object||(await s(),"string"==typeof e||Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((n=>t.style[n]=e[n]))))},l=async t=>(await s(),window.getComputedStyle?getComputedStyle(t,null):t.currentStyle),r=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],d=["TR","TH","TD","TBODY","THEAD","TFOOT"],c=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t);return n.appendChild(o),n.setAttribute("title",t+"px"),i(n,"ph speccer spacing"),n},h=async t=>{const n={},s=await l(t);if("none"===s.display||"hidden"===s.visibility)return;t.classList.add("is-specced");if("static"===l(t.parentElement).position&&window.requestAnimationFrame((()=>{t.parentElement.style.position="relative"})),n.styles=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:l}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:l}})(s),n.rect=t.getBoundingClientRect(),"0px"!==n.styles.marginTop){const s=c(o(n.styles.marginTop));i(s,"margin top"),a(s,{height:n.styles.marginTop,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y-parseInt(n.styles.marginTop,10))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginRight){const s=c(o(n.styles.marginRight));i(s,"margin right"),a(s,{height:n.rect.height+"px",width:n.styles.marginRight,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x+parseInt(n.rect.width,10))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginBottom){const s=c(o(n.styles.marginBottom));i(s,"margin bottom"),a(s,{height:n.styles.marginBottom,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y+parseInt(n.rect.height,10))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.marginLeft){const s=c(o(n.styles.marginLeft));i(s,"margin left"),a(s,{height:n.rect.height+"px",width:n.styles.marginLeft,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x-parseInt(n.styles.marginLeft,10))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingTop){const s=c(o(n.styles.paddingTop));i(s,"padding top"),a(s,{height:n.styles.paddingTop,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingBottom){const s=c(o(n.styles.paddingBottom));i(s,"padding bottom"),a(s,{height:n.styles.paddingBottom,width:n.rect.width+"px",left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y+(parseInt(n.rect.height,10)-parseInt(n.styles.paddingBottom,10)))+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingRight){const s=c(o(n.styles.paddingRight));i(s,"padding right"),a(s,{height:n.rect.height+"px",width:n.styles.paddingRight,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x+(parseInt(n.rect.width,10)-parseInt(n.styles.paddingRight,10)))+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}if("0px"!==n.styles.paddingLeft){const s=c(o(n.styles.paddingLeft));i(s,"padding left"),a(s,{height:n.rect.height+"px",width:n.styles.paddingLeft,left:p(n.rect.x-t.parentElement.getBoundingClientRect().x)+"px",top:p(n.rect.y-t.parentElement.getBoundingClientRect().y)+"px"}),d.indexOf(t.nodeName)>=0?e(t.closest("table"),s):e(t,s)}};const g=(t="",e,n="span")=>{const o=document.createElement(n),p=document.createTextNode(t);return-1===e.indexOf("full")&&-1===e.indexOf("enclose")?o.appendChild(p):-1===e.indexOf("full")&&-1===e.indexOf("enclose")||o.setAttribute("data-dissection-counter",t),i(o,`ph speccer dissection ${e}`),o},f=(t,n)=>{const i=t.getBoundingClientRect(),o=t.getAttribute("data-anatomy"),p=g(r[n],o),s=d.indexOf(t.nodeName)>=0;let c=0,h=0;if(s){const n=t.closest("table"),i=l(n.parentElement);e(n,p);const o=n.getBoundingClientRect();c=o.top-parseInt(i.getPropertyValue("padding-top"),10),h=o.left-parseInt(i.getPropertyValue("padding-left"),10)}else e(t,p);const f=t.offsetLeft,x=t.offsetTop,m=p.getBoundingClientRect(),u=(s?i.left-h:f)-m.width-48+"px",y=(s?i.top-c:x)+i.height/2-m.height/2+"px",w=(s?i.left-h:f)+i.width+48+"px",O=(s?i.top-c:x)+i.height/2-m.height/2+"px",b=(s?i.left-h:f)+i.width/2-m.width/2+"px",E=(s?i.top-c:x)-m.height-48+"px",R=(s?i.left-h:f)+i.width/2-m.width/2+"px",B=(s?i.top-c:x)+i.height+48+"px";let C={};C=-1!==o.indexOf("outline")?-1!==o.indexOf("left")?-1!==o.indexOf("full")?{left:f-8+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==o.indexOf("right")?-1!==o.indexOf("full")?{left:f+i.width+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f+-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:O}:-1!==o.indexOf("top")?-1!==o.indexOf("full")?{top:x+-8+"px",left:f+-1+"px",width:i.width+"px"}:-1!==o.indexOf("enclose")?{top:x+-1+"px",left:f+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:b,top:E}:-1!==o.indexOf("bottom")?-1!==o.indexOf("full")?{top:x+i.height+"px",left:f+-1+"px",width:i.width+"px"}:-1!==o.indexOf("enclose")?{top:x+-1+"px",left:f+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:R,top:B}:-1!==o.indexOf("full")?{left:f+i.width+"px",top:x+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f+i.width+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==o.indexOf("full")?{left:f-8+"px",top:x+-1+"px",height:i.height+"px"}:-1!==o.indexOf("enclose")?{left:f-1+"px",top:x+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y},a(p,C)};const x=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",t+"px"),o.setAttribute("data-measure",parseInt(t,10)+"px"),i(o,`ph speccer measure ${e}`),o},m=t=>{if(!t)return;const n=t.getBoundingClientRect(),i=t.getAttribute("data-speccer-measure");if(""===i)return;const o=t.offsetTop,p=t.offsetLeft;if(-1!==i.indexOf("width"))if(-1!==i.indexOf("bottom")){const i=x(n.width,"width bottom");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i),a(i,{left:p+"px",top:o+n.height+1+"px",width:n.width+"px"})}else{const i=x(n.width,"width top");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i);const s=i.getBoundingClientRect();a(i,{left:p+"px",top:o-s.height+1+"px",width:n.width+"px"})}else if(-1!==i.indexOf("height"))if(-1!==i.indexOf("right")){const i=x(n.height,"height right");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i),a(i,{left:p+n.width+"px",top:o+"px",height:n.height+"px"})}else{const i=x(n.height,"height left");d.indexOf(t.nodeName)>=0?e(t.closest("table"),i):e(t,i);const s=i.getBoundingClientRect();a(i,{left:p-s.width+"px",top:o+"px",height:n.height+"px"})}};const u=t=>parseFloat(t).toFixed(3),y=(t,e)=>{const n=document.createElement("div");return n.innerHTML=t,i(n,`ph speccer typography ${e}`),n},w=async t=>{const n=t.getAttribute("data-speccer-typography"),i=await l(t);if("none"===i.display||"hidden"===i.visibility)return;t.classList.add("is-specced");"static"===l(t.parentElement).position&&window.requestAnimationFrame((()=>{t.parentElement.style.position="relative"}));const o=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}})(i),p=t.getBoundingClientRect(),s=`\n    font-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${o.fontFamily};</li>  <li><span class="property">font-size:</span> ${o.fontSize} / ${parseInt(o.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${o.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${o.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${o.lineHeight} / ${parseInt(o.lineHeight,10)/16}rem;</li>  <li><span class="property">letter-spacing:</span> ${o.letterSpacing};</li>  <li><span class="property">font-style:</span> ${o.fontStyle};</li></ul>}`,r=y(s,n);let c=0,h=0;const g=d.indexOf(t.nodeName)>=0;if(g){const n=t.parentElement,i=window.getComputedStyle(n.parentElement);e(n,r),c=n.getBoundingClientRect().top-parseInt(i.getPropertyValue("padding-top"),10),h=n.getBoundingClientRect().left-parseInt(i.getPropertyValue("padding-left"),10)}else e(t,r);const f=r.getBoundingClientRect(),x=(g?f.left-h:t.offsetLeft)-f.width-48+"px",m=u((g?f.top-c:t.offsetTop)-f.height/2+p.height/2)+"px",w=(g?f.left-h:t.offsetLeft)+p.width+48+"px",O=u((g?f.top-c:t.offsetTop)-f.height/2+p.height/2)+"px",b=u((g?f.left-h:t.offsetLeft)-f.width/2+p.width/2)+"px",E=(g?f.top-c:t.offsetTop)-f.height-48+"px",R=u((g?f.left-h:t.offsetLeft)-f.width/2+p.width/2)+"px",B=(g?f.top-c:t.offsetTop)+p.height+48+"px";let C={left:x,top:m};-1!==n.indexOf("right")?C={left:w,top:O}:-1!==n.indexOf("top")?C={left:b,top:E}:-1!==n.indexOf("bottom")&&(C={left:R,top:B}),a(r,C)};const O=t=>{const e=(n=()=>{t()},i=300,function(){var t=this,e=arguments,s=function(){p=null,o||n.apply(t,e)},a=o&&!p;clearTimeout(p),p=setTimeout(s,i),a&&n.apply(t,e)});var n,i,o,p;window.removeEventListener("resize",e),window.addEventListener("resize",e)},b=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()},E=()=>{n(".speccer"),n(".dissection");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)"),e=document.querySelectorAll("[data-speccer-measure]"),i=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section] [data-anatomy]");t.forEach(h),e.forEach(m),i.forEach(w),o.forEach(f)},R=Object.freeze({__proto__:null,create:c,element:h}),B=Object.freeze({__proto__:null,create:g,element:f}),C=Object.freeze({__proto__:null,element:m}),A=Object.freeze({__proto__:null,create:y,element:w});(t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?b(t):e.hasAttribute("data-lazy")?(()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(h(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(m(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(f),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():b(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||O(t))}})(E),t.default=E,t.dissect=B,t.measure=C,t.spacing=R,t.typography=A,Object.defineProperty(t,"__esModule",{value:!0})}));

package/src/browser.js

@@ -6,7 +6,7 @@ import * as spec from './spec';
 import * as measure from './measure';
 import * as dissect from './dissect';
 
-export const dom = speccer => {
+export const dom = (speccer) => {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', speccer);
   } else {
@@ -16,31 +16,36 @@ export const dom = speccer => {
 };
 
 export const lazy = () => {
-  let _spec_observer = new IntersectionObserver((els, observer) => {
-    els.forEach(el => {
+  const _spec_observer = new IntersectionObserver((els, observer) => {
+    els.forEach((el) => {
       if (el.intersectionRatio > 0) {
         spec.element(el.target);
         observer.unobserve(el.target);
       }
     });
   });
-  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach(el => {
+
+  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach((el) => {
     _spec_observer.observe(el);
   });
-  let _measure_observer = new IntersectionObserver((els, observer) => {
-    els.forEach(el => {
+
+  const _measure_observer = new IntersectionObserver((els, observer) => {
+    els.forEach((el) => {
       if (el.intersectionRatio > 0) {
         measure.element(el.target);
         observer.unobserve(el.target);
       }
     });
   });
-  document.querySelectorAll('[data-speccer-measure]').forEach(el => {
+
+  document.querySelectorAll('[data-speccer-measure]').forEach((el) => {
     _measure_observer.observe(el);
   });
-  let _dissect_observer = new IntersectionObserver((els, observer) => {
-    els.forEach(el => {
+
+  const _dissect_observer = new IntersectionObserver((els, observer) => {
+    els.forEach((el) => {
       const targets = el.target.querySelectorAll('[data-anatomy]');
+
       if (el.intersectionRatio > 0) {
         targets.forEach(dissect.element);
         observer.unobserve(el.target);
@@ -48,20 +53,21 @@ export const lazy = () => {
     });
   });
 
-  document.querySelectorAll('[data-anatomy-section]').forEach(el => {
+  document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
     _dissect_observer.observe(el);
   });
 };
 
-export const manual = speccer => {
+export const manual = (speccer) => {
   window.speccer = speccer;
 };
 
-export const activate = speccer => {
+export const activate = (speccer) => {
   const _script = document.currentScript;
 
   if (_script) {
     const _speccer_script_src = _script.getAttribute('src');
+
     if (
       _speccer_script_src.indexOf('speccer.js') !== -1 ||
       // for codepen

package/src/dissect.js

@@ -8,12 +8,15 @@ import { SPECCER_LITERALS, SPECCER_TAGS_TO_AVOID } from './lib/constants';
 export const create = (e = '', t, n = 'span') => {
   const _el = document.createElement(n);
   const o = document.createTextNode(e);
+
   if (t.indexOf('full') === -1 && t.indexOf('enclose') === -1) {
     _el.appendChild(o);
   } else if (t.indexOf('full') !== -1 || t.indexOf('enclose') !== -1) {
     _el.setAttribute('data-dissection-counter', e);
   }
+
   classnames.set(_el, `ph speccer dissection ${t}`);
+
   return _el;
 };
 
@@ -29,8 +32,11 @@ export const element = (el, dissectIndex) => {
   if (_is_table_correction_needed) {
     const table = el.closest('table');
     const tableStyle = styles.get(table.parentElement);
+
     node.after(table, _dissection_node);
+
     const _table_rect = table.getBoundingClientRect();
+
     _table_top = _table_rect.top - parseInt(tableStyle.getPropertyValue('padding-top'), 10);
     _table_left = _table_rect.left - parseInt(tableStyle.getPropertyValue('padding-left'), 10);
   } else {
@@ -39,44 +45,44 @@ export const element = (el, dissectIndex) => {
 
   const _el_offset_left = el.offsetLeft;
   const _el_offset_top = el.offsetTop;
-
   const _dissection_node_rect = _dissection_node.getBoundingClientRect();
-  let _outline_left_position_left =
+  const _outline_left_position_left =
     (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) -
     _dissection_node_rect.width -
     48 +
     'px';
-  let _outline_left_position_top =
+  const _outline_left_position_top =
     (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
     _el_rect.height / 2 -
     _dissection_node_rect.height / 2 +
     'px';
-  let _outline_right_position_left =
+  const _outline_right_position_left =
     (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) + _el_rect.width + 48 + 'px';
-  let _outline_right_position_top =
+  const _outline_right_position_top =
     (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
     _el_rect.height / 2 -
     _dissection_node_rect.height / 2 +
     'px';
-  let _outline_top_position_left =
+  const _outline_top_position_left =
     (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
     _el_rect.width / 2 -
     _dissection_node_rect.width / 2 +
     'px';
-  let _outline_top_position_top =
+  const _outline_top_position_top =
     (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) -
     _dissection_node_rect.height -
     48 +
     'px';
-  let _outline_bottom_position_left =
+  const _outline_bottom_position_left =
     (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
     _el_rect.width / 2 -
     _dissection_node_rect.width / 2 +
     'px';
-  let _outline_bottom_position_top =
+  const _outline_bottom_position_top =
     (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) + _el_rect.height + 48 + 'px';
 
   let _dissection_node_styles = {};
+
   if (_area.indexOf('outline') !== -1) {
     if (_area.indexOf('left') !== -1) {
       if (_area.indexOf('full') !== -1) {
@@ -200,5 +206,6 @@ export const element = (el, dissectIndex) => {
       };
     }
   }
+
   styles.add(_dissection_node, _dissection_node_styles);
 };

package/src/index.js

@@ -24,8 +24,11 @@ const speccer = () => {
 };
 
 export const spacing = __spacing;
+
 export const dissect = __dissect;
+
 export const measure = __measure;
+
 export const typography = __typography;
 
 export default speccer;

package/src/measure.js

@@ -9,6 +9,7 @@ import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
 
 const create = (text = '', area = '', tag = 'span') => {
   const _el = document.createElement(tag);
+
   _el.setAttribute('title', text + 'px');
   _el.setAttribute('data-measure', parseInt(text, 10) + 'px');
 
@@ -17,7 +18,7 @@ const create = (text = '', area = '', tag = 'span') => {
   return _el;
 };
 
-export const element = el => {
+export const element = (el) => {
   if (!el) return;
 
   const _el_rect = el.getBoundingClientRect();
@@ -33,11 +34,13 @@ export const element = el => {
   if (_area.indexOf('width') !== -1) {
     if (_area.indexOf('bottom') !== -1) {
       const _measure_node = create(_el_rect.width, 'width bottom');
+
       if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
         node.after(el.closest('table'), _measure_node);
       } else {
         node.after(el, _measure_node);
       }
+
       styles.add(_measure_node, {
         left: _el_offset_left + 'px',
         top: _el_offset_top + _el_rect.height + 1 + 'px',
@@ -45,12 +48,15 @@ export const element = el => {
       });
     } else {
       const _measure_node = create(_el_rect.width, 'width top');
+
       if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
         node.after(el.closest('table'), _measure_node);
       } else {
         node.after(el, _measure_node);
       }
+
       const _measure_node_rect = _measure_node.getBoundingClientRect();
+
       styles.add(_measure_node, {
         left: _el_offset_left + 'px',
         top: _el_offset_top - _measure_node_rect.height + 1 + 'px',
@@ -60,11 +66,13 @@ export const element = el => {
   } else if (_area.indexOf('height') !== -1) {
     if (_area.indexOf('right') !== -1) {
       const _measure_node = create(_el_rect.height, 'height right');
+
       if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
         node.after(el.closest('table'), _measure_node);
       } else {
         node.after(el, _measure_node);
       }
+
       styles.add(_measure_node, {
         left: _el_offset_left + _el_rect.width + 'px',
         top: _el_offset_top + 'px',
@@ -72,12 +80,15 @@ export const element = el => {
       });
     } else {
       const _measure_node = create(_el_rect.height, 'height left');
+
       if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
         node.after(el.closest('table'), _measure_node);
       } else {
         node.after(el, _measure_node);
       }
+
       const _measure_node_rect = _measure_node.getBoundingClientRect();
+
       styles.add(_measure_node, {
         left: _el_offset_left - _measure_node_rect.width + 'px',
         top: _el_offset_top + 'px',

package/src/spec.js

@@ -10,29 +10,38 @@ import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
 export const create = (text = '', tag = 'span') => {
   const _el = document.createElement(tag);
   const textContent = document.createTextNode(text);
+
   _el.appendChild(textContent);
   _el.setAttribute('title', text + 'px');
   classnames.set(_el, 'ph speccer spacing');
+
   return _el;
 };
 
-export const element = async el => {
+export const element = async (el) => {
   const _speccer_el = {};
   const _el_style = await styles.get(el);
+
   if (_el_style.display === 'none' || _el_style.visibility === 'hidden') {
     return;
   }
+
   el.classList.add('is-specced');
+
   const _parent_el_style = styles.get(el.parentElement);
+
   if (_parent_el_style.position === 'static') {
     window.requestAnimationFrame(() => {
       el.parentElement.style.position = 'relative';
     });
   }
+
   _speccer_el.styles = css.getSpacing(_el_style);
   _speccer_el.rect = el.getBoundingClientRect();
+
   if (_speccer_el.styles['marginTop'] !== '0px') {
     const _speccer_margin_top_el = create(css.getNumberValue(_speccer_el.styles.marginTop));
+
     classnames.set(_speccer_margin_top_el, 'margin top');
     styles.add(_speccer_margin_top_el, {
       height: _speccer_el.styles.marginTop,
@@ -43,14 +52,17 @@ export const element = async el => {
           _speccer_el.rect.y - el.parentElement.getBoundingClientRect().y - parseInt(_speccer_el.styles.marginTop, 10)
         ) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_margin_top_el);
     } else {
       node.after(el, _speccer_margin_top_el);
     }
   }
+
   if (_speccer_el.styles['marginRight'] !== '0px') {
     const _speccer_margin_right_el = create(css.getNumberValue(_speccer_el.styles.marginRight));
+
     classnames.set(_speccer_margin_right_el, 'margin right');
 
     styles.add(_speccer_margin_right_el, {
@@ -62,14 +74,17 @@ export const element = async el => {
         ) + 'px',
       top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_margin_right_el);
     } else {
       node.after(el, _speccer_margin_right_el);
     }
   }
+
   if (_speccer_el.styles['marginBottom'] !== '0px') {
     const _speccer_margin_bottom_el = create(css.getNumberValue(_speccer_el.styles.marginBottom));
+
     classnames.set(_speccer_margin_bottom_el, 'margin bottom');
 
     styles.add(_speccer_margin_bottom_el, {
@@ -81,14 +96,17 @@ export const element = async el => {
           _speccer_el.rect.y - el.parentElement.getBoundingClientRect().y + parseInt(_speccer_el.rect.height, 10)
         ) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_margin_bottom_el);
     } else {
       node.after(el, _speccer_margin_bottom_el);
     }
   }
+
   if (_speccer_el.styles['marginLeft'] !== '0px') {
     const _speccer_margin_left_el = create(css.getNumberValue(_speccer_el.styles.marginLeft));
+
     classnames.set(_speccer_margin_left_el, 'margin left');
 
     styles.add(_speccer_margin_left_el, {
@@ -100,14 +118,17 @@ export const element = async el => {
         ) + 'px',
       top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_margin_left_el);
     } else {
       node.after(el, _speccer_margin_left_el);
     }
   }
+
   if (_speccer_el.styles['paddingTop'] !== '0px') {
     const _speccer_padding_top_el = create(css.getNumberValue(_speccer_el.styles.paddingTop));
+
     classnames.set(_speccer_padding_top_el, 'padding top');
 
     styles.add(_speccer_padding_top_el, {
@@ -116,14 +137,17 @@ export const element = async el => {
       left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
       top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_padding_top_el);
     } else {
       node.after(el, _speccer_padding_top_el);
     }
   }
+
   if (_speccer_el.styles['paddingBottom'] !== '0px') {
     const _speccer_padding_bottom_el = create(css.getNumberValue(_speccer_el.styles.paddingBottom));
+
     classnames.set(_speccer_padding_bottom_el, 'padding bottom');
 
     styles.add(_speccer_padding_bottom_el, {
@@ -137,14 +161,17 @@ export const element = async el => {
             (parseInt(_speccer_el.rect.height, 10) - parseInt(_speccer_el.styles.paddingBottom, 10))
         ) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_padding_bottom_el);
     } else {
       node.after(el, _speccer_padding_bottom_el);
     }
   }
+
   if (_speccer_el.styles['paddingRight'] !== '0px') {
     const _speccer_padding_right_el = create(css.getNumberValue(_speccer_el.styles.paddingRight));
+
     classnames.set(_speccer_padding_right_el, 'padding right');
 
     styles.add(_speccer_padding_right_el, {
@@ -158,14 +185,17 @@ export const element = async el => {
         ) + 'px',
       top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_padding_right_el);
     } else {
       node.after(el, _speccer_padding_right_el);
     }
   }
+
   if (_speccer_el.styles['paddingLeft'] !== '0px') {
     const _speccer_padding_left_el = create(css.getNumberValue(_speccer_el.styles.paddingLeft));
+
     classnames.set(_speccer_padding_left_el, 'padding left');
 
     styles.add(_speccer_padding_left_el, {
@@ -174,6 +204,7 @@ export const element = async el => {
       left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
       top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
     });
+
     if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
       node.after(el.closest('table'), _speccer_padding_left_el);
     } else {

package/src/typography.js

@@ -10,13 +10,15 @@ import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
 
 export const create = (html, area) => {
   const _el = document.createElement('div');
+
   _el.innerHTML = html;
 
   classnames.set(_el, `ph speccer typography ${area}`);
+
   return _el;
 };
 
-export const element = async el => {
+export const element = async (el) => {
   const _area = el.getAttribute('data-speccer-typography');
   const _el_style = await styles.get(el);
 
@@ -25,6 +27,7 @@ export const element = async el => {
   }
 
   el.classList.add('is-specced');
+
   const _parent_style = styles.get(el.parentElement);
 
   if (_parent_style.position === 'static') {
@@ -35,7 +38,6 @@ export const element = async el => {
 
   const _styles = css.getTypography(_el_style);
   const _el_rect = el.getBoundingClientRect();
-
   const html =
     `
     ` +
@@ -58,10 +60,13 @@ export const element = async el => {
 
   let tableCorrectionTop = 0;
   let tableCorrectionLeft = 0;
+
   const tableCorrection = SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0;
+
   if (tableCorrection) {
     const table = el.parentElement;
     const tableStyle = window.getComputedStyle(table.parentElement);
+
     node.after(table, speccerNode);
     tableCorrectionTop = table.getBoundingClientRect().top - parseInt(tableStyle.getPropertyValue('padding-top'), 10);
     tableCorrectionLeft =
@@ -71,52 +76,50 @@ export const element = async el => {
   }
 
   const rectOfSpeccerNode = speccerNode.getBoundingClientRect();
-
-  let outlineLeftLeft =
+  const outlineLeftLeft =
     (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
     rectOfSpeccerNode.width -
     48 +
     'px';
-
-  let outlineLeftTop =
+  const outlineLeftTop =
     number.to3Decimals(
       (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
         rectOfSpeccerNode.height / 2 +
         _el_rect.height / 2
     ) + 'px';
-  let outlineRightLeft =
+  const outlineRightLeft =
     (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) + _el_rect.width + 48 + 'px';
-
-  let outlineRightTop =
+  const outlineRightTop =
     number.to3Decimals(
       (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
         rectOfSpeccerNode.height / 2 +
         _el_rect.height / 2
     ) + 'px';
-  let outlineTopLeft =
+  const outlineTopLeft =
     number.to3Decimals(
       (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
         rectOfSpeccerNode.width / 2 +
         _el_rect.width / 2
     ) + 'px';
-  let outlineTopTop =
+  const outlineTopTop =
     (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
     rectOfSpeccerNode.height -
     48 +
     'px';
-  let outlineBottomleft =
+  const outlineBottomleft =
     number.to3Decimals(
       (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
         rectOfSpeccerNode.width / 2 +
         _el_rect.width / 2
     ) + 'px';
-  let outlineBottomTop =
+  const outlineBottomTop =
     (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) + _el_rect.height + 48 + 'px';
 
   let position = {
     left: outlineLeftLeft,
     top: outlineLeftTop
   };
+
   if (_area.indexOf('right') !== -1) {
     position = {
       left: outlineRightLeft,