bun-types 1.3.2-canary.20251105T140650 → 1.3.2

package/docs/bundler/{css.md → css.mdx}

@@ -1,3 +1,8 @@
+---
+title: CSS
+description: Bun's bundler has built-in support for CSS with modern features
+---
+
 Bun's bundler has built-in support for CSS with the following features:
 
 - Transpiling modern/future features to work on all browsers (including vendor prefixing)
@@ -9,11 +14,11 @@ Bun's bundler has built-in support for CSS with the following features:
 
 Bun's CSS bundler lets you use modern/future CSS features without having to worry about browser compatibility — all thanks to its transpiling and vendor prefixing features which are enabled by default.
 
-Bun's CSS parser and bundler is a direct Rust → Zig port of [LightningCSS](https://lightningcss.dev/), with a bundling approach inspired by esbuild. The transpiler converts modern CSS syntax into backwards-compatible equivalents that work across browsers.
+Bun's CSS parser and bundler is a direct Rust → Zig port of LightningCSS, with a bundling approach inspired by esbuild. The transpiler converts modern CSS syntax into backwards-compatible equivalents that work across browsers.
 
-A huge thanks goes to the amazing work from the authors of [LightningCSS](https://lightningcss.dev/) and [esbuild](https://esbuild.github.io/).
+<Note>A huge thanks goes to the amazing work from the authors of LightningCSS and esbuild.</Note>
 
-### Browser Compatibility
+## Browser Compatibility
 
 By default, Bun's CSS bundler targets the following browsers:
 
@@ -23,13 +28,13 @@ By default, Bun's CSS bundler targets the following browsers:
 - Chrome 87+
 - Safari 14+
 
-### Syntax Lowering
+## Syntax Lowering
 
-#### Nesting
+### Nesting
 
 The CSS Nesting specification allows you to write more concise and intuitive stylesheets by nesting selectors inside one another. Instead of repeating parent selectors across your CSS file, you can write child styles directly within their parent blocks.
 
-```css
+```css title="styles.css" icon="file-code"
 /* With nesting */
 .card {
   background: white;
@@ -48,7 +53,7 @@ The CSS Nesting specification allows you to write more concise and intuitive sty
 
 Bun's CSS bundler automatically converts this nested syntax into traditional flat CSS that works in all browsers:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Compiled output */
 .card {
   background: white;
@@ -67,7 +72,7 @@ Bun's CSS bundler automatically converts this nested syntax into traditional fla
 
 You can also nest media queries and other at-rules inside selectors, eliminating the need to repeat selector patterns:
 
-```css
+```css title="styles.css" icon="file-code"
 .responsive-element {
   display: block;
 
@@ -79,7 +84,7 @@ You can also nest media queries and other at-rules inside selectors, eliminating
 
 This compiles to:
 
-```css
+```css title="styles.css" icon="file-code"
 .responsive-element {
   display: block;
 }
@@ -91,11 +96,11 @@ This compiles to:
 }
 ```
 
-#### Color mix
+### Color mix
 
 The `color-mix()` function gives you an easy way to blend two colors together according to a specified ratio in a chosen color space. This powerful feature lets you create color variations without manually calculating the resulting values.
 
-```css
+```css title="styles.css" icon="file-code"
 .button {
   /* Mix blue and red in the RGB color space with a 30/70 proportion */
   background-color: color-mix(in srgb, blue 30%, red);
@@ -109,7 +114,7 @@ The `color-mix()` function gives you an easy way to blend two colors together ac
 
 Bun's CSS bundler evaluates these color mixes at build time when all color values are known (not CSS variables), generating static color values that work in all browsers:
 
-```css
+```css title="styles.css" icon="file-code"
 .button {
   /* Computed to the exact resulting color */
   background-color: #b31a1a;
@@ -122,11 +127,11 @@ Bun's CSS bundler evaluates these color mixes at build time when all color value
 
 This feature is particularly useful for creating color systems with programmatically derived shades, tints, and accents without needing preprocessors or custom tooling.
 
-#### Relative colors
+### Relative colors
 
 CSS now allows you to modify individual components of a color using relative color syntax. This powerful feature lets you create color variations by adjusting specific attributes like lightness, saturation, or individual channels without having to recalculate the entire color.
 
-```css
+```css title="styles.css" icon="file-code"
 .theme-color {
   /* Start with a base color and increase lightness by 15% */
   --accent: lch(from purple calc(l + 15%) c h);
@@ -147,27 +152,23 @@ Bun's CSS bundler computes these relative color modifications at build time (whe
 
 This approach is extremely useful for theme generation, creating accessible color variants, or building color scales based on mathematical relationships instead of hard-coding each value.
 
-#### LAB colors
+### LAB colors
 
 Modern CSS supports perceptually uniform color spaces like LAB, LCH, OKLAB, and OKLCH that offer significant advantages over traditional RGB. These color spaces can represent colors outside the standard RGB gamut, resulting in more vibrant and visually consistent designs.
 
-```css
+```css title="styles.css" icon="file-code"
 .vibrant-element {
   /* A vibrant red that exceeds sRGB gamut boundaries */
   color: lab(55% 78 35);
 
   /* A smooth gradient using perceptual color space */
-  background: linear-gradient(
-    to right,
-    oklch(65% 0.25 10deg),
-    oklch(65% 0.25 250deg)
-  );
+  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
 }
 ```
 
 Bun's CSS bundler automatically converts these advanced color formats to backwards-compatible alternatives for browsers that don't yet support them:
 
-```css
+```css title="styles.css" icon="file-code"
 .vibrant-element {
   /* Fallback to closest RGB approximation */
   color: #ff0f52;
@@ -177,21 +178,17 @@ Bun's CSS bundler automatically converts these advanced color formats to backwar
   color: lab(55% 78 35);
 
   background: linear-gradient(to right, #cd4e15, #3887ab);
-  background: linear-gradient(
-    to right,
-    oklch(65% 0.25 10deg),
-    oklch(65% 0.25 250deg)
-  );
+  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
 }
 ```
 
 This layered approach ensures optimal color rendering across all browsers while allowing you to use the latest color technologies in your designs.
 
-#### Color function
+### Color function
 
 The `color()` function provides a standardized way to specify colors in various predefined color spaces, expanding your design options beyond the traditional RGB space. This allows you to access wider color gamuts and create more vibrant designs.
 
-```css
+```css title="styles.css" icon="file-code"
 .vivid-element {
   /* Using the Display P3 color space for wider gamut colors */
   color: color(display-p3 1 0.1 0.3);
@@ -203,7 +200,7 @@ The `color()` function provides a standardized way to specify colors in various
 
 For browsers that don't support these advanced color functions yet, Bun's CSS bundler provides appropriate RGB fallbacks:
 
-```css
+```css title="styles.css" icon="file-code"
 .vivid-element {
   /* RGB fallback first for maximum compatibility */
   color: #fa1a4c;
@@ -217,11 +214,11 @@ For browsers that don't support these advanced color functions yet, Bun's CSS bu
 
 This functionality lets you use modern color spaces immediately while ensuring your designs remain functional across all browsers, with optimal colors displayed in supporting browsers and reasonable approximations elsewhere.
 
-#### HWB colors
+### HWB colors
 
 The HWB (Hue, Whiteness, Blackness) color model provides an intuitive way to express colors based on how much white or black is mixed with a pure hue. Many designers find this approach more natural for creating color variations compared to manipulating RGB or HSL values.
 
-```css
+```css title="styles.css" icon="file-code"
 .easy-theming {
   /* Pure cyan with no white or black added */
   --primary: hwb(180 0% 0%);
@@ -239,7 +236,7 @@ The HWB (Hue, Whiteness, Blackness) color model provides an intuitive way to exp
 
 Bun's CSS bundler automatically converts HWB colors to RGB for compatibility with all browsers:
 
-```css
+```css title="styles.css" icon="file-code"
 .easy-theming {
   --primary: #00ffff;
   --primary-light: #33ffff;
@@ -250,11 +247,11 @@ Bun's CSS bundler automatically converts HWB colors to RGB for compatibility wit
 
 The HWB model makes it particularly easy to create systematic color variations for design systems, providing a more intuitive approach to creating consistent tints and shades than working directly with RGB or HSL values.
 
-#### Color notation
+### Color notation
 
 Modern CSS has introduced more intuitive and concise ways to express colors. Space-separated color syntax eliminates the need for commas in RGB and HSL values, while hex colors with alpha channels provide a compact way to specify transparency.
 
-```css
+```css title="styles.css" icon="file-code"
 .modern-styling {
   /* Space-separated RGB notation (no commas) */
   color: rgb(50 100 200);
@@ -272,7 +269,7 @@ Modern CSS has introduced more intuitive and concise ways to express colors. Spa
 
 Bun's CSS bundler automatically converts these modern color formats to ensure compatibility with older browsers:
 
-```css
+```css title="styles.css" icon="file-code"
 .modern-styling {
   /* Converted to comma format for older browsers */
   color: rgb(50, 100, 200);
@@ -289,11 +286,11 @@ Bun's CSS bundler automatically converts these modern color formats to ensure co
 
 This conversion process lets you write cleaner, more modern CSS while ensuring your styles work correctly across all browsers.
 
-#### light-dark() color function
+### light-dark() color function
 
 The `light-dark()` function provides an elegant solution for implementing color schemes that respect the user's system preference without requiring complex media queries. This function accepts two color values and automatically selects the appropriate one based on the current color scheme context.
 
-```css
+```css title="styles.css" icon="file-code"
 :root {
   /* Define color scheme support */
   color-scheme: light dark;
@@ -318,7 +315,7 @@ The `light-dark()` function provides an elegant solution for implementing color
 
 For browsers that don't support this feature yet, Bun's CSS bundler converts it to use CSS variables with proper fallbacks:
 
-```css
+```css title="styles.css" icon="file-code"
 :root {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
@@ -345,21 +342,19 @@ For browsers that don't support this feature yet, Bun's CSS bundler converts it
 }
 
 .themed-component {
-  background-color: var(--lightningcss-light, #ffffff)
-    var(--lightningcss-dark, #121212);
+  background-color: var(--lightningcss-light, #ffffff) var(--lightningcss-dark, #121212);
   color: var(--lightningcss-light, #333333) var(--lightningcss-dark, #eeeeee);
-  border-color: var(--lightningcss-light, #dddddd)
-    var(--lightningcss-dark, #555555);
+  border-color: var(--lightningcss-light, #dddddd) var(--lightningcss-dark, #555555);
 }
 ```
 
 This approach gives you a clean way to handle light and dark themes without duplicating styles or writing complex media queries, while maintaining compatibility with browsers that don't yet support the feature natively.
 
-#### Logical properties
+### Logical properties
 
 CSS logical properties let you define layout, spacing, and sizing relative to the document's writing mode and text direction rather than physical screen directions. This is crucial for creating truly international layouts that automatically adapt to different writing systems.
 
-```css
+```css title="styles.css" icon="file-code"
 .multilingual-component {
   /* Margin that adapts to writing direction */
   margin-inline-start: 1rem;
@@ -378,7 +373,7 @@ CSS logical properties let you define layout, spacing, and sizing relative to th
 
 For browsers that don't fully support logical properties, Bun's CSS bundler compiles them to physical properties with appropriate directional adjustments:
 
-```css
+```css title="styles.css" icon="file-code"
 /* For left-to-right languages */
 .multilingual-component:dir(ltr) {
   margin-left: 1rem;
@@ -402,11 +397,11 @@ For browsers that don't fully support logical properties, Bun's CSS bundler comp
 
 If the `:dir()` selector isn't supported, additional fallbacks are automatically generated to ensure your layouts work properly across all browsers and writing systems. This makes creating internationalized designs much simpler while maintaining compatibility with older browsers.
 
-#### :dir() selector
+### :dir() selector
 
 The `:dir()` pseudo-class selector allows you to style elements based on their text direction (RTL or LTR), providing a powerful way to create direction-aware designs without JavaScript. This selector matches elements based on their directionality as determined by the document or explicit direction attributes.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Apply different styles based on text direction */
 .nav-arrow:dir(ltr) {
   transform: rotate(0deg);
@@ -428,7 +423,7 @@ The `:dir()` pseudo-class selector allows you to style elements based on their t
 
 For browsers that don't support the `:dir()` selector yet, Bun's CSS bundler converts it to the more widely supported `:lang()` selector with appropriate language mappings:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Converted to use language-based selectors as fallback */
 .nav-arrow:lang(en, fr, de, es, it, pt, nl) {
   transform: rotate(0deg);
@@ -449,11 +444,11 @@ For browsers that don't support the `:dir()` selector yet, Bun's CSS bundler con
 
 This conversion lets you write direction-aware CSS that works reliably across browsers, even those that don't yet support the `:dir()` selector natively. If multiple arguments to `:lang()` aren't supported, further fallbacks are automatically provided.
 
-#### :lang() selector
+### :lang() selector
 
 The `:lang()` pseudo-class selector allows you to target elements based on the language they're in, making it easy to apply language-specific styling. Modern CSS allows the `:lang()` selector to accept multiple language codes, letting you group language-specific rules more efficiently.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Typography adjustments for CJK languages */
 :lang(zh, ja, ko) {
   line-height: 1.8;
@@ -472,7 +467,7 @@ blockquote:lang(de, nl, da, sv) {
 
 For browsers that don't support multiple arguments in the `:lang()` selector, Bun's CSS bundler converts this syntax to use the `:is()` selector to maintain the same behavior:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Multiple languages grouped with :is() for better browser support */
 :is(:lang(zh), :lang(ja), :lang(ko)) {
   line-height: 1.8;
@@ -490,11 +485,11 @@ blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) {
 
 If needed, Bun can provide additional fallbacks for `:is()` as well, ensuring your language-specific styles work across all browsers. This approach simplifies creating internationalized designs with distinct typographic and styling rules for different language groups.
 
-#### :is() selector
+### :is() selector
 
 The `:is()` pseudo-class function (formerly `:matches()`) allows you to create more concise and readable selectors by grouping multiple selectors together. It accepts a selector list as its argument and matches if any of the selectors in that list match, significantly reducing repetition in your CSS.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Instead of writing these separately */
 /* 
 .article h1,
@@ -547,13 +542,17 @@ For browsers that don't support `:is()`, Bun's CSS bundler provides fallbacks us
 }
 ```
 
-It's worth noting that the vendor-prefixed versions have some limitations compared to the standardized `:is()` selector, particularly with complex selectors. Bun handles these limitations intelligently, only using prefixed versions when they'll work correctly.
+<Warning>
+  The vendor-prefixed versions have some limitations compared to the standardized `:is()` selector, particularly with
+  complex selectors. Bun handles these limitations intelligently, only using prefixed versions when they'll work
+  correctly.
+</Warning>
 
-#### :not() selector
+### :not() selector
 
 The `:not()` pseudo-class allows you to exclude elements that match a specific selector. The modern version of this selector accepts multiple arguments, letting you exclude multiple patterns with a single, concise selector.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Select all buttons except primary and secondary variants */
 button:not(.primary, .secondary) {
   background-color: #f5f5f5;
@@ -568,7 +567,7 @@ h2:not(.sidebar *, footer *) {
 
 For browsers that don't support multiple arguments in `:not()`, Bun's CSS bundler converts this syntax to a more compatible form while preserving the same behavior:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Converted to use :not with :is() for compatibility */
 button:not(:is(.primary, .secondary)) {
   background-color: #f5f5f5;
@@ -582,7 +581,7 @@ h2:not(:is(.sidebar *, footer *)) {
 
 And if `:is()` isn't supported, Bun can generate further fallbacks:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Even more fallbacks for maximum compatibility */
 button:not(:-webkit-any(.primary, .secondary)) {
   background-color: #f5f5f5;
@@ -602,11 +601,11 @@ button:not(:is(.primary, .secondary)) {
 
 This conversion ensures your negative selectors work correctly across all browsers while maintaining the correct specificity and behavior of the original selector.
 
-#### Math functions
+### Math functions
 
 CSS now includes a rich set of mathematical functions that let you perform complex calculations directly in your stylesheets. These include standard math functions (`round()`, `mod()`, `rem()`, `abs()`, `sign()`), trigonometric functions (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`), and exponential functions (`pow()`, `sqrt()`, `exp()`, `log()`, `hypot()`).
 
-```css
+```css title="styles.css" icon="file-code"
 .dynamic-sizing {
   /* Clamp a value between minimum and maximum */
   width: clamp(200px, 50%, 800px);
@@ -625,7 +624,7 @@ CSS now includes a rich set of mathematical functions that let you perform compl
 
 Bun's CSS bundler evaluates these mathematical expressions at build time when all values are known constants (not variables), resulting in optimized output:
 
-```css
+```css title="styles.css" icon="file-code"
 .dynamic-sizing {
   width: clamp(200px, 50%, 800px);
   padding: 15px;
@@ -637,11 +636,11 @@ Bun's CSS bundler evaluates these mathematical expressions at build time when al
 
 This approach lets you write more expressive and maintainable CSS with meaningful mathematical relationships, which then gets compiled to optimized values for maximum browser compatibility and performance.
 
-#### Media query ranges
+### Media query ranges
 
 Modern CSS supports intuitive range syntax for media queries, allowing you to specify breakpoints using comparison operators like `<`, `>`, `<=`, and `>=` instead of the more verbose `min-` and `max-` prefixes. This syntax is more readable and matches how we normally think about values and ranges.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Modern syntax with comparison operators */
 @media (width >= 768px) {
   .container {
@@ -666,7 +665,7 @@ Modern CSS supports intuitive range syntax for media queries, allowing you to sp
 
 Bun's CSS bundler converts these modern range queries to traditional media query syntax for compatibility with all browsers:
 
-```css
+```css title="styles.css" icon="file-code"
 /* Converted to traditional min/max syntax */
 @media (min-width: 768px) {
   .container {
@@ -689,11 +688,11 @@ Bun's CSS bundler converts these modern range queries to traditional media query
 
 This lets you write more intuitive and mathematical media queries while ensuring your stylesheets work correctly across all browsers, including those that don't support the modern range syntax.
 
-#### Shorthands
+### Shorthands
 
 CSS has introduced several modern shorthand properties that improve code readability and maintainability. Bun's CSS bundler ensures these convenient shorthands work on all browsers by converting them to their longhand equivalents when needed.
 
-```css
+```css title="styles.css" icon="file-code"
 /* Alignment shorthands */
 .flex-container {
   /* Shorthand for align-items and justify-items */
@@ -729,7 +728,7 @@ CSS has introduced several modern shorthand properties that improve code readabi
 
 For browsers that don't support these modern shorthands, Bun converts them to their component longhand properties:
 
-```css
+```css title="styles.css" icon="file-code"
 .flex-container {
   /* Expanded alignment properties */
   align-items: center;
@@ -766,11 +765,11 @@ For browsers that don't support these modern shorthands, Bun converts them to th
 
 This conversion ensures your stylesheets remain clean and maintainable while providing the broadest possible browser compatibility.
 
-#### Double position gradients
+### Double position gradients
 
 The double position gradient syntax is a modern CSS feature that allows you to create hard color stops in gradients by specifying the same color at two adjacent positions. This creates a sharp transition rather than a smooth fade, which is useful for creating stripes, color bands, and other multi-color designs.
 
-```css
+```css title="styles.css" icon="file-code"
 .striped-background {
   /* Creates a sharp transition from green to red at 30%-40% */
   background: linear-gradient(
@@ -799,7 +798,7 @@ The double position gradient syntax is a modern CSS feature that allows you to c
 
 For browsers that don't support this syntax, Bun's CSS bundler automatically converts it to the traditional format by duplicating color stops:
 
-```css
+```css title="styles.css" icon="file-code"
 .striped-background {
   background: linear-gradient(
     to right,
@@ -830,11 +829,11 @@ For browsers that don't support this syntax, Bun's CSS bundler automatically con
 
 This conversion lets you use the cleaner double position syntax in your source code while ensuring gradients display correctly in all browsers.
 
-#### system-ui font
+### system-ui font
 
 The `system-ui` generic font family lets you use the device's native UI font, creating interfaces that feel more integrated with the operating system. This provides a more native look and feel without having to specify different font stacks for each platform.
 
-```css
+```css title="styles.css" icon="file-code"
 .native-interface {
   /* Use the system's default UI font */
   font-family: system-ui;
@@ -848,7 +847,7 @@ The `system-ui` generic font family lets you use the device's native UI font, cr
 
 For browsers that don't support `system-ui`, Bun's CSS bundler automatically expands it to a comprehensive cross-platform font stack:
 
-```css
+```css title="styles.css" icon="file-code"
 .native-interface {
   /* Expanded to support all major platforms */
   font-family:
@@ -883,7 +882,7 @@ This approach gives you the simplicity of writing just `system-ui` in your sourc
 
 ## CSS Modules
 
-Bun's bundler also supports bundling [CSS modules](https://css-tricks.com/css-modules-part-1-need/) in addition to [regular CSS](/docs/bundler/css) with support for the following features:
+Bun's bundler also supports bundling CSS modules in addition to regular CSS with support for the following features:
 
 - Automatically detecting CSS module files (`.module.css`) with zero configuration
 - Composition (`composes` property)
@@ -894,17 +893,17 @@ A CSS module is a CSS file (with the `.module.css` extension) where are all clas
 
 Under the hood, Bun's bundler transforms locally scoped class names into unique identifiers.
 
-## Getting started
+### Getting started
 
 Create a CSS file with the `.module.css` extension:
 
-```css
-/* styles.module.css */
+```css title="styles.module.css" icon="file-code"
 .button {
   color: red;
 }
+```
 
-/* other-styles.module.css */
+```css title="other-styles.module.css" icon="file-code"
 .button {
   color: blue;
 }
@@ -912,7 +911,7 @@ Create a CSS file with the `.module.css` extension:
 
 You can then import this file, for example into a TSX file:
 
-```tsx
+```tsx title="app.tsx" icon="/icons/typescript.svg"
 import styles from "./styles.module.css";
 import otherStyles from "./other-styles.module.css";
 
@@ -926,10 +925,9 @@ export default function App() {
 }
 ```
 
-The `styles` object from importing the CSS module file will be an object with all class names as keys and
-their unique identifiers as values:
+The styles object from importing the CSS module file will be an object with all class names as keys and their unique identifiers as values:
 
-```tsx
+```ts title="app.tsx" icon="/icons/typescript.svg"
 import styles from "./styles.module.css";
 import otherStyles from "./other-styles.module.css";
 
@@ -939,7 +937,7 @@ console.log(otherStyles);
 
 This will output:
 
-```ts
+```ts title="app.tsx" icon="/icons/typescript.svg"
 {
   button: "button_123";
 }
@@ -953,12 +951,11 @@ As you can see, the class names are unique to each file, avoiding any collisions
 
 ### Composition
 
-CSS modules allow you to _compose_ class selectors together. This lets you reuse style rules across multiple classes.
+CSS modules allow you to compose class selectors together. This lets you reuse style rules across multiple classes.
 
 For example:
 
-```css
-/* styles.module.css */
+```css title="styles.module.css" icon="file-code"
 .button {
   composes: background;
   color: red;
@@ -971,7 +968,7 @@ For example:
 
 Would be the same as writing:
 
-```css
+```css title="styles.module.css" icon="file-code"
 .button {
   background-color: blue;
   color: red;
@@ -982,13 +979,14 @@ Would be the same as writing:
 }
 ```
 
-{% callout %}
 There are a couple rules to keep in mind when using `composes`:
 
-- A `composes` property must come before any regular CSS properties or declarations
-- You can only use `composes` on a **simple selector with a single class name**:
+<Info>
+  **Composition Rules:** - A `composes` property must come before any regular CSS properties or declarations - You can
+  only use `composes` on a simple selector with a single class name
+</Info>
 
-```css
+```css title="styles.module.css" icon="file-code"
 #button {
   /* Invalid! `#button` is not a class selector */
   composes: background;
@@ -1001,28 +999,26 @@ There are a couple rules to keep in mind when using `composes`:
 }
 ```
 
-{% /callout %}
-
 ### Composing from a separate CSS module file
 
 You can also compose from a separate CSS module file:
 
-```css
-/* background.module.css */
+```css title="background.module.css" icon="file-code"
 .background {
   background-color: blue;
 }
+```
 
-/* styles.module.css */
+```css title="styles.module.css" icon="file-code"
 .button {
   composes: background from "./background.module.css";
   color: red;
 }
 ```
 
-{% callout %}
+<Warning>
 When composing classes from separate files, be sure that they do not contain the same properties.
 
-The CSS module spec says that composing classes from separate files with conflicting properties is
-undefined behavior, meaning that the output may differ and be unreliable.
-{% /callout %}
+The CSS module spec says that composing classes from separate files with conflicting properties is undefined behavior, meaning that the output may differ and be unreliable.
+
+</Warning>