@oscarpalmer/toretto 0.41.0 → 0.43.0

package/src/style.ts

@@ -3,6 +3,10 @@ import {getStyleValue} from './internal/get-value';
 import {isHTMLOrSVGElement} from './internal/is';
 import type {TextDirection} from './models';
 
+// #region Types
+
+type CSSStyleValues = Variables & CSSStyleDeclaration;
+
 export type StyleToggler = {
 	/**
 	 * Set the provided styles on the element
@@ -14,6 +18,18 @@ export type StyleToggler = {
 	remove(): void;
 };
 
+type Styles = Partial<Record<keyof CSSStyleValues, unknown>>;
+
+type Variables<
+	Value extends Record<string, string | undefined> = Record<string, string | undefined>,
+> = {
+	[property in keyof Value as `--${string & property}`]?: string | undefined;
+};
+
+// #endregion
+
+// #region Functions
+
 /**
  * Get a style from an element
  * @param element Element to get the style from
@@ -23,14 +39,12 @@ export type StyleToggler = {
  */
 export function getStyle(
 	element: Element,
-	property: keyof CSSStyleDeclaration,
+	property: keyof CSSStyleValues,
 	computed?: boolean,
 ): string | undefined {
-	if (!isHTMLOrSVGElement(element) || typeof property !== 'string') {
-		return undefined;
+	if (isHTMLOrSVGElement(element) && typeof property === 'string') {
+		return getStyleValue(element, property, computed === true);
 	}
-
-	return getStyleValue(element, property, computed === true);
 }
 
 /**
@@ -40,7 +54,7 @@ export function getStyle(
  * @param computed Get the computed styles? _(defaults to `false`)_
  * @returns Style values
  */
-export function getStyles<Property extends keyof CSSStyleDeclaration>(
+export function getStyles<Property extends keyof CSSStyleValues>(
 	element: Element,
 	properties: Property[],
 	computed?: boolean,
@@ -65,25 +79,37 @@ export function getStyles<Property extends keyof CSSStyleDeclaration>(
 }
 
 /**
- * Get the text direction of an element
- * @param element Element to get the text direction from
- * @param computed Get the computed text direction? _(defaults to `false`)_
+ * Get the text direction of a node or element _(or document, if element is invalid)_
+ * @param node Node or element to get the text direction from
+ * @returns Text direction
+ */
+export function getTextDirection(node: Element | Node): TextDirection;
+
+/**
+ * Get the text direction of the document
  * @returns Text direction
  */
-export function getTextDirection(element: Element, computed?: boolean): TextDirection {
-	if (!(element instanceof Element)) {
-		return undefined as never;
+export function getTextDirection(): TextDirection;
+
+export function getTextDirection(node?: Element | Node): TextDirection {
+	let target: HTMLElement | SVGElement;
+
+	if (isHTMLOrSVGElement(node)) {
+		target = node;
+	} else {
+		target =
+			node instanceof Node
+				? (node.ownerDocument?.documentElement ?? document.documentElement)
+				: document.documentElement;
 	}
 
-	const direction = element.getAttribute(ATTRIBUTE_DIRECTION);
+	let {direction} = target.style;
 
-	if (direction != null && EXPRESSION_DIRECTION.test(direction)) {
-		return direction.toLowerCase() as TextDirection;
+	if (direction === '') {
+		direction = getStyleValue(target, PROPERTY_DIRECTION, true)!;
 	}
 
-	const value = getStyleValue(element, 'direction', computed === true);
-
-	return value === 'rtl' ? value : 'ltr';
+	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
 }
 
 /**
@@ -92,12 +118,8 @@ export function getTextDirection(element: Element, computed?: boolean): TextDire
  * @param property Style name
  * @param value Style value
  */
-export function setStyle(
-	element: Element,
-	property: keyof CSSStyleDeclaration,
-	value?: string,
-): void {
-	setElementValues(element, property as string, value, null, updateStyleProperty);
+export function setStyle(element: Element, property: keyof CSSStyleValues, value?: unknown): void {
+	setElementValues(element, property as string, value, null, updateStyleProperty, true);
 }
 
 /**
@@ -105,8 +127,8 @@ export function setStyle(
  * @param element Element to set the styles on
  * @param styles Styles to set
  */
-export function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>): void {
-	setElementValues(element, styles as never, null, null, updateStyleProperty);
+export function setStyles(element: Element, styles: Styles): void {
+	setElementValues(element, styles as never, null, null, updateStyleProperty, true);
 }
 
 /**
@@ -115,11 +137,11 @@ export function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>
  * @param styles Styles to be set or removed
  * @returns Style toggler
  */
-export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclaration>): StyleToggler {
+export function toggleStyles(element: Element, styles: Styles): StyleToggler {
 	function toggle(set: boolean): void {
 		hasSet = set;
 
-		let next: Partial<CSSStyleDeclaration>;
+		let next: Styles;
 
 		if (set) {
 			values = getStyles(element, keys);
@@ -130,8 +152,8 @@ export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclarati
 
 			values = {};
 
-			for (const key of keys) {
-				values[key as never] = undefined;
+			for (let index = 0; index < length; index += 1) {
+				values[keys[index] as never] = undefined;
 			}
 		}
 
@@ -139,6 +161,7 @@ export function toggleStyles(element: Element, styles: Partial<CSSStyleDeclarati
 	}
 
 	const keys = Object.keys(styles) as (keyof CSSStyleDeclaration)[];
+	const {length} = keys;
 
 	let hasSet = false;
 	let values: Record<string, string | undefined> = {};
@@ -162,19 +185,41 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 		element,
 		key,
 		value,
-		function (this: Element, property: string, style: string) {
-			(this as HTMLElement).style[property as never] = style;
+		function (this: Element, property: string, style: unknown) {
+			if (property.startsWith(VARIABLE_PREFIX)) {
+				(this as HTMLElement).style.setProperty(property, String(style));
+			} else {
+				(this as HTMLElement).style[property as never] = String(style);
+			}
 		},
 		function (this: Element, property: string) {
-			(this as HTMLElement).style[property as never] = '';
+			if (property.startsWith(VARIABLE_PREFIX)) {
+				(this as HTMLElement).style.removeProperty(property);
+			} else {
+				(this as HTMLElement).style[property as never] = '';
+			}
+
+			if ((this as HTMLElement).getAttribute(ATTRIBUTE_STYLE) === '') {
+				(this as HTMLElement).removeAttribute(ATTRIBUTE_STYLE);
+			}
 		},
 		false,
 		false,
 	);
 }
 
-//
+// #endregion
+
+// #region Variables
+
+const ATTRIBUTE_STYLE = 'style';
+
+const DIRECTION_LTR = 'ltr';
+
+const DIRECTION_RTL = 'rtl';
+
+const PROPERTY_DIRECTION = 'direction';
 
-const ATTRIBUTE_DIRECTION = 'dir';
+const VARIABLE_PREFIX = '--';
 
-const EXPRESSION_DIRECTION = /^(ltr|rtl)$/i;
+// #endregion

package/src/touch.ts

@@ -1,3 +1,5 @@
+// #region Types
+
 type NavigatorWithMsMaxTouchPoints = Navigator & {
 	msMaxTouchPoints: number;
 };
@@ -17,7 +19,9 @@ type SupporsTouch = {
 	update(): boolean;
 };
 
-//
+// #endregion
+
+// #region Functions
 
 function getSupport(): boolean {
 	if (window == null || navigator == null) {
@@ -50,7 +54,9 @@ function getSupport(): boolean {
 	return false;
 }
 
-//
+// #endregion
+
+// #region Variables
 
 /**
  * Does the device support touch events?
@@ -78,4 +84,10 @@ const supportsTouch: SupporsTouch = (() => {
 	return instance;
 })();
 
+// #endregion
+
+// #region Exports
+
 export default supportsTouch;
+
+// #endregion