@phun-ky/speccer 6.0.0 → 6.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -19,6 +19,12 @@
     "commit": "npx git-cz",
     "release": "npx standard-version"
   },
+  "files": [
+    "/speccer.js",
+    "/speccer.js.map",
+    "/speccer.min.css",
+    "/speccer.css"
+  ],
   "standard-version": {
     "scripts": {
       "prerelease": "npm run build",

package/CHANGELOG.md

@@ -1,78 +0,0 @@
-# Changelog
-
-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.
-
-## [6.0.0](https://github.com/phun-ky/speccer/compare/v5.0.0...v6.0.0) (2022-02-23)
-
-
-### ⚠ BREAKING CHANGES
-
-* 🧨 The script is now converted to TypeScript. The internal API has changed,
-but now the usage. I've set this as a breaking change to reflect the
-size of the change. There has also been some internal optimizations
-regarding positioning of the speccer elements
-
-### Refactoring
-
-* 💡 Converted to TypeScript ([ab90bae](https://github.com/phun-ky/speccer/commit/ab90bae5794235ffd13d250500caca98b0a818b5))
-
-
-### Feature
-
-* 🎸 Add source map ([de3812d](https://github.com/phun-ky/speccer/commit/de3812dc4a28d274aabfb16cf088f78cf07b2b7e))
-
-## [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)
-
-
-### Bug
-
-* And supply the minified version.. ([8cfb69a](https://github.com/phun-ky/speccer/commit/8cfb69a5dc86f1e9c9ccea3f890781a3961a0a7f))
-
-### [4.3.1](https://github.com/phun-ky/speccer/compare/v4.3.0...v4.3.1) (2022-02-22)
-
-
-### Bug
-
-* Use named exports ([7a4535e](https://github.com/phun-ky/speccer/commit/7a4535e65c04b33365258323376d6710fcb813c3))
-
-## [4.3.0](https://github.com/phun-ky/speccer/compare/v4.2.1...v4.3.0) (2022-02-22)
-
-
-### Feature
-
-* 🎸 Expose API a bit more ([093b465](https://github.com/phun-ky/speccer/commit/093b465653c32ec77fec6bb1d9d9e3adfd59809f))
-
-
-### Documentation
-
-* ✏️ Move images into assets ([2291b31](https://github.com/phun-ky/speccer/commit/2291b31d768a16f202f2ffed453cfc22f3027e67))
-* ✏️ Update documentation ([ec0807e](https://github.com/phun-ky/speccer/commit/ec0807e8c5d9c7eeaa807b80d7c432bee24d59d4))
-
-### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
-
-## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)
-
-
-### Features
-
-* Use CSS variables ([21c3eb3](https://github.com/phun-ky/speccer/commit/21c3eb3f173ee96b0bf452bae44f76155fcf3cdf))
-
-## [4.1.0](https://github.com/phun-ky/speccer/compare/v4.0.0...v4.1.0) (2022-02-22)
-
-### Features
-
-- Add release script ([4cb72cb](https://github.com/phun-ky/speccer/commit/4cb72cbea7dd1d6bcb8f1102384b14eecaa9eef0))

package/dts/browser.d.ts

@@ -1,4 +0,0 @@
-export declare const dom: (speccer: Function) => void;
-export declare const lazy: () => void;
-export declare const manual: (speccer: Function) => void;
-export declare const activate: (speccer: Function) => void;

package/dts/enums/area.d.ts

@@ -1,16 +0,0 @@
-export declare enum SpeccerAreaEnum {
-    Empty = "",
-    Left = "left",
-    Right = "right",
-    Bottom = "bottom",
-    Top = "top"
-}
-export declare enum DissectAreaEnum {
-    Outline = "outline",
-    Enclose = "enclose",
-    Full = "full",
-    Left = "left",
-    Right = "right",
-    Bottom = "bottom",
-    Top = "top"
-}

package/dts/helpers/dissect/index.d.ts

@@ -1 +0,0 @@
-export { styles } from './styles';

package/dts/helpers/dissect/styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: (area: string, el: HTMLElement, dissectionEl: HTMLElement) => {};

package/dts/helpers/typography/index.d.ts

@@ -1,2 +0,0 @@
-export { position } from './position';
-export { template } from './template';

package/dts/helpers/typography/position.d.ts

@@ -1,4 +0,0 @@
-export declare const position: (area: string | null, el: HTMLElement, speccerEl: HTMLElement) => {
-    left: string;
-    top: string;
-};

package/dts/helpers/typography/template.d.ts

@@ -1 +0,0 @@
-export declare const template: (el: HTMLElement) => Promise<string>;

package/dts/index.d.ts

@@ -1,53 +0,0 @@
-declare global {
-    interface Window {
-        speccer: any;
-    }
-}
-
-declare const create$2: (text?: string | number, tag?: string) => HTMLElement;
-declare const element$3: (el: HTMLElement) => Promise<void>;
-
-declare namespace __spacing {
-  export {
-    create$2 as create,
-    element$3 as element,
-  };
-}
-
-declare const create$1: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-declare const element$2: (el: HTMLElement, dissectIndex: number) => Promise<void>;
-
-declare namespace __dissect {
-  export {
-    create$1 as create,
-    element$2 as element,
-  };
-}
-
-declare const element$1: (el: HTMLElement) => void;
-
-declare namespace __measure {
-  export {
-    element$1 as element,
-  };
-}
-
-declare const create: (html: string, area: string | null) => HTMLDivElement;
-declare const element: (el: HTMLElement) => Promise<void>;
-
-declare const __typography_create: typeof create;
-declare const __typography_element: typeof element;
-declare namespace __typography {
-  export {
-    __typography_create as create,
-    __typography_element as element,
-  };
-}
-
-declare const spacing: typeof __spacing;
-declare const dissect: typeof __dissect;
-declare const measure: typeof __measure;
-declare const typography: typeof __typography;
-declare const speccer: () => void;
-
-export { speccer as default, dissect, measure, spacing, typography };

package/dts/interfaces/global.d.ts

@@ -1,6 +0,0 @@
-export {};
-declare global {
-    interface Window {
-        speccer: any;
-    }
-}

package/dts/lib/attributes.d.ts

@@ -1,2 +0,0 @@
-export declare const set: (el: HTMLElement, attrs: {}) => void;
-export declare const remove: (el: HTMLElement, attrs: {}) => void;

package/dts/lib/classnames.d.ts

@@ -1,4 +0,0 @@
-export declare const set: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const toggle: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const remove: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const cx: (cls: string, cls_obj: {}) => string;

package/dts/lib/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const SPECCER_LITERALS: string[];
-export declare const SPECCER_TAGS_TO_AVOID: string[];
-export declare const SPECCER_DEFAULT_PIN_SPACE = 48;

package/dts/lib/css.d.ts

@@ -1,6 +0,0 @@
-import { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';
-export declare const getNumberValue: (value: string) => number;
-export declare const normalizeNumberValue: (value: string | number) => number;
-export declare const getSpacing: (style: SpacingCSSPropertiesType) => SpacingCSSPropertiesType;
-export declare const getTypography: (style: TypographyCSSPropertiesType) => TypographyCSSPropertiesType;
-export declare const pinSpace: (el: HTMLElement) => number;

package/dts/lib/debounce.d.ts

@@ -1,3 +0,0 @@
-export declare const waitForFrame: () => Promise<number>;
-declare const debounce: (func: Function, wait: number, immediate?: boolean | undefined) => Function;
-export default debounce;

package/dts/lib/node.d.ts

@@ -1,2 +0,0 @@
-export declare const after: (el: HTMLElement | null, newSibling: HTMLElement) => Element | null;
-export declare const removeAll: (selector: string, el?: Document) => void;

package/dts/lib/number.d.ts

@@ -1 +0,0 @@
-export declare const decimal: (number: string | number, decimals?: number) => string;

package/dts/lib/position.d.ts

@@ -1,6 +0,0 @@
-export declare const get_horizontal_center_of_els: (modifier: number, startRect: DOMRect, targetRect: DOMRect) => number;
-export declare const get_vertical_center_of_els: (modifier: number, startRect: DOMRect, targetRect: DOMRect) => number;
-export declare const get_body_correction: () => {
-    top: number;
-    left: number;
-};

package/dts/lib/resize.d.ts

@@ -1 +0,0 @@
-export declare const activate: (speccer: Function) => void;

package/dts/lib/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const add: (el: HTMLElement, styles: [] | object) => Promise<void>;
-export declare const get: (el: HTMLElement) => Promise<CSSStyleDeclaration>;

package/dts/tasks/dissect.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-export declare const element: (el: HTMLElement, dissectIndex: number) => Promise<void>;

package/dts/tasks/index.d.ts

@@ -1,4 +0,0 @@
-export * as typography from './typography';
-export * as dissect from './dissect';
-export * as measure from './measure';
-export * as spec from './spec';

package/dts/tasks/measure.d.ts

@@ -1 +0,0 @@
-export declare const element: (el: HTMLElement) => void;

package/dts/tasks/spec.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (text?: string | number, tag?: string) => HTMLElement;
-export declare const element: (el: HTMLElement) => Promise<void>;

package/dts/tasks/typography.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (html: string, area: string | null) => HTMLDivElement;
-export declare const element: (el: HTMLElement) => Promise<void>;

package/dts/types/css.d.ts

@@ -1,19 +0,0 @@
-export declare type SpacingCSSPropertiesType = {
-    marginTop: string;
-    marginBottom: string;
-    marginLeft: string;
-    marginRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    paddingLeft: string;
-    paddingRight: string;
-};
-export declare type TypographyCSSPropertiesType = {
-    lineHeight: string;
-    letterSpacing: string;
-    fontFamily: string;
-    fontSize: string;
-    fontStyle: string;
-    fontVariationSettings: string;
-    fontWeight: string;
-};

package/dts/types/speccer.d.ts

@@ -1,5 +0,0 @@
-import { SpacingCSSPropertiesType } from './css';
-export declare type SpeccerElType = {
-    styles?: SpacingCSSPropertiesType;
-    rect?: DOMRectReadOnly;
-};

package/src/browser.ts

@@ -1,96 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as resize from './lib/resize';
-import * as spec from './tasks/spec';
-import * as measure from './tasks/measure';
-import * as dissect from './tasks/dissect';
-
-export const dom = (speccer: Function) => {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      speccer();
-    });
-  } else {
-    // `DOMContentLoaded` already fired
-    speccer();
-  }
-};
-
-export const lazy = () => {
-  const _spec_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el: IntersectionObserverEntry) => {
-      if (el.intersectionRatio > 0) {
-        spec.element(el.target as HTMLElement);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach((el) => {
-    _spec_observer.observe(el);
-  });
-
-  const _measure_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      if (el.intersectionRatio > 0) {
-        measure.element(el.target as HTMLElement);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer-measure]').forEach((el) => {
-    _measure_observer.observe(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);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
-    _dissect_observer.observe(el);
-  });
-};
-
-export const manual = (speccer: Function) => {
-  window.speccer = speccer;
-};
-
-export const activate = (speccer: Function) => {
-  const _script = document.currentScript;
-
-  if (_script) {
-    const _speccer_script_src = _script.getAttribute('src');
-
-    if (
-      _speccer_script_src &&
-      (_speccer_script_src.indexOf('speccer.js') !== -1 ||
-        // for codepen
-        _speccer_script_src.indexOf('JaXpOK.js') !== -1)
-    ) {
-      if (_script.hasAttribute('data-manual')) {
-        manual(speccer);
-      } else if (_script.hasAttribute('data-instant')) {
-        speccer();
-      } else if (_script.hasAttribute('data-dom')) {
-        dom(speccer);
-      } else if (_script.hasAttribute('data-lazy')) {
-        lazy();
-      } else {
-        dom(speccer);
-      }
-
-      if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {
-        resize.activate(speccer);
-      }
-    }
-  }
-};

package/src/enums/area.ts

@@ -1,17 +0,0 @@
-export enum SpeccerAreaEnum {
-  Empty = '',
-  Left = 'left',
-  Right = 'right',
-  Bottom = 'bottom',
-  Top = 'top',
-}
-
-export enum DissectAreaEnum {
-  Outline = 'outline',
-  Enclose = 'enclose',
-  Full = 'full',
-  Left = 'left',
-  Right = 'right',
-  Bottom = 'bottom',
-  Top = 'top',
-}

package/src/helpers/dissect/index.ts

@@ -1 +0,0 @@
-export { styles } from './styles';

package/src/helpers/dissect/styles.ts

@@ -1,154 +0,0 @@
-import * as css from '../../lib/css';
-import * as number from '../../lib/number';
-import { get_body_correction } from '../../lib/position';
-import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
-import { DissectAreaEnum } from '../../enums/area';
-
-export const styles = (area: string, el: HTMLElement, dissectionEl: HTMLElement) => {
-  const _el_rect = el.getBoundingClientRect();
-  const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);
-  const _dissection_el_rect = dissectionEl.getBoundingClientRect();
-  const _body_correction = get_body_correction();
-  const _el_offset_top = el.offsetTop + _body_correction.top;
-  const _el_offset_left = el.offsetLeft + _body_correction.left;
-  const _left_layout_position_left = _el_offset_left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';
-  const _left_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
-  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
-  const _right_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_top = _el_offset_top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';
-  const _bottom_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
-  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
-
-  let _dissection_styles = {};
-
-  if (area.indexOf(DissectAreaEnum.Outline) !== -1) {
-    if (area.indexOf(DissectAreaEnum.Left) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left - 8 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _left_layout_position_left,
-          top: _left_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _right_layout_position_left,
-          top: _right_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          top: _el_offset_top + -8 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _top_layout_position_left,
-          top: _top_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          top: _el_offset_top + _el_rect.height + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _bottom_layout_position_left,
-          top: _bottom_layout_position_top
-        };
-      }
-    } else {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _left_layout_position_left,
-          top: _left_layout_position_top
-        };
-      }
-    }
-  } else {
-    if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-      _dissection_styles = {
-        left: _el_offset_left - 8 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px'
-      };
-    } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-      _dissection_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_styles = {
-        left: _left_layout_position_left,
-        top: _left_layout_position_top
-      };
-    }
-  }
-
-  return _dissection_styles;
-};

package/src/helpers/typography/index.ts

@@ -1,3 +0,0 @@
-export { position } from './position';
-
-export { template } from './template';

package/src/helpers/typography/position.ts

@@ -1,54 +0,0 @@
-import * as css from '../../lib/css';
-import * as number from '../../lib/number';
-import { get_body_correction } from '../../lib/position';
-import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
-import { SpeccerAreaEnum } from '../../enums/area';
-
-export const position = (
-  area: string | null,
-  el: HTMLElement,
-  speccerEl: HTMLElement
-): { left: string; top: string } => {
-  const _el_rect = el.getBoundingClientRect();
-  const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);
-  const _speccer_el_rect = speccerEl.getBoundingClientRect();
-  const _body_correction = get_body_correction();
-  const _el_offset_top = el.offsetTop + _body_correction.top;
-  const _el_offset_left = el.offsetLeft + _body_correction.left;
-  const _left_layout_position_left = _el_offset_left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';
-  const _left_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
-  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
-  const _right_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_top = _el_offset_top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';
-  const _bottom_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
-  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
-
-  let _position = {
-    left: _left_layout_position_left,
-    top: _left_layout_position_top
-  };
-
-  if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {
-    _position = {
-      left: _right_layout_position_left,
-      top: _right_layout_position_top
-    };
-  } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {
-    _position = {
-      left: _top_layout_position_left,
-      top: _top_layout_position_top
-    };
-  } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {
-    _position = {
-      left: _bottom_layout_position_left,
-      top: _bottom_layout_position_top
-    };
-  }
-
-  return _position;
-};

package/src/helpers/typography/template.ts

@@ -1,27 +0,0 @@
-import * as css from '../../lib/css';
-import * as styles from '../../lib/styles';
-
-export const template = async (el: HTMLElement): Promise<string> => {
-  const _el_styles = await styles.get(el);
-  const _styles = css.getTypography(_el_styles);
-
-  return (
-    `
-` +
-    'font-styles: {' +
-    '<ul class="speccer-styles">' +
-    `  <li><span class="property">font-family:</span> ${_styles['fontFamily']};</li>` +
-    `  <li><span class="property">font-size:</span> ${_styles['fontSize']} / ${
-      parseInt(_styles['fontSize'], 10) / 16
-    }rem;</li>` +
-    `  <li><span class="property">font-weight:</span> ${_styles['fontWeight']};</li>` +
-    `  <li><span class="property">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +
-    `  <li><span class="property">line-height:</span> ${_styles['lineHeight']} / ${
-      parseInt(_styles['lineHeight'], 10) / 16
-    }rem;</li>` +
-    `  <li><span class="property">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +
-    `  <li><span class="property">font-style:</span> ${_styles['fontStyle']};</li>` +
-    '</ul>' +
-    '}'
-  );
-};