CSS Modules support in Astro - Step-by-Step Execution

Concept Flow - CSS Modules support

Write CSS Module file

↓

Import CSS Module in Astro component

↓

Use imported styles as object keys

↓

Astro compiles and scopes styles

↓

Render HTML with scoped class names

↓

Browser applies styles only to this component

This flow shows how CSS Modules are written, imported, used in Astro components, compiled with scoped class names, and applied only to that component.

Execution Sample

Astro

/* styles.module.css */
.title {
  color: blue;
}

---
---
<script>
import styles from './styles.module.css';
</script>

<h1 class={styles.title}>Hello Astro</h1>

This Astro component imports a CSS Module and applies a scoped class to an h1 element.

Execution Table

Step	Action	Input/Code	Result/Output
1	Read CSS Module file	.title { color: blue; }	CSS class '.title' defined
2	Import CSS Module	import styles from './styles.module.css';	styles = { title: 'styles_title__abc123' }
3	Use styles.title in class attribute	<h1 class={styles.title}>	h1 class='styles_title__abc123'
4	Astro compiles component	Compile Astro + CSS Module	Scoped CSS applied with unique class name
5	Render HTML in browser	<h1 class='styles_title__abc123'>Hello Astro</h1>	Text styled with blue color
6	Browser applies styles	CSS targets '.styles_title__abc123'	h1 text appears blue
7	End	No more steps	Component styled with scoped CSS

💡 All steps complete; CSS Module styles scoped and applied to component.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
styles	undefined	{ title: 'styles_title__abc123' }	{ title: 'styles_title__abc123' }	{ title: 'styles_title__abc123' }
h1.class	undefined	undefined	'styles_title__abc123'	'styles_title__abc123'

Key Moments - 2 Insights

Why does the class name in the HTML look different from the CSS file?

Because CSS Modules rename class names to unique scoped names (like 'styles_title__abc123') to avoid conflicts, as shown in execution_table step 2 and 3.

Can I use normal CSS class names directly without importing?

No, with CSS Modules you must import the styles object and use its keys to get the scoped class names, as shown in step 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'styles.title' after step 2?

A 'title'

B 'styles_title__abc123'

C '.title'

D undefined

💡 Hint

Check the 'Result/Output' column in step 2 of the execution_table.

At which step does the HTML element get the scoped class name applied?

A Step 5

B Step 1

C Step 3

D Step 7

💡 Hint

Look for when the h1 class attribute is set in the execution_table.

If you change the CSS class name in the module file from '.title' to '.header', what must you also change in the Astro component?

A Change 'styles.title' to 'styles.header'

B No changes needed

C Change import path

D Change HTML tag from h1 to header

💡 Hint

Refer to how styles keys correspond to CSS class names in variable_tracker and execution_table step 2.

Concept Snapshot

CSS Modules support in Astro:
- Write CSS in a .module.css file
- Import styles object in Astro component
- Use styles.className for scoped classes
- Astro compiles with unique class names
- Styles apply only to this component
- Prevents global CSS conflicts

Full Transcript

This visual execution shows how CSS Modules work in Astro. First, you write CSS in a file ending with .module.css. Then you import this CSS as an object in your Astro component. Each CSS class becomes a key in this object with a unique scoped name. When you use styles.className in your HTML, Astro replaces it with the scoped class name. The browser then applies these styles only to this component, avoiding conflicts with other styles. The execution table traces each step from reading the CSS file, importing styles, applying classes, compiling, and rendering. Variable tracking shows how the styles object and class attributes change. Key moments clarify why class names look different and why you must import styles. The quiz tests understanding of these steps and changes needed if CSS class names change.