@phun-ky/speccer 5.0.0 → 6.0.0

package/src/dissect.js

@@ -1,211 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-import * as styles from './lib/styles';
-import * as node from './lib/node';
-import * as classnames from './lib/classnames';
-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;
-};
-
-export const element = (el, dissectIndex) => {
-  const _el_rect = el.getBoundingClientRect();
-  const _area = el.getAttribute('data-anatomy');
-  const _dissection_node = create(SPECCER_LITERALS[dissectIndex], _area);
-  const _is_table_correction_needed = SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0;
-
-  let _table_top = 0;
-  let _table_left = 0;
-
-  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 {
-    node.after(el, _dissection_node);
-  }
-
-  const _el_offset_left = el.offsetLeft;
-  const _el_offset_top = el.offsetTop;
-  const _dissection_node_rect = _dissection_node.getBoundingClientRect();
-  const _outline_left_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) -
-    _dissection_node_rect.width -
-    48 +
-    'px';
-  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';
-  const _outline_right_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) + _el_rect.width + 48 + 'px';
-  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';
-  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';
-  const _outline_top_position_top =
-    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) -
-    _dissection_node_rect.height -
-    48 +
-    'px';
-  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';
-  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) {
-        _dissection_node_styles = {
-          left: _el_offset_left - 8 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left - 1 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_left_position_left,
-          top: _outline_left_position_top
-        };
-      }
-    } else if (_area.indexOf('right') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + -1 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_right_position_left,
-          top: _outline_right_position_top
-        };
-      }
-    } else if (_area.indexOf('top') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -8 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -1 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_top_position_left,
-          top: _outline_top_position_top
-        };
-      }
-    } else if (_area.indexOf('bottom') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + _el_rect.height + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -1 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_bottom_position_left,
-          top: _outline_bottom_position_top
-        };
-      }
-    } else {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_left_position_left,
-          top: _outline_left_position_top
-        };
-      }
-    }
-  } else {
-    if (_area.indexOf('full') !== -1) {
-      _dissection_node_styles = {
-        left: _el_offset_left - 8 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px'
-      };
-    } else if (_area.indexOf('enclose') !== -1) {
-      _dissection_node_styles = {
-        left: _el_offset_left - 1 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px',
-        width: _el_rect.width + 'px'
-      };
-    } else {
-      _dissection_node_styles = {
-        left: _outline_left_position_left,
-        top: _outline_left_position_top
-      };
-    }
-  }
-
-  styles.add(_dissection_node, _dissection_node_styles);
-};

package/src/lib/attributes.js

@@ -1,13 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const set = (el, attrs) => {
-  if (!el) return;
-  if (!attrs || (attrs && attrs.length === 0)) return;
-  Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
-};
-export const remove = (el, attrs) => {
-  if (!el) return;
-  if (!attrs || (attrs && attrs.length === 0)) return;
-  Object.keys(attrs).forEach(key => el.removeAttribute(key));
-};

package/src/lib/classnames.js

@@ -1,37 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const set = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.add(cl));
-};
-
-export const toggle = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.toggle(cl));
-};
-
-export const remove = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.remove(cl));
-};
-
-export const cx = (cls, cls_obj) =>
-  `${cls} ${Object.keys(cls_obj)
-    .filter(classname => cls_obj[classname])
-    .join(' ')}`.trim();

package/src/lib/css.js

@@ -1,37 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const getNumberValue = value => parseInt(value, 10);
-
-export const normalizeNumberValue = value => {
-  const _value = parseFloat(value);
-  return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1) ? 0 : _value;
-};
-
-export const getSpacing = style => {
-  const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =
-    style;
-  return {
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-};
-
-export const getTypography = style => {
-  const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;
-  return {
-    lineHeight,
-    letterSpacing,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontVariationSettings,
-    fontWeight
-  };
-};

package/src/lib/debounce.js

@@ -1,22 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const waitForFrame = () => new Promise(requestAnimationFrame);
-
-const debounce = function (func, wait, immediate) {
-  var timeout;
-  return function () {
-    var context = this,
-      args = arguments;
-    var later = function () {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    var callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-};
-
-export default debounce;

package/src/lib/node.js

@@ -1,7 +0,0 @@
-export const after = (el, newSibling) => el.insertAdjacentElement('afterend', newSibling);
-
-export const removeAll = (selector, el = document) => {
-  [].forEach.call(el.querySelectorAll(selector), function (e) {
-    e.remove();
-  });
-};

package/src/lib/number.js

@@ -1,4 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const to3Decimals = number => parseFloat(number).toFixed(3);

package/src/lib/styles.js

@@ -1,27 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-import { waitForFrame } from './debounce';
-
-export const add = async (el, styles) => {
-  if (!el) return;
-  if (
-    !styles ||
-    (styles && styles.length === 0 && styles.constructor === String) ||
-    (styles && styles.length === 0 && styles.constructor === Array) ||
-    (styles && Object.keys(styles).length === 0 && styles.constructor === Object)
-  ) {
-    return;
-  }
-
-  await waitForFrame();
-  if (typeof styles === 'string' || Array.isArray(styles)) {
-    styles.forEach(style => (el.style[style.key] = style.value));
-  } else {
-    Object.keys(styles).forEach(key => (el.style[key] = styles[key]));
-  }
-};
-
-export const get = async el => {
-  await waitForFrame();
-  return window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle;
-};

package/src/measure.js

@@ -1,99 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as classnames from './lib/classnames';
-import * as styles from './lib/styles';
-import * as node from './lib/node';
-
-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');
-
-  classnames.set(_el, `ph speccer measure ${area}`);
-
-  return _el;
-};
-
-export const element = (el) => {
-  if (!el) return;
-
-  const _el_rect = el.getBoundingClientRect();
-  const _area = el.getAttribute('data-speccer-measure');
-
-  if (_area === '') {
-    return;
-  }
-
-  const _el_offset_top = el.offsetTop;
-  const _el_offset_left = el.offsetLeft;
-
-  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',
-        width: _el_rect.width + 'px'
-      });
-    } 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',
-        width: _el_rect.width + 'px'
-      });
-    }
-  } 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',
-        height: _el_rect.height + 'px'
-      });
-    } 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',
-        height: _el_rect.height + 'px'
-      });
-    }
-  }
-};

package/src/spec.js

@@ -1,214 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as classnames from './lib/classnames';
-import * as css from './lib/css';
-import * as node from './lib/node';
-import * as styles from './lib/styles';
-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) => {
-  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,
-      width: _speccer_el.rect.width + 'px',
-      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
-      top:
-        css.normalizeNumberValue(
-          _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, {
-      height: _speccer_el.rect.height + 'px',
-      width: _speccer_el.styles.marginRight,
-      left:
-        css.normalizeNumberValue(
-          _speccer_el.rect.x - el.parentElement.getBoundingClientRect().x + parseInt(_speccer_el.rect.width, 10)
-        ) + '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, {
-      height: _speccer_el.styles.marginBottom,
-      width: _speccer_el.rect.width + 'px',
-      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
-      top:
-        css.normalizeNumberValue(
-          _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, {
-      height: _speccer_el.rect.height + 'px',
-      width: _speccer_el.styles.marginLeft,
-      left:
-        css.normalizeNumberValue(
-          _speccer_el.rect.x - el.parentElement.getBoundingClientRect().x - parseInt(_speccer_el.styles.marginLeft, 10)
-        ) + '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, {
-      height: _speccer_el.styles.paddingTop,
-      width: _speccer_el.rect.width + 'px',
-      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, {
-      height: _speccer_el.styles.paddingBottom,
-      width: _speccer_el.rect.width + 'px',
-      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
-      top:
-        css.normalizeNumberValue(
-          _speccer_el.rect.y -
-            el.parentElement.getBoundingClientRect().y +
-            (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, {
-      height: _speccer_el.rect.height + 'px',
-      width: _speccer_el.styles.paddingRight,
-      left:
-        css.normalizeNumberValue(
-          _speccer_el.rect.x -
-            el.parentElement.getBoundingClientRect().x +
-            (parseInt(_speccer_el.rect.width, 10) - parseInt(_speccer_el.styles.paddingRight, 10))
-        ) + '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, {
-      height: _speccer_el.rect.height + 'px',
-      width: _speccer_el.styles.paddingLeft,
-      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 {
-      node.after(el, _speccer_padding_left_el);
-    }
-  }
-};