Scoped styles

How a <style> block in a .tsrx file becomes CSS that matches only the elements of that file.

Last page, Badge rendered <strong class="badge">. Now we give that class some CSS.

Two files both use the class .title. With a plain stylesheet, one rule paints both. Markless stops that at build time.

Put a <style> block inside a component’s markup. The compiler makes a class name from the file’s path, such as mk-1iop1i3. It adds that class to each selector in the block and to every element the file renders.

Click Plain stylesheet, then Style block in Card.tsrx.

Which headings does Card's rule paint red?

Switch between Plain stylesheet and Style block in Card.tsrx. Watch the Badge heading.

The page2 red

Page

Card.tsrx

Card title

Badge.tsrx

Badge title

What the page gets

/* CSS */
.title { color: red; }

/* HTML */
<article>
  <h2 class="title">Card title</h2>
</article>
<h2 class="title">Badge title</h2>

Your code: three files

// styles.css.title { color: red; } (matches every .title) // Card.tsrxexport default function Card() @{  <article>    <h2 class="title">Card title</h2> (red)  </article>} // Badge.tsrxexport default function Badge() @{  <h2 class="title">Badge title</h2> (red)}

What Markless did

Headings painted red2

Class added to Card.tsrx elementsnono style block yet

noteA plain stylesheet is not tied to a file. Its rule matches every .title on the page.

Simplified. The class name comes from the path src/Card.tsrx with the compiler's own function. Your files get their own class names.

Notice that the scoped rule paints only the h2 in Card.tsrx.

Write a style block

import { state } from '@markless/core';

export default function Counter() @{
	let count = state(0);

	<section class="card">
		<style>
			.card > h2 { color: rebeccapurple; }
			@media (min-width: 40rem) { h2 { font-size: 2rem; } }
		</style>
		<h2>Count {count}</h2>
		<button onClick={() => count++}>+1</button>
	</section>
}

For src/Counter.tsrx, the compiler turns that block into this CSS:

.card > h2.mk-1iop1i3 { color: rebeccapurple; }
@media (min-width: 40rem) { h2.mk-1iop1i3 { font-size: 2rem; } }

The <section>, <h2>, and <button> each get the class mk-1iop1i3 too. Rules inside @media get the class. @keyframes stay as you wrote them.

If you pass a class prop to a child component, it carries your file’s class. So your rules reach the element the child puts that class on.

Coming from another framework?

This works like scoped styles in single-file components. Each file gets one class, added to selectors and elements at build time.

Next: count sits in every example so far. Where does it come from? State →