La documentación de Vanilla-Extract dice sobre los rociados (sección de propiedades: tercer párrafo) que "También puede usar temas de extracto de vainilla para configurar valores temáticos" , mi objetivo es usar contratos que he definido previamente y combinarlos con rociados para mover todos los estilos que ahora se cargan en el lado del cliente para que se carguen en el lado del servidor mediante salpicaduras.

El problema es que los nombres de las clases se cargan en los elementos pero sin valores, este es solo el nombre de la clase en el elemento (componente Siguiente/Reaccionar) pero sin ninguna regla css.

• Objetivo: Reutilizar archivos de contratos y temas anteriores en chispas.
• Problema: Nombre de clase en elementos sin reglas css
• Archivos: contrato, chispas, componente (componente Siguiente/Reaccionar).
• ¿Cómo usar definiciones de temas a través de chispas?

 // # contract.css.ts import { createThemeContract, createTheme } from "@vanilla-extract/css"; export const contractSprinkles = createThemeContract({ colors: { brand: null, muted: null, }, }); export const themeSprinkles = createTheme(contractSprinkles, { colors: { brand: "lime", muted: "grey", }, }); // # sprinkles.css.ts import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles"; import { contractSprinkles } from "./contracts/contract-sprinkles.css"; const colorProperties = defineProperties({ conditions: { lightMode: { "@media": "(prefers-color-scheme: light)" }, darkMode: { "@media": "(prefers-color-scheme: dark)" }, }, defaultCondition: false, properties: { color: contractSprinkles.colors, }, }); export const sprinkles = createSprinkles(colorProperties); // # component (Next/React component) import { sprinkles } from "./sprinkle-style.css"; function Header() { return ( <h1 className={sprinkles({ color: { lightMode: "brand", }, })} > Fancy Title </h1> ); } // # browser <h1 class="sprinkle-style_color_brand_lightMode__atpcon0">Fancy Title</h1> // # DevTools: doesnt show any style rule nor values for brand or muted