Styles

The CSS for styling a component's elements is declared with a @style block. There can only be one @style block per component:

export default function Component() {
	@render {
		<p class="extravagant">Hello!</p>
	}

	@style {
		.extravagant {
			font-size: x-large;
			color: magenta;
		}
	}
}

The styles in the style block are scoped to the elements in the component so that they don't affect elements in other components. Behind the scenes, each rule is compiled to a hashed class (e.g. torp-a1b2c3) which is added to the component's elements.

Playground