DEV Community: Fausto95

Introducing Arvia: a design system compiler for the web

Fausto95 — Sat, 13 Jun 2026 08:14:12 +0000

Introducing Arvia

Arvia is a design system compiler. You describe your tokens, themes, and components in .arv files, and a compiler turns each one into three things before your app ever loads:

plain CSS — the kind you'd write by hand,
a typed styling API — call a function, get your class names, with autocomplete on every variant,
TypeScript types — so a bad variant is a red squiggle, not a bug in production.

The whole thing rests on one idea: styles are compiled, not computed. Because the compiler sees your entire design system up front, it can hand you typed props, catch typo'd token names, warn about dead variants, and power editor autocomplete — while the browser only ever gets static CSS and some class-name strings. Nothing styling-related runs at runtime.

The rest of this post is a tour of the language.

A quick taste

Here's a complete, working Arvia file: two tokens, a reusable focus-ring recipe, and a button with two variant dimensions.

theme {
  color {
    primary = #635bff;
    danger = #e5484d;
  }
}

recipe FocusRing {
  outline: none;
  &:focus-visible {
    outline: 2px solid color.primary;
    outline-offset: 2px;
  }
}

component Button {
  base {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    use FocusRing;
  }

  variants {
    size {
      sm { padding: 4px 12px; }
      lg { padding: 8px 20px; }
    }
    tone {
      primary { background: color.primary; color: white; }
      danger { background: color.danger; color: white; }
    }
  }

  defaults { size: sm; tone: primary; }
}

Import it and you get a plain function. Call it and you get class names back — one string per element the component styles — fully type-checked:

import { Button } from "./button.arv";

const styles = Button({ size: "lg", tone: "danger" });
// styles.root === "Button_root_0p4oom Button_size_lg_root_0p4oom Button_tone_danger_root_0p4oom"

<button className={styles.root}>Delete</button>;

Button({ size: "xl" });
//        ~~~~ Type error: '"xl"' is not assignable to '"sm" | "lg"'

One thing that's deliberately missing: there's no <Button> React component. Arvia gives you styling APIs, not UI components — you keep full control of your markup, your accessibility attributes, and your event handlers. The function does no style injection, holds no context, builds no runtime theme object. It mashes strings together. That's it.

Works with your framework

The generated JavaScript has zero dependencies, so anything that can render a class attribute can use it. There are official Vite plugins for React, Preact, and Vue, and the same .arv file feeds all of them.

React (and Preact, identically):

import { Button } from "./button.arv";

export function DeleteButton() {
  const styles = Button({ tone: "danger" });
  return <button className={styles.root}>Delete</button>;
}

Vue, in a <script setup> single-file component:

<script setup lang="ts">
import { Button } from "./button.arv";
const styles = Button({ tone: "danger" });
</script>

<template>
  <button :class="styles.root">Delete</button>
</template>

And because the output is just strings, it's happy in Svelte, Solid, Lit, or a server-rendered template too — there's no React-specific magic to leave behind.

Multi-part components work the same way, with a class per slot:

component Card {
  slots { root {} media {} body {} }

  base {
    border-radius: 12px;
    &:hover { media { transform: scale(1.02); } }
  }
}

const card = Card();
// card.root, card.media, card.body — one class string each

That &:hover { media { … } } is the group-hover pattern, by the way — hovering the card scales the media slot, and it compiles down to a plain descendant selector. No extra "group" class threaded through your markup.

More than a token bag

Tokens and variants are the start. The language also covers the parts where design systems usually get messy:

Compound variants — rules that only kick in when several variants combine (size: sm and tone: danger).
Theme modes — declare modes: light | dark;, write @dark { … } overrides, and tokens compile to CSS variables that flip with data-arvia-theme or the OS setting.
Responsive and container variants — drive a variant from a breakpoint or a container's width.
States, recipes, keyframes, global resets, standalone style utilities, and component-scoped tokens — each one is a real construct, not a workaround.

And everything gets checked. Fat-finger color.primry and the compiler stops you, with a "did you mean color.primary?", before a single line of CSS is written.

Where it's at

Arvia is free and open source — docs, playground, and everything else live at arvia.dev:

Vite plugins for React, Preact, and Vue, with hot reload.
A real editor experience. The arviahq.arvia VS Code extension ships a language server: hover a token to see its value in each mode (and MDN docs when you hover a CSS property), jump to a token's definition across files, rename a token everywhere at once, see color swatches and inline hints showing resolved values, and get diagnostics with one-click fixes.
Types with no files on disk. arvia-tsc and the bundled TypeScript plugin give .arv imports real types through virtual declarations — no generated .d.ts junk in your tree.
Generators for Storybook stories and token-catalog docs, straight from your components.

Give it a spin

The playground compiles .arv right in your browser — type, and watch the preview, the CSS, and the .d.ts update live. Everything above can be pasted in.

When you're ready for a real project:

npm install -D @arviahq/vite-plugin-react

Then head to Installation, or take the full tour.

Singly Linked List(Lista Interligada Unica) em JavaScript

Fausto95 — Fri, 20 Sep 2019 09:34:49 +0000

Linked List ou em português Lista Interligada é uma estrutura de dados linear. Cada elemento(Node ou em português Nó) da lista contém dois elementos - os dados e a referência para o próximo nó. Um dos maiores potenciais da Lista Interligada é que o seu tamanho pode variar, ao contrário de um Array.

A referência é simplesmente o endereço físico de onde encontra-se armazenado o próximo nó na RAM.

Existem 4 tipos de Listas Interligadas, que são:

Singly Linked List: Neste tipo de Lista Interligada, cada nó armazena os dados e a referência para o próximo nó.
Circular Singly Linked List: Neste, a única diferença é que o último nó da lista aponta sempre para o primeiro como referência.
Doubly Linked List: Neste, cada nó contém três elementos, a referência do nó anterior, os dados, e a referência do próximo nó da lista.
Circular Doubly Linked List: Em relação ao tipo anterior, neste, a única diferença é que o último nó da lista aponta sempre para o primeiro como referência.

Propriedades da Lista Interligada:

Node(Nó): Contém dados e referência para o próximo nó.
Head: Contém referência do primeiro nó da lista.
Tail: Contém referência do último nó da lista.
Length: Número exacto de nós na lista.

Neste artigo, veremos a implementação de uma Singly Linked List.

Na ilustração acima, podemos ver que cada nó tem uma referência. Em uma Lista Interligada Simples, o último nó da fila tem a referência à null pois o mesmo não aponta para nenhum outro nó.

Criação de um Nó

class Node {
  constructor(value) {
    this.value = value;
    this.next = next;
  }
}

Um nó é nada mais do que um objecto com duas propriedades, value que armzenaráqualquer tipo de dados que queiramos, e next que armazenará a referência para o próximo nó. Para isto, criamos um nó usando uma class em Javascript.

Criando a Lista

class ListaInterligada {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
}

A recém lista criada, contém as três propriedas acima listadas.

Vamos agora criar a função responsável por adicionar novos Nós à lista.

class ListaInterligada {
    // código anterior ocultado aqui
  add(value) {
    let node = new Node(value); // instanciamos um novo Nó
    let currentNode = this.head;

    // Caso a lista esteja vazia
    // adicionaremos o novo Nó no topo dela
    if (!currentNode) {
      this.head = node;
      this.tail = node;
      this.length++;
      return node;
    } else {
      // Caso a lista contenha elementos
      // adicionaremos o novo Nó no final da mesma
      while (currentNode.next) {
        currentNode = currentNode.next
      }
      currentNode.next = node;
      this.tail = node;
      this.length++;
      return node;
    }
  }
}

Instanciando a Lista Interligada e adicionando Nós à mesma

let lista = new ListaInterligada();
lista.add(5);
lista.add(9);
lista.add(15);

console.log(lista)
/*
{
  "head": {
    "value": 5,
    "next": {
      "value": 9,
      "next": {
        "value": 15,
        "next": null
      }
    }
  },
  "tail": {
    "value": 15,
    "next": null
  },
  "length": 3
}
*/

Ao imprimirmos a lista no console, podemos ver que ela contém três Nós e todos eles estão ligados entre si.

Estamos quase la, e se agora quiséssemos remover um dos Nós da lista?

Pois então, isto é completamente possível.

Removendo Nós da Lista

class ListaInterligada {
  // códigos anteriores ocultados aqui
  remove(location) {
    if (location === 0) {
      // caso queiramos remover o primeiro elemento
      this.head = this.head.next;
      this.length--;
      if (this.length === 0) {
        // e caso não haja mais elementos na lista
        this.tail = null;
      }
    }
    // caso o indice seja maior que o número de elementos na lista
    // removeremos o último elemento da mesma
    else if (location >= this.length) {
      let currentNode = this.head;
      for (let i = 0; i < this.length - 1; i++) {
        currentNode = currentNode.next; // currentNode sera o penúltimo elemento da lista
      }
      // caso este seja o último elemento da lista
      if (currentNode === this.head) {
        this.tail = this.head = null;
        this.length--;
        return;
      } else {
        currentNode.next = null;
        this.tail = currentNode;
        this.length--;
      }
    } else {
      // caso queiramos remover um Nó que não seja o último nem o primeiro
      let currentNode = this.head;
      for (let i = 0; i < location - 1; i++) {
        // atravessamos a lista até encontrarmos o elemento a ser removido
        currentNode = currentNode.next;
      }
      currentNode.next = currentNode.next.next; // removemos o elemento desejado
      this.tail = currentNode;
      this.length--;
    }
  }
}

Note que ao removermos nós da lista, estamos simplesmente a cortar o ligação que eles têm entre si, em seguida, o Garbage Collector(em português Coletor de Lixo) fará uma limpeza e então apagará da RAM os nós que não tenham nenhuma ligação.

Iterando a Lista

class ListaInterligada {
  // códigos anteriores ocultados aqui
  traverse() {
    let currentNode = this.head;
    for (let i = 0; i < this.length; i++) {
      console.log(currentNode.value);
      currentNode = currentNode.next;
    }
  }
}

No código acima, iteramos na lista e para cada nó presente na mesma, imprimimos o seu valor. Note que a propriedade this.length corresponde ao número de nós que a lista contém!
A mesma lógica aplicada no código acima, pode ser utilizada para implementar uma função para procurar nós específicos na lista.