style: format the UI shell and component styles

src/splitFlap.js

@@ -107,7 +107,8 @@ function positiveNumber(value, fallback) {
 }
 
 function nowMs() {
-  return typeof performance !== 'undefined' && typeof performance.now === 'function'
+  return typeof performance !== 'undefined' &&
+    typeof performance.now === 'function'
     ? performance.now()
     : Date.now();
 }
@@ -235,7 +236,9 @@ export function visibleGlyphs(plan, elapsedMs, options = {}) {
   const turnRatio = Number.isFinite(Number(options.turnRatio))
     ? Number(options.turnRatio)
     : FLAP_TURN_RATIO;
-  const elapsed = Number.isFinite(Number(elapsedMs)) ? Math.max(0, Number(elapsedMs)) : 0;
+  const elapsed = Number.isFinite(Number(elapsedMs))
+    ? Math.max(0, Number(elapsedMs))
+    : 0;
   const turn = charMs * turnRatio;
   let out = '';
   for (const cell of plan?.cells || []) {
@@ -246,9 +249,11 @@ export function visibleGlyphs(plan, elapsedMs, options = {}) {
 
 /** Whether the viewer asked for reduced motion. */
 function prefersReducedMotion() {
-  return typeof window !== 'undefined'
-    && typeof window.matchMedia === 'function'
-    && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
 }
 
 /**
@@ -274,7 +279,11 @@ function isVisible(element) {
   if (element.getClientRects().length === 0) return false;
   const view = element.ownerDocument?.defaultView;
   if (typeof view?.getComputedStyle !== 'function') return true;
-  for (let node = element; node && node.nodeType === 1; node = node.parentElement) {
+  for (
+    let node = element;
+    node && node.nodeType === 1;
+    node = node.parentElement
+  ) {
     const style = view.getComputedStyle(node);
     if (style.visibility === 'hidden' || style.display === 'none') return false;
     if (Number(style.opacity) === 0) return false;
@@ -301,10 +310,12 @@ function ensureHost(element) {
   // nothing changed.
   const text = element.firstElementChild;
   const cells = text?.nextElementSibling;
-  if (text?.classList?.contains(TEXT_CLASS)
-    && text.firstChild?.nodeType === 3
-    && cells?.classList?.contains(CELLS_CLASS)
-    && !cells.nextElementSibling) {
+  if (
+    text?.classList?.contains(TEXT_CLASS) &&
+    text.firstChild?.nodeType === 3 &&
+    cells?.classList?.contains(CELLS_CLASS) &&
+    !cells.nextElementSibling
+  ) {
     return { text, cells };
   }
 
@@ -363,7 +374,8 @@ function easeWidth(element, fromWidth, toWidth, durationMs) {
   element.style.width = `${toWidth}px`;
 
   const finish = (event) => {
-    if (event && (event.target !== element || event.propertyName !== 'width')) return;
+    if (event && (event.target !== element || event.propertyName !== 'width'))
+      return;
     cancelWidthEase(element);
     clearSizing(element);
   };
@@ -449,16 +461,19 @@ export function setSplitFlapText(element, text, options = {}) {
   // previous label's glyphs, and those are what must flap away.
   const state = flapStates.get(element);
   const displayed = state
-    ? visibleGlyphs(state.plan, nowMs() - state.startedAt, { charMs: state.charMs })
+    ? visibleGlyphs(state.plan, nowMs() - state.startedAt, {
+        charMs: state.charMs,
+      })
     : settled;
   clearFlapTimer(element);
 
   const beforeWidth = measureWidth(element);
 
-  const animate = SPLIT_FLAP_ENABLED
-    && options.immediate !== true
-    && !prefersReducedMotion()
-    && isVisible(element);
+  const animate =
+    SPLIT_FLAP_ENABLED &&
+    options.immediate !== true &&
+    !prefersReducedMotion() &&
+    isVisible(element);
 
   const plan = animate ? planSplitFlap(displayed, next, options) : null;