dees-element/ts/decorators.containerresponsive.ts

import { unsafeCSS, type CSSResult } from 'lit';
import * as domtools from '@design.estate/dees-domtools';

const camelToKebab = (name: string) =>
  name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

export function containerResponsive() {
  return function (target: any) {
    const tagName: string =
      target.is || target.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

    // If .is differs from the regex-derived name, cssManager.cssFor*(css, this)
    // in static styles (evaluated before decorators) used the wrong container name.
    // Fix those stale references now.
    const derivedName = target.name ? camelToKebab(target.name) : null;
    if (derivedName && derivedName !== tagName) {
      const fixStyle = (style: CSSResult) => {
        if (style && style.cssText && style.cssText.includes(`@container ${derivedName}`)) {
          return unsafeCSS(
            style.cssText.replaceAll(`@container ${derivedName}`, `@container ${tagName}`)
          );
        }
        return style;
      };

      const original = target.styles;
      if (Array.isArray(original)) {
        target.styles = original.map(fixStyle);
      } else if (original) {
        target.styles = fixStyle(original);
      }
    }

    // Append containment context styles
    const containerStyles = domtools.breakpoints.containerContextStyles(tagName);
    const current = target.styles;
    if (Array.isArray(current)) {
      target.styles = [...current, containerStyles];
    } else if (current) {
      target.styles = [current, containerStyles];
    } else {
      target.styles = [containerStyles];
    }

    return target;
  };
}