Enlace con producción

Cómo se garantiza que lo que está en producción está en el sistema, y que el sistema no miente.

El sistema vive en un repo distinto del producto. El enlace entre los dos lo hace npx ds sync. Lee lo publicado: origin/<produccion.rama> (main por defecto) del repo de producción (produccion.repo en system.json), no la rama que tenga la copia local. Con --local lee la copia tal cual, cambios sin commit incluidos.

Qué hace el sync

  1. Instantánea. Copia las hojas de estilo de cada superficie (y sus fuentes e imágenes) a produccion/. Los ejemplos en vivo cargan esa copia: lo que ves es el CSS de producción, no una recreación.
  2. Tokens. Lee las propiedades personalizadas de :root y las guarda en tokens.produccion.json. Las fichas de tokens muestran esos valores: nunca se escriben a mano.
  3. Huellas. Para cada ficha con fuentes, reúne las reglas CSS de sus clases (o el archivo entero si es un componente de código) y calcula una huella. La compara con la última revisada en produccion.lock.json.
  4. Clases inventadas. Comprueba que cada clase usada en los ejemplos existe en producción o en el CSS experimental.
  5. Cobertura. Lista las clases y los tokens de producción que ninguna ficha documenta. Es la lista de tareas pendientes del sistema.
  6. Cambios sin commit. Avisa si la instantánea incluye archivos de producción todavía sin commit.

Comandos

bash
npx ds sync                              # actualiza instantánea, tokens, huellas e informe
npx ds sync --accept componentes/boton   # tras revisar la ficha, guarda su huella
npx ds check                             # falla si algo cambió sin revisar o no existe, si falta una hoja
                                         # de estilos o si los colores de una ficha no cuadran

Declarar fuentes en una ficha

yaml
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing                      # superficie definida en system.json
        fuente: public/site/styles.css   # ruta en el repo de producción
        clases: [button, button-outline] # reglas que forman la huella
      - id: portal
        fuente: src/components/ui/button.tsx   # sin clases: la huella es el archivo

Reglas

  • Una ficha en producción sin fuentes no se puede verificar; el sync lo avisa en componentes y patrones.
  • Solo se acepta una huella después de leer el cambio y actualizar la ficha. Aceptar sin revisar rompe el enlace.
  • Cuando producción cambia por una decisión de diseño, primero se actualiza la ficha y después se acepta.
  • check:sync debe pasar antes de publicar el sistema.