@wmcadigital/ui-base

Base design-system utilities and foundational styles used across the monorepo.

What this package provides

• htmlCleanup (named export): a small DOM utility that sanitises and cleans HTML produced by CMSs or rich-text editors.
• Base layout and typography styles compiled to dist/styles/main.css (see the style field in package.json).
• A tiny compatibility export hello (default) used by tests.

htmlCleanup — what it does

htmlCleanup() performs a conservative set of content sanitisation steps intended to tidy markup without altering meaningful content:

• Removes empty attributes from all elements (attributes with an empty string value).
• Removes empty <p> elements (only whitespace, empty <strong> children, or paragraphs that only wrap <img> elements are removed). If a <p> only contains an <img>, the <img> is unwrapped into the document.
• Removes empty heading elements (<h1>–<h6>) that contain no text and no children.
• Removes emoji characters from text nodes (uses a broad regex to strip common emoji codepoints).
• Replaces non-breaking spaces (\u00A0) with regular spaces to avoid layout and trimming issues.

These operations run on the provided root (defaults to document) and are safe to call once the DOM is available.

Usage

Import and run the helper in a browser environment:

import { htmlCleanup } from '@wmcadigital/ui-base';

// Clean the whole document
htmlCleanup();

// Or target a subtree
const container = document.querySelector('.cms-content');
if (container) htmlCleanup(container);

Note: htmlCleanup is a DOM utility — do not call it on the server during SSR.

Styles

The package includes base layout helpers and typography styles in src/styles/main.scss and the compiled CSS in dist/styles/main.css.

Installation

pnpm add @wmcadigital/ui-base

Development

• Source: src/scripts/htmlCleanup.ts, src/styles/main.scss, src/index.ts.
• Build the package from the monorepo root:

pnpm -w -r run build

• Linting and tests:

pnpm -w -r run lint
pnpm -w -r run test