@alphacifer/slidev-addon-theme 0.0.1

package/utils/mergeUno/classifyVisual.ts

@@ -0,0 +1,249 @@
+import type { IClassifyUtilityParams, TUtilityConflictKeys } from './types';
+
+const BORDER_STYLES = new Set([
+  'border-dashed',
+  'border-dotted',
+  'border-double',
+  'border-hidden',
+  'border-none',
+  'border-solid',
+]);
+
+const LENGTH_VALUE = /^(?:0|\d|px|full|screen|min|max|fit|auto|\[[-+]?\d)/;
+
+const BORDER_SIDES: Readonly<Record<string, readonly string[]>> = {
+  '': ['top', 'right', 'bottom', 'left'],
+  b: ['bottom'],
+  e: ['inline-end'],
+  l: ['left'],
+  r: ['right'],
+  s: ['inline-start'],
+  t: ['top'],
+  x: ['left', 'right'],
+  y: ['top', 'bottom'],
+};
+
+const ANIMATION_KEYS = [
+  'animation-name',
+  'animation-duration',
+  'animation-delay',
+  'animation-timing-function',
+  'animation-fill-mode',
+  'animation-direction',
+  'animation-iteration-count',
+  'animation-play-state',
+] as const;
+
+function directionKeys(property: string, direction: string): string[] {
+  return (BORDER_SIDES[direction] ?? []).map((side) => `${property}-${side}`);
+}
+
+function classifyBorder(utility: string): string[] | null {
+  if (utility === 'border-collapse' || utility === 'border-separate') {
+    return ['border-collapse'];
+  }
+
+  if (utility.startsWith('border-spacing-x-')) {
+    return ['border-spacing-x'];
+  }
+
+  if (utility.startsWith('border-spacing-y-')) {
+    return ['border-spacing-y'];
+  }
+
+  if (utility.startsWith('border-spacing-')) {
+    return ['border-spacing-x', 'border-spacing-y'];
+  }
+
+  if (BORDER_STYLES.has(utility)) {
+    return ['border-style'];
+  }
+
+  const match = utility.match(/^border(?:-([trblesxy]))?(?:-(.+))?$/);
+
+  if (!match) {
+    return null;
+  }
+
+  const direction = match[1] ?? '';
+  const value = match[2] ?? '';
+  const kind = !value || LENGTH_VALUE.test(value) ? 'width' : 'color';
+  return directionKeys(`border-${kind}`, direction);
+}
+
+function classifyBackground(utility: string): string[] {
+  if (/^bg-(?:fixed|local|scroll)$/.test(utility)) {
+    return ['background-attachment'];
+  }
+
+  if (/^bg-(?:clip|origin)-/.test(utility)) {
+    return [
+      utility.startsWith('bg-clip-') ? 'background-clip' : 'background-origin',
+    ];
+  }
+
+  if (/^bg-(?:repeat|no-repeat)/.test(utility)) {
+    return ['background-repeat'];
+  }
+
+  if (/^bg-(?:auto|cover|contain)$/.test(utility)) {
+    return ['background-size'];
+  }
+
+  if (
+    /^bg-(?:bottom|center|left|right|top)(?:-|$)/.test(utility) ||
+    utility.startsWith('bg-position-')
+  ) {
+    return ['background-position'];
+  }
+
+  if (/^bg-(?:gradient|image|url)-/.test(utility)) {
+    return ['background-image'];
+  }
+
+  if (utility.startsWith('bg-opacity-')) {
+    return ['background-opacity'];
+  }
+
+  return ['background-color'];
+}
+
+function classifyAnimation(utility: string): readonly string[] {
+  if (utility.startsWith('animate-name-')) {
+    return ['animation-name'];
+  }
+
+  if (utility.startsWith('animate-duration-')) {
+    return ['animation-duration'];
+  }
+
+  if (utility.startsWith('animate-delay-')) {
+    return ['animation-delay'];
+  }
+
+  if (utility === 'animate-ease' || utility.startsWith('animate-ease-')) {
+    return ['animation-timing-function'];
+  }
+
+  if (/^animate-(?:fill-mode-|fill-|mode-)/.test(utility)) {
+    return ['animation-fill-mode'];
+  }
+
+  if (utility.startsWith('animate-direction-')) {
+    return ['animation-direction'];
+  }
+
+  if (/^animate-(?:iteration-count-|iteration-|count-)/.test(utility)) {
+    return ['animation-iteration-count'];
+  }
+
+  if (/^animate-(?:play-state-|play-|state-)/.test(utility)) {
+    return ['animation-play-state'];
+  }
+
+  return ANIMATION_KEYS;
+}
+
+export function classifyVisual({
+  utility,
+}: IClassifyUtilityParams): TUtilityConflictKeys {
+  if (utility.startsWith('bg-')) {
+    return classifyBackground(utility);
+  }
+
+  if (utility.startsWith('rounded')) {
+    const match = utility.match(/^rounded-?([trbles]{0,2})/)?.[1] ?? '';
+
+    return [`border-radius:${match}`];
+  }
+
+  if (utility.startsWith('border')) {
+    return classifyBorder(utility) ?? [`token:${utility}`];
+  }
+
+  if (utility.startsWith('divide-x-')) {
+    return ['divide-x'];
+  }
+
+  if (utility.startsWith('divide-y-')) {
+    return ['divide-y'];
+  }
+
+  if (utility.startsWith('ring-offset-')) {
+    return ['ring-offset'];
+  }
+
+  if (utility.startsWith('ring-')) {
+    return ['ring'];
+  }
+
+  if (utility.startsWith('shadow-') || utility === 'shadow') {
+    return ['shadow'];
+  }
+
+  if (utility.startsWith('translate-x-')) {
+    return ['translate-x'];
+  }
+
+  if (utility.startsWith('translate-y-')) {
+    return ['translate-y'];
+  }
+
+  if (utility.startsWith('translate-')) {
+    return ['translate-x', 'translate-y'];
+  }
+
+  if (utility.startsWith('rotate-')) {
+    return ['rotate'];
+  }
+
+  if (utility.startsWith('scale-x-')) {
+    return ['scale-x'];
+  }
+
+  if (utility.startsWith('scale-y-')) {
+    return ['scale-y'];
+  }
+
+  if (utility.startsWith('scale-')) {
+    return ['scale-x', 'scale-y'];
+  }
+
+  if (utility.startsWith('skew-x-')) {
+    return ['skew-x'];
+  }
+
+  if (utility.startsWith('skew-y-')) {
+    return ['skew-y'];
+  }
+
+  if (utility.startsWith('origin-')) {
+    return ['transform-origin'];
+  }
+
+  if (utility.startsWith('transform-')) {
+    return ['transform'];
+  }
+
+  if (utility.startsWith('transition-') || utility === 'transition') {
+    return ['transition-property'];
+  }
+
+  if (utility.startsWith('duration-')) {
+    return ['transition-duration'];
+  }
+
+  if (utility.startsWith('delay-')) {
+    return ['transition-delay'];
+  }
+
+  if (utility.startsWith('ease-')) {
+    return ['transition-timing-function'];
+  }
+
+  if (utility.startsWith('animate-')) {
+    return classifyAnimation(utility);
+  }
+
+  return null;
+}

package/utils/mergeUno/collectClassNames.ts

@@ -0,0 +1,147 @@
+import type { TUnoClassValue } from './types';
+
+interface ICollectClassNamesParams {
+  readonly values: readonly TUnoClassValue[];
+}
+
+function splitClassNames(value: string): string[] {
+  const tokens: string[] = [];
+  let current = '';
+  let quote = '';
+  let escaped = false;
+  let squareDepth = 0;
+  let roundDepth = 0;
+  let curlyDepth = 0;
+
+  for (const character of value) {
+    if (escaped) {
+      current += character;
+      escaped = false;
+      continue;
+    }
+
+    if (character === '\\') {
+      current += character;
+      escaped = true;
+      continue;
+    }
+
+    if (quote) {
+      current += character;
+
+      if (character === quote) {
+        quote = '';
+      }
+
+      continue;
+    }
+
+    if (character === '"' || character === "'") {
+      current += character;
+      quote = character;
+      continue;
+    }
+
+    if (character === '[') {
+      squareDepth += 1;
+    } else if (character === ']') {
+      squareDepth -= 1;
+    } else if (character === '(') {
+      roundDepth += 1;
+    } else if (character === ')') {
+      roundDepth -= 1;
+    } else if (character === '{') {
+      curlyDepth += 1;
+    } else if (character === '}') {
+      curlyDepth -= 1;
+    }
+
+    if (
+      /\s/.test(character) &&
+      squareDepth === 0 &&
+      roundDepth === 0 &&
+      curlyDepth === 0
+    ) {
+      if (current) {
+        tokens.push(current);
+      }
+
+      current = '';
+    } else {
+      current += character;
+    }
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  return tokens;
+}
+
+function expandVariantGroup(token: string): string[] {
+  let squareDepth = 0;
+
+  for (let index = 0; index < token.length - 1; index += 1) {
+    const character = token[index];
+
+    if (character === '[') {
+      squareDepth += 1;
+    } else if (character === ']') {
+      squareDepth -= 1;
+    }
+
+    if (
+      squareDepth === 0 &&
+      character === ':' &&
+      token[index + 1] === '(' &&
+      token.endsWith(')')
+    ) {
+      const prefix = token.slice(0, index + 1);
+      const contents = token.slice(index + 2, -1);
+      return splitClassNames(contents).flatMap((child) =>
+        expandVariantGroup(`${prefix}${child}`),
+      );
+    }
+  }
+
+  return [token];
+}
+
+function collectClassName(value: TUnoClassValue, result: string[]): void {
+  if (!value) {
+    return;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    for (const token of splitClassNames(String(value))) {
+      result.push(...expandVariantGroup(token));
+    }
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectClassName(item, result);
+    }
+    return;
+  }
+
+  for (const [className, enabled] of Object.entries(value)) {
+    if (enabled) {
+      collectClassName(className, result);
+    }
+  }
+}
+
+export function collectClassNames({
+  values,
+}: ICollectClassNamesParams): string[] {
+  const result: string[] = [];
+
+  for (const value of values) {
+    collectClassName(value, result);
+  }
+
+  return result;
+}

package/utils/mergeUno/index.ts

@@ -0,0 +1,32 @@
+import { mergeClassValues } from './mergeClassValues';
+import type {
+  IUnoClassMergerOptions,
+  TUnoClassMerger,
+  TUnoClassValue,
+} from './types';
+
+export type {
+  IUnoClassDictionary,
+  IUnoClassMergerOptions,
+  IUnoConflictResolverParams,
+  TUnoClassMerger,
+  TUnoClassValue,
+  TUnoConflictResolver,
+} from './types';
+
+export function createUnoClassMerger(
+  options: IUnoClassMergerOptions = {},
+): TUnoClassMerger {
+  return (...values: TUnoClassValue[]) => {
+    return mergeClassValues({
+      values,
+      resolveConflictKeys: options.resolveConflictKeys,
+    });
+  };
+}
+
+export function mergeUno(...values: TUnoClassValue[]): string {
+  return mergeClassValues({
+    values,
+  });
+}

package/utils/mergeUno/mergeClassValues.ts

@@ -0,0 +1,86 @@
+import { classifyUtility } from './classifyUtility';
+import { collectClassNames } from './collectClassNames';
+import { splitVariantScope } from './splitVariantScope';
+import type {
+  IClassEntry,
+  TUnoClassValue,
+  TUnoConflictResolver,
+} from './types';
+
+interface ICreateEntryParams {
+  readonly token: string;
+  readonly resolveConflictKeys?: TUnoConflictResolver;
+}
+
+interface IMergeClassValuesParams {
+  readonly values: readonly TUnoClassValue[];
+  readonly resolveConflictKeys?: TUnoConflictResolver;
+}
+
+function createEntry({
+  token,
+  resolveConflictKeys,
+}: ICreateEntryParams): IClassEntry {
+  const { base: rawBase, scope } = splitVariantScope({
+    token,
+  });
+  const important = rawBase.startsWith('!') || rawBase.endsWith('!');
+  const base = rawBase.replace(/^!/, '').replace(/!$/, '');
+
+  return {
+    important,
+    keys:
+      resolveConflictKeys?.({
+        utility: base,
+      }) ??
+      classifyUtility({
+        rawUtility: base,
+      }),
+    scope,
+    token,
+  };
+}
+
+/**
+ * Merges common UnoCSS atomic utilities using last-class-wins semantics.
+ *
+ * Unknown utilities and compound shortcuts are preserved unless they are exact
+ * duplicates. UnoCSS permits arbitrary user-defined rules, so deleting an
+ * unknown class cannot be proven safe without the active configuration.
+ */
+export function mergeClassValues({
+  values,
+  resolveConflictKeys,
+}: IMergeClassValuesParams): string {
+  const tokens = collectClassNames({
+    values,
+  });
+  const entries: Array<IClassEntry | null> = [];
+
+  for (const token of tokens) {
+    const next = createEntry({
+      token,
+      resolveConflictKeys,
+    });
+
+    for (let index = 0; index < entries.length; index += 1) {
+      const previous = entries[index];
+
+      if (
+        previous &&
+        previous.scope === next.scope &&
+        previous.important === next.important &&
+        previous.keys.every((key) => next.keys.includes(key))
+      ) {
+        entries[index] = null;
+      }
+    }
+
+    entries.push(next);
+  }
+
+  return entries
+    .filter((entry): entry is IClassEntry => entry !== null)
+    .map((entry) => entry.token)
+    .join(' ');
+}

package/utils/mergeUno/splitVariantScope.ts

@@ -0,0 +1,44 @@
+interface ISplitVariantScopeParams {
+  readonly token: string;
+}
+
+interface IVariantScope {
+  readonly base: string;
+  readonly scope: string;
+}
+
+export function splitVariantScope({
+  token,
+}: ISplitVariantScopeParams): IVariantScope {
+  let squareDepth = 0;
+  let roundDepth = 0;
+  let lastSeparator = -1;
+
+  for (let index = 0; index < token.length; index += 1) {
+    const character = token[index];
+
+    if (character === '[') {
+      squareDepth += 1;
+    } else if (character === ']') {
+      squareDepth -= 1;
+    } else if (character === '(') {
+      roundDepth += 1;
+    } else if (character === ')') {
+      roundDepth -= 1;
+    } else if (character === ':' && squareDepth === 0 && roundDepth === 0) {
+      lastSeparator = index;
+    }
+  }
+
+  if (lastSeparator < 0) {
+    return {
+      base: token,
+      scope: '',
+    };
+  }
+
+  return {
+    base: token.slice(lastSeparator + 1),
+    scope: token.slice(0, lastSeparator + 1),
+  };
+}

package/utils/mergeUno/types.ts

@@ -0,0 +1,39 @@
+export type TUnoClassValue =
+  | string
+  | number
+  | false
+  | null
+  | undefined
+  | readonly TUnoClassValue[]
+  | IUnoClassDictionary;
+
+export interface IUnoClassDictionary {
+  readonly [className: string]: unknown;
+}
+
+export interface IUnoConflictResolverParams {
+  readonly utility: string;
+}
+
+export type TUnoConflictResolver = (
+  params: IUnoConflictResolverParams,
+) => readonly string[] | null | undefined;
+
+export type TUnoClassMerger = (...values: TUnoClassValue[]) => string;
+
+export type TUtilityConflictKeys = readonly string[] | null;
+
+export interface IUnoClassMergerOptions {
+  readonly resolveConflictKeys?: TUnoConflictResolver;
+}
+
+export interface IClassEntry {
+  readonly important: boolean;
+  readonly keys: readonly string[];
+  readonly scope: string;
+  readonly token: string;
+}
+
+export interface IClassifyUtilityParams {
+  readonly utility: string;
+}

package/utils/useMergedUnoAttrs.ts

@@ -0,0 +1,43 @@
+import { useAttrs } from 'vue';
+
+import { mergeUno } from './mergeUno';
+import type { TUnoClassValue } from './mergeUno/types';
+
+type TUnoClassSource = TUnoClassValue | (() => TUnoClassValue);
+
+interface IUseMergedUnoAttrsResult {
+  readonly className: () => string;
+  readonly forwardedAttrs: () => Record<string, unknown>;
+}
+
+/**
+ * Merges a component's default UnoCSS classes with its consumer-provided class.
+ * The original class attribute is removed from the forwarded attributes so Vue
+ * cannot append it a second time after conflict resolution.
+ */
+export function useMergedUnoAttrs(
+  defaultClasses: TUnoClassSource,
+): IUseMergedUnoAttrsResult {
+  const attrs = useAttrs();
+
+  const className = (): string => {
+    const resolvedDefaults =
+      typeof defaultClasses === 'function' ? defaultClasses() : defaultClasses;
+
+    return mergeUno(resolvedDefaults, attrs.class as TUnoClassValue);
+  };
+
+  const forwardedAttrs = (): Record<string, unknown> => {
+    const result = {
+      ...attrs,
+    };
+
+    delete result.class;
+    return result;
+  };
+
+  return {
+    className,
+    forwardedAttrs,
+  };
+}