new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Bun · Bundler · all subjects

css/modules

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CSS Modules support overview

Bun's bundler supports CSS modules with automatic detection of .module.css files (no configuration needed), composition using the composes property, importing CSS modules into JSX/TSX, and warnings/errors for invalid usages. A CSS module is a CSS file where all class names and animations are scoped to the file to avoid class name collisions.

CSS Modules class name scoping

Bun's bundler transforms locally scoped class names in CSS modules into unique identifiers. Each .module.css file gets its own scope, so class names don't collide across files.

CSS Modules composition with composes

CSS modules can compose class selectors together to reuse style rules across multiple classes using the composes property. Two rules apply: (1) A composes property must come before any regular CSS properties or declarations, (2) You can only use composes on a simple selector with a single class name (not ID selectors or multiple selectors).

CSS Modules composition from separate files

CSS modules can compose classes from separate CSS module files using the syntax: composes: classname from "./path/to/file.module.css". When composing classes from separate files, they should not contain the same properties, as composing classes from separate files with conflicting properties is undefined behavior according to the CSS module spec.

CSS Modules example with multiple files

Example showing CSS Modules composition across files. In background.module.css: .background { background-color: blue; }. In styles.module.css: .button { composes: background from "./background.module.css"; color: red; }. In app.tsx: import styles from "./styles.module.css"; export default function App() { return <button className={styles.button}>Red button!</button>; }

CSS Modules basic example

Example showing basic CSS Modules usage. Create styles.module.css: .button { color: red; }. Import in app.tsx: import styles from "./styles.module.css"; export default function App() { return <button className={styles.button}>Red button!</button>; }. Importing a CSS module gives you an object where each class name maps to its unique identifier, e.g., { button: "button_123" }.

Give your agent this brain