Styling your components

Styling components is quite simple; you can either use standard CSS or CSS Modules.

CSS

component.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

// Just import your styles
import './styles.css'

const App = Component('my-component', () => {
  return  () => html`<button>Hello World</button>`;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

styles.css

CSS Modules

component.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

// Just import your styles, reminding of naming it with *.module.css
import styles './styles.module.css'

const App = Component('my-component', () => {
  return  () => html`<button class='${styles.button}'>Hello World</button>`;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

styles.module.css

Do not forget to name your CSS Module files with the pattern *.module.css, otherwise your styles will be handled as traditional CSS styling

Going further

These are the basics. However, since VistaJS is powered by Vite, you can extend it by adding your own styling configurations. Feel free to reach out to Vite for more details.