Svelte with Vite

Set up

1. Turn on the preprocessor

   Svelte compiles <style lang="scss"> only through a preprocessor. The Vite Svelte template includes this file; check that preprocess is set. Without it, apply() reaches the Svelte compiler as plain CSS and no rule is written.

   svelte.config.js

   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
   
   /** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
   export default {
     preprocess: vitePreprocess(),
   }

2. Write the configuration once

   A partial that forwards @nuvoui/core/mixins with your settings. The mixins entry has the same API as @nuvoui/core (apply(), every mixin, token(), with()) and outputs no CSS.

   src/styles/_nuvo.scss

   @forward "@nuvoui/core/mixins" with ($brand: #4361ee, $generate-utility-classes: true);

3. Create the global stylesheet

   It emits the tokens, the reset, the base styles and the utility classes with your configuration. @use "nuvo" comes first, so core loads with the configured brand. Nothing else in the app loads @nuvoui/core.

   src/styles/global.scss

   @use "nuvo";
   @use "@nuvoui/core";

4. Import it in the entry

   Imported once in main.js, it applies to the whole app.

   src/main.js

   import { mount } from 'svelte'
   import './styles/global.scss'
   import App from './App.svelte'
   
   const app = mount(App, {
     target: document.getElementById('app'),
   })
   
   export default app

With utility classes

Classes go straight into the markup.

<script>
  import Card from './lib/Card.svelte'
</script>

<main class="grid gap-4 p-6">
  <div class="flex between x-center gap-3 p-4 bg-surface border rounded-md">
    <span class="font-semibold">Invoices</span>
    <span class="bg-success-subtle text-success text-xs rounded-full px-2 py-1">Paid</span>
  </div>
  <Card title="Quarterly report">Revenue and churn for July to September.</Card>
</main>

With apply()

Each component loads the partial and writes only its own rules. Numbers are configuration keys (p(4) is var(--nu-space-4)), and modifiers come after the utility: state and breakpoint in either order. The mixins entry adds no selectors of its own, so the build prints no css_unused_selector warnings and needs no warning filter.

<script>
  let { title, children } = $props()
</script>

<article class="card">
  <h2 class="title">{title}</h2>
  <p class="text">{@render children()}</p>
</article>

<style lang="scss">
@use "../styles/nuvo" as *;

.card {
    @include apply(p(4), bg(surface), rounded(md), shadow(md) hover, p(6) md);
}

.title {
    @include apply(m(0), font-size(lg), font(semibold));
}

.text {
    @include apply(mt(2), mb(0), text-color(muted));
}
</style>

Dark mode

With no data-theme on <html>, the tokens follow the operating system setting. Set data-theme="dark" or data-theme="light" to choose one, and change it from a script to switch at runtime: document.documentElement.dataset.theme = "dark". Any element can carry data-theme to theme only its own subtree. Every class and every apply() rule reads the tokens, so nothing else changes.

<html lang="en" data-theme="dark">

What gets emitted

The global stylesheet holds the tokens, the light and dark themes, the reset, the base styles, the tooltips, the @property registrations and, with $generate-utility-classes: true, every utility class: about 1 MB minified, 92 KB gzipped. Without the classes it is about 42 KB. Load it on every page, because the tokens live there.

The style block of Card.svelte compiles to five rules and nothing else: .card.svelte-..., its hover, its md padding, the title and the text. The tokens are not repeated per component, and a component cannot reset the configured brand.