@pzeta/utils
Types

MFETailwindStyles

Estensione tema Tailwind e classi CSS custom esposte dal MFE. Colori, spacing, fontFamily, fontSize, screens.

Contratto

interface MFETailwindStyles {
  /** Classi CSS custom già compilate (string CSS) */
  customClasses?: string

  /** Configurazione estensione Tailwind theme */
  themeExtension?: {
    /** Colori custom (es: { primary: { 500: '#1e40af' } }) */
    colors?: Record<string, Record<string, string>>

    /** Spacing custom */
    spacing?: Record<string, string>

    /** Font family custom */
    fontFamily?: Record<string, string[]>

    /** Font size custom */
    fontSize?: Record<string, string>

    /** Screen breakpoints custom */
    screens?: Record<string, string>
  }
}

Quando usarlo

Quando un MFE ha bisogno di estendere il tema Tailwind globale della shell o iniettare classi CSS custom. Tipico per:

  • palette di brand specifica di un modulo
  • spacing/font-size custom per dashboard di settore
  • breakpoint aggiuntivi per widget responsive

Campi

customClasses

Stringa CSS compilata (già processata da Tailwind o scritta a mano). Viene iniettata via injectCustomStyles con sanitizzazione preventiva.

const styles: MFETailwindStyles = {
  customClasses: `
    .crm-card { @apply rounded-lg shadow-md p-4 bg-white dark:bg-slate-800; }
    .crm-badge--hot { @apply bg-red-100 text-red-800; }
  `,
}
Il CSS viene validato contro pattern pericolosi (url(), @import, expression(), behavior:, javascript:, -moz-binding). Vedi sanitizeCss.

themeExtension.colors

Struttura: Record<colorName, Record<shade, hex>>.

{
  themeExtension: {
    colors: {
      brand: {
        50:  '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        900: '#1e3a8a',
      },
      accent: {
        500: '#f59e0b',
      },
    },
  },
}

Risultato in Tailwind: bg-brand-500, text-brand-900, border-accent-500, ecc.

themeExtension.spacing

{
  themeExtension: {
    spacing: {
      '18': '4.5rem',
      'sidebar': '280px',
      'header': '64px',
    },
  },
}

Risultato: w-18, h-sidebar, mt-header.

themeExtension.fontFamily

{
  themeExtension: {
    fontFamily: {
      display: ['Inter', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    },
  },
}

Risultato: font-display, font-mono.

themeExtension.fontSize

{
  themeExtension: {
    fontSize: {
      'metric-xl': '3.5rem',
      'compact': '0.6875rem',
    },
  },
}

themeExtension.screens

Breakpoint custom per sm:/md:/lg:/...:

{
  themeExtension: {
    screens: {
      '3xl': '1920px',
      'tall': { raw: '(min-height: 800px)' },
    },
  },
}

Merge nella shell

La shell aggrega le estensioni di tutti i MFE con mergeTailwindConfig:

import { mergeTailwindConfig } from '@pzeta/mfe-contracts/helpers'

let tailwindConfig = baseTailwindConfig

for (const manifest of manifests) {
  if (manifest.tailwindStyles?.themeExtension) {
    tailwindConfig = mergeTailwindConfig(
      tailwindConfig,
      manifest.tailwindStyles.themeExtension,
    )
  }
}

Il merge è deep (fino a 4 livelli) per oggetti plain; array e primitivi sovrascrivono.

Estensione dell'interfaccia

Per aggiungere chiavi non tipizzate (es. borderRadius, boxShadow):

import type { MFETailwindStyles } from '@pzeta/mfe-contracts'

interface MyStyles extends MFETailwindStyles {
  themeExtension?: MFETailwindStyles['themeExtension'] & {
    borderRadius?: Record<string, string>
    boxShadow?: Record<string, string>
  }
}

Tipi correlati

MFERoute

Definizione di una rotta esposta dal microfrontend. Path, label, icon, permessi, ruoli, sezione (app/settings), order, badge.

MFETheme

Gestione tema condiviso tra shell e microfrontend. Stato reattivo isDark, mode light/dark/system e API setTheme/toggleTheme.