🌍 Global styling
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.

You can combine local and global selectors with the global keyword.

Here, `.someLocalClass` remains local, but its style adapts to a global state.

🛡️ Type Safety
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.

A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.

🪄 Cascade Layers Tip
Wrap all component styles in the `components` cascade layer.

Anything outside cascade layers has higher specificity.

This makes it easier to override component styles from the outside when needed.

🎬 Importing animations

CSS Modules let you import from other `.module.css` files — even keyframes!

The import syntax allows for renaming the keyframe animations - or use them as-is.

Now you can use the animation as if it were local.

🔄 Re-using classes with `composes`
You can “spread” one class into another using `composes`.

Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.

✅ The solution: Use intersection with {}!

This magical syntax gives you BOTH:

Autocomplete for "apple" and "banana"
Ability to pass any string value

How does it work? 🪄

❌ The problem: Adding `string` to your union kills autocomplete

This happens because TypeScript widens to the most general type.

Why did I think of this meme? 😅