@inc2734/unitone-css 1.3.1 → 1.4.1

package/src/observer-scope.js

@@ -0,0 +1,53 @@
+/**
+ * Owns the resources and queued work of one layout observer initialization.
+ *
+ * @param {Element} target Target element.
+ * @returns {object} Observer lifetime and cleanup helpers.
+ */
+export const createObserverScope = (target) => {
+  const defaultView = target.ownerDocument.defaultView;
+  const cleanups = new Set();
+  const frames = new Set();
+  let disposed = false;
+
+  return {
+    get disposed() {
+      return disposed;
+    },
+    addCleanup(cleanup) {
+      if (disposed) {
+        cleanup();
+      } else {
+        cleanups.add(cleanup);
+      }
+    },
+    requestAnimationFrame(callback) {
+      if (disposed) {
+        return 0;
+      }
+      if (!defaultView?.requestAnimationFrame) {
+        callback();
+        return 0;
+      }
+
+      const id = defaultView.requestAnimationFrame((time) => {
+        frames.delete(id);
+        if (!disposed) {
+          callback(time);
+        }
+      });
+      frames.add(id);
+      return id;
+    },
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      frames.forEach((id) => defaultView.cancelAnimationFrame(id));
+      frames.clear();
+      cleanups.forEach((cleanup) => cleanup());
+      cleanups.clear();
+    },
+  };
+};

package/src/register-layout-initializer.js

@@ -23,7 +23,7 @@ const getRegistry = () => {
 };
 
 const initializeInitializer = (initializer, root) => {
-  if (!initializer.enabled() || root?.nodeType !== Node.ELEMENT_NODE) {
+  if (!root?.isConnected || !initializer.enabled() || root.nodeType !== Node.ELEMENT_NODE) {
     return;
   }
 
@@ -42,8 +42,11 @@ const initializeInitializer = (initializer, root) => {
       return;
     }
 
-    initializer.initialize(target);
+    const cleanup = initializer.initialize(target);
     initializer.initialized.add(target);
+    if ('function' === typeof cleanup) {
+      initializer.cleanups.set(target, cleanup);
+    }
   });
 };
 
@@ -58,6 +61,27 @@ const initializeNode = (root) => {
   });
 };
 
+// Inspect detached subtrees without relying on selectors that may have changed before removal.
+const disposeNode = (root) => {
+  const registry = getRegistry();
+  if (!registry || root?.isConnected || root?.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+
+  [root, ...root.querySelectorAll('*')].forEach((target) => {
+    registry.initializers.forEach((initializer) => {
+      const cleanup = initializer.cleanups?.get(target);
+      if (!cleanup || target.isConnected) {
+        return;
+      }
+
+      initializer.cleanups.delete(target);
+      initializer.initialized.delete(target);
+      cleanup();
+    });
+  });
+};
+
 const flushPendingNodes = () => {
   const registry = getRegistry();
   if (!registry) {
@@ -82,13 +106,20 @@ const observeDocument = () => {
 
   registry.observer = new MutationObserver((entries) => {
     entries.forEach((entry) => {
+      entry.removedNodes.forEach(disposeNode);
       entry.addedNodes.forEach((addedNode) => {
-        if (addedNode?.nodeType === Node.ELEMENT_NODE) {
+        if (addedNode?.isConnected && addedNode.nodeType === Node.ELEMENT_NODE) {
           registry.pendingNodes.add(addedNode);
         }
       });
     });
 
+    registry.pendingNodes.forEach((node) => {
+      if (!node.isConnected) {
+        registry.pendingNodes.delete(node);
+      }
+    });
+
     if (!registry.rafId && 0 < registry.pendingNodes.size) {
       registry.rafId = requestAnimationFrame(flushPendingNodes);
     }
@@ -111,6 +142,7 @@ export const registerLayoutInitializer = ({ key, selector, initialize, enabled =
     initialize,
     enabled,
     initialized: new WeakSet(),
+    cleanups: new WeakMap(),
   };
 
   registry.initializers.set(key, initializer);

package/src/variables/_index.scss

@@ -21,54 +21,58 @@ $font-sizes: (
   7: 6xl,
 );
 
-@function generate-global-gutters($context: 'viewport') {
-  $width: var(--unitone--property--100vw);
-  @if $context == 'container' {
-    $width: var(--unitone--property--100cqw);
+@function generate-global-gutters($context: 'viewport', $width: null) {
+  @if $width == null {
+    $width: var(--unitone--property--100vw);
+    @if $context == 'container' {
+      $width: var(--unitone--property--100cqw);
+    }
   }
 
-  @return max(min(#{ $width } * .06, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
+  @return max(min($width * .06, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
 }
 
-@function generate-fluid-spacing($min, $max, $context: 'viewport') {
-  $width: var(--unitone--result--100vw-px);
-  @if $context == 'container' {
-    $width: var(--unitone--result--100cqw-px);
+@function generate-fluid-spacing($min, $max, $context: 'viewport', $width: null) {
+  @if $width == null {
+    $width: var(--unitone--result--100vw-px);
+    @if $context == 'container' {
+      $width: var(--unitone--result--100cqw-px);
+    }
   }
 
   @return clamp(
-    #{ $min },
-    #{ $min } + ((#{ $max } - #{ $min }) / (#{ $max-breakpoint - $min-breakpoint } * var(--unitone--result--1rem-px)) * (#{ $width } - (#{ $min-breakpoint } * var(--unitone--result--1rem-px)))),
-    #{ $max }
+    $min,
+    $min + (($max - $min) / (($max-breakpoint - $min-breakpoint) * var(--unitone--result--1rem-px)) * ($width - ($min-breakpoint * var(--unitone--result--1rem-px)))),
+    $max
   );
 }
 
-@function generate-spacing($max, $context: 'viewport') {
+@function generate-spacing($max, $context: 'viewport', $width: null) {
   $quotient: math.div($min-breakpoint, $max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient });
-  @return generate-fluid-spacing(#{ $min }, #{ $max }, $context);
+  $min: calc(var(--unitone--em1) + $max * $quotient);
+  @return generate-fluid-spacing($min, $max, $context, $width);
 }
 
-@function generate-padding($max, $context: 'viewport') {
+@function generate-padding($max, $context: 'viewport', $width: null) {
   $quotient: math.div($min-breakpoint, $max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient } * .2);
-  @return generate-fluid-spacing(#{ $min }, #{ $max }, $context);
+  $min: calc(var(--unitone--em1) + $max * $quotient * .2);
+  @return generate-fluid-spacing($min, $max, $context, $width);
 }
 
 @function _max-font-size($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - (#{ $level })));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - ($level)));
 }
 
 @function _min-font-size($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - (#{ $level })) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - ($level)) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
 }
 
 @function _font-size-scale($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - (#{ $level })));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - ($level)));
 }
 
 @function font-size-rem($level) {
-  @return calc(#{ _font-size-scale($level) } * 1rem);
+  @return calc(_font-size-scale($level) * 1rem);
 }
 
 @function font-size-fluid($level, $context: 'viewport') {
@@ -79,11 +83,20 @@ $font-sizes: (
 
   $max-font-size: _max-font-size($level);
   $min-font-size: _min-font-size($level);
-  $slope: calc((#{ $max-font-size } - #{ $min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
-  $intercept: calc(#{-1 * $min-breakpoint } * #{ $slope } + #{ $min-font-size });
-  $preferred-font-size: calc((#{ $intercept } * 1rem) + (#{ $slope } * #{ $width }));
+  $slope: _font-size-slope($min-font-size, $max-font-size);
+
+  @return _fluid-font-size($min-font-size, $max-font-size, $slope, $width);
+}
+
+@function _font-size-slope($min-font-size, $max-font-size) {
+  @return calc(($max-font-size - $min-font-size) / ($max-breakpoint - $min-breakpoint));
+}
 
-  @return clamp(var(--unitone--fluid-typography-min-length, calc(1rem * #{ $min-font-size })), #{ $preferred-font-size }, var(--unitone--fluid-typography-max-length, calc(1rem * #{ $max-font-size })));
+@function _fluid-font-size($min-font-size, $max-font-size, $slope, $width) {
+  $intercept: calc((-1 * $min-breakpoint) * $slope + $min-font-size);
+  $preferred-font-size: calc(($intercept * 1rem) + ($slope * $width));
+
+  @return clamp(var(--unitone--fluid-typography-min-length, calc(1rem * $min-font-size)), $preferred-font-size, var(--unitone--fluid-typography-max-length, calc(1rem * $max-font-size)));
 }
 
 /**
@@ -108,10 +121,10 @@ $font-sizes: (
  * font size the line-height stays close to max (and is clamped there).
  */
 $_min-line-height: calc(var(--unitone--min-line-height) - 0.1);
-$_line-height-amplitude: calc((var(--unitone--max-line-height) - #{ $_min-line-height }) * (var(--unitone--result--1rem-px) + var(--unitone--line-height-curvature)));
+$_line-height-amplitude: calc((var(--unitone--max-line-height) - $_min-line-height) * (var(--unitone--result--1rem-px) + var(--unitone--line-height-curvature)));
 $_line-height: clamp(
   var(--unitone--min-line-height),
-  (#{ $_min-line-height } + #{ $_line-height-amplitude } / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
+  ($_min-line-height + $_line-height-amplitude / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
   var(--unitone--max-line-height)
 );
 
@@ -140,53 +153,69 @@ $container-max-width: $max-breakpoint * 16px; // = 1280px
 $grid-columns: 12;
 $grid-rows: 7;
 
-@mixin spacing-tokens($context: 'viewport') {
-  @if $context == 'viewport' {
-    --unitone--s-3: var(--unitone--em-3);
-    --unitone--s-2: var(--unitone--em-2);
-    --unitone--s-1: var(--unitone--em-1);
-    --unitone--s0: var(--unitone--em0);
-    --unitone--s1: var(--unitone--em1);
+@mixin static-spacing-tokens() {
+  --unitone--s-3: var(--unitone--em-3);
+  --unitone--s-2: var(--unitone--em-2);
+  --unitone--s-1: var(--unitone--em-1);
+  --unitone--s0: var(--unitone--em0);
+  --unitone--s1: var(--unitone--em1);
+}
+
+@mixin spacing-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $include-static {
+    @include static-spacing-tokens();
   }
 
-  --unitone--s2: #{ generate-spacing(var(--unitone--em2), $context) };
-  --unitone--s3: #{ generate-spacing(var(--unitone--em3), $context) };
-  --unitone--s4: #{ generate-spacing(var(--unitone--em4), $context) };
-  --unitone--s5: #{ generate-spacing(var(--unitone--em5), $context) };
-  --unitone--s6: #{ generate-spacing(var(--unitone--em6), $context) };
-  --unitone--s7: #{ generate-spacing(var(--unitone--em7), $context) };
-
-  --unitone--s1s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1), $context) };
-  --unitone--s2s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2), $context) };
-  --unitone--s3s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3), $context) };
-  --unitone--s4s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4), $context) };
-  --unitone--s5s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5), $context) };
-  --unitone--s6s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6), $context) };
-  --unitone--s7s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7), $context) };
-
-  --unitone--s2m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2), $context) };
-  --unitone--s3m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3), $context) };
-  --unitone--s4m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4), $context) };
-  --unitone--s5m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5), $context) };
-  --unitone--s6m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6), $context) };
-  --unitone--s7m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7), $context) };
-}
-
-@mixin padding-tokens($context: 'viewport') {
-  @if $context == 'viewport' {
-    --unitone--p-3: var(--unitone--em-3);
-    --unitone--p-2: var(--unitone--em-2);
-    --unitone--p-1: var(--unitone--em-1);
-    --unitone--p0: var(--unitone--em0);
-    --unitone--p1: var(--unitone--em1);
+  --unitone--s2: #{ generate-spacing(var(--unitone--em2), $context, $width) };
+  --unitone--s3: #{ generate-spacing(var(--unitone--em3), $context, $width) };
+  --unitone--s4: #{ generate-spacing(var(--unitone--em4), $context, $width) };
+  --unitone--s5: #{ generate-spacing(var(--unitone--em5), $context, $width) };
+  --unitone--s6: #{ generate-spacing(var(--unitone--em6), $context, $width) };
+  --unitone--s7: #{ generate-spacing(var(--unitone--em7), $context, $width) };
+
+  --unitone--s1s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1), $context, $width) };
+  --unitone--s2s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2), $context, $width) };
+  --unitone--s3s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3), $context, $width) };
+  --unitone--s4s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4), $context, $width) };
+  --unitone--s5s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5), $context, $width) };
+  --unitone--s6s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6), $context, $width) };
+  --unitone--s7s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7), $context, $width) };
+
+  --unitone--s2m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2), $context, $width) };
+  --unitone--s3m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3), $context, $width) };
+  --unitone--s4m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4), $context, $width) };
+  --unitone--s5m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5), $context, $width) };
+  --unitone--s6m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6), $context, $width) };
+  --unitone--s7m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7), $context, $width) };
+}
+
+@mixin static-padding-tokens() {
+  --unitone--p-3: var(--unitone--em-3);
+  --unitone--p-2: var(--unitone--em-2);
+  --unitone--p-1: var(--unitone--em-1);
+  --unitone--p0: var(--unitone--em0);
+  --unitone--p1: var(--unitone--em1);
+}
+
+@mixin padding-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $include-static {
+    @include static-padding-tokens();
   }
 
-  --unitone--p2: #{ generate-padding(var(--unitone--em2), $context) };
-  --unitone--p3: #{ generate-padding(var(--unitone--em3), $context) };
-  --unitone--p4: #{ generate-padding(var(--unitone--em4), $context) };
-  --unitone--p5: #{ generate-padding(var(--unitone--em5), $context) };
-  --unitone--p6: #{ generate-padding(var(--unitone--em6), $context) };
-  --unitone--p7: #{ generate-padding(var(--unitone--em7), $context) };
+  --unitone--p2: #{ generate-padding(var(--unitone--em2), $context, $width) };
+  --unitone--p3: #{ generate-padding(var(--unitone--em3), $context, $width) };
+  --unitone--p4: #{ generate-padding(var(--unitone--em4), $context, $width) };
+  --unitone--p5: #{ generate-padding(var(--unitone--em5), $context, $width) };
+  --unitone--p6: #{ generate-padding(var(--unitone--em6), $context, $width) };
+  --unitone--p7: #{ generate-padding(var(--unitone--em7), $context, $width) };
 
   --unitone--p1s: var(--unitone--s1s);
   --unitone--p2s: var(--unitone--s2s);
@@ -204,12 +233,33 @@ $grid-rows: 7;
   --unitone--p7m: var(--unitone--s7m);
 }
 
-@mixin font-size-tokens($context: 'viewport') {
+@mixin static-font-size-tokens() {
   @each $level, $name in $font-sizes {
-    @if $context == 'viewport' {
-      --unitone--font-size-#{ $name }: #{ font-size-rem($level) };
+    --unitone--font-size-#{ $name }: #{ font-size-rem($level) };
+  }
+}
+
+@mixin font-size-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $width == null {
+    $width: 100vw;
+    @if $context == 'container' {
+      $width: var(--unitone--property--100cqw);
     }
+  }
+
+  @if $include-static {
+    @include static-font-size-tokens();
+  }
+
+  @each $level, $name in $font-sizes {
+    $min: _min-font-size($level);
+    $max: _max-font-size($level);
+    $slope: _font-size-slope($min, $max);
 
-    --unitone--font-size-#{ $name }-fluid: #{ font-size-fluid($level, $context) };
+    --unitone--font-size-#{ $name }-fluid: #{ _fluid-font-size($min, $max, $slope, $width) };
   }
 }