diff --git a/docs/bundler/css.md b/docs/bundler/css.md
new file mode 100644
index 00000000000000..b5b2c00c4e464d
--- /dev/null
+++ b/docs/bundler/css.md
@@ -0,0 +1,1030 @@
+# CSS
+
+Bun's bundler has built-in support for CSS with the following features:
+
+- Transpiling modern/feature features to work on all browsers (including vendor prefixing)
+- Minification
+- CSS Modules
+- Tailwind (via a native bundler plugin)
+
+## Transpiling
+
+Bun's CSS bundler lets you use future/modern 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.
+
+A huge thanks goes to the amazing work from the authors of [LightningCSS](https://lightningcss.dev/) and [esbuild](https://esbuild.github.io/).
+
+### Browser Compatibility
+
+By default, Bun's CSS bundler targets the following browsers:
+
+- ES2020
+- Edge 88+
+- Firefox 78+
+- Chrome 87+
+- Safari 14+
+
+### Syntax Lowering
+
+#### 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
+/* With nesting */
+.card {
+  background: white;
+  border-radius: 4px;
+
+  .title {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+
+  .content {
+    padding: 1rem;
+  }
+}
+```
+
+Bun's CSS bundler automatically converts this nested syntax into traditional flat CSS that works in all browsers:
+
+```css
+/* Compiled output */
+.card {
+  background: white;
+  border-radius: 4px;
+}
+
+.card .title {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.card .content {
+  padding: 1rem;
+}
+```
+
+You can also nest media queries and other at-rules inside selectors, eliminating the need to repeat selector patterns:
+
+```css
+.responsive-element {
+  display: block;
+
+  @media (min-width: 768px) {
+    display: flex;
+  }
+}
+```
+
+This compiles to:
+
+```css
+.responsive-element {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .responsive-element {
+    display: flex;
+  }
+}
+```
+
+#### 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
+.button {
+  /* Mix blue and red in the RGB color space with a 30/70 proportion */
+  background-color: color-mix(in srgb, blue 30%, red);
+
+  /* Create a lighter variant for hover state */
+  &:hover {
+    background-color: color-mix(in srgb, blue 30%, red, white 20%);
+  }
+}
+```
+
+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
+.button {
+  /* Computed to the exact resulting color */
+  background-color: #b31a1a;
+}
+
+.button:hover {
+  background-color: #c54747;
+}
+```
+
+This feature is particularly useful for creating color systems with programmatically derived shades, tints, and accents without needing preprocessors or custom tooling.
+
+#### 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
+.theme-color {
+  /* Start with a base color and increase lightness by 15% */
+  --accent: lch(from purple calc(l + 15%) c h);
+
+  /* Take our brand blue and make a desaturated version */
+  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
+}
+```
+
+Bun's CSS bundler computes these relative color modifications at build time (when not using CSS variables) and generates static color values for browser compatibility:
+
+```css
+.theme-color {
+  --accent: lch(69.32% 58.34 328.37);
+  --subtle-blue: oklch(60.92% 0.112 240.01);
+}
+```
+
+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
+
+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
+.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)
+  );
+}
+```
+
+Bun's CSS bundler automatically converts these advanced color formats to backwards-compatible alternatives for browsers that don't yet support them:
+
+```css
+.vibrant-element {
+  /* Fallback to closest RGB approximation */
+  color: #ff0f52;
+  /* P3 fallback for browsers with wider gamut support */
+  color: color(display-p3 1 0.12 0.37);
+  /* Original value preserved for browsers that support it */
+  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)
+  );
+}
+```
+
+This layered approach ensures optimal color rendering across all browsers while allowing you to use the latest color technologies in your designs.
+
+#### 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
+.vivid-element {
+  /* Using the Display P3 color space for wider gamut colors */
+  color: color(display-p3 1 0.1 0.3);
+
+  /* Using A98 RGB color space */
+  background-color: color(a98-rgb 0.44 0.5 0.37);
+}
+```
+
+For browsers that don't support these advanced color functions yet, Bun's CSS bundler provides appropriate RGB fallbacks:
+
+```css
+.vivid-element {
+  /* RGB fallback first for maximum compatibility */
+  color: #fa1a4c;
+  /* Keep original for browsers that support it */
+  color: color(display-p3 1 0.1 0.3);
+
+  background-color: #6a805d;
+  background-color: color(a98-rgb 0.44 0.5 0.37);
+}
+```
+
+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
+
+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
+.easy-theming {
+  /* Pure cyan with no white or black added */
+  --primary: hwb(180 0% 0%);
+
+  /* Same hue, but with 20% white added (tint) */
+  --primary-light: hwb(180 20% 0%);
+
+  /* Same hue, but with 30% black added (shade) */
+  --primary-dark: hwb(180 0% 30%);
+
+  /* Muted version with both white and black added */
+  --primary-muted: hwb(180 30% 20%);
+}
+```
+
+Bun's CSS bundler automatically converts HWB colors to RGB for compatibility with all browsers:
+
+```css
+.easy-theming {
+  --primary: #00ffff;
+  --primary-light: #33ffff;
+  --primary-dark: #00b3b3;
+  --primary-muted: #339999;
+}
+```
+
+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
+
+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
+.modern-styling {
+  /* Space-separated RGB notation (no commas) */
+  color: rgb(50 100 200);
+
+  /* Space-separated RGB with alpha */
+  border-color: rgba(100 50 200 / 75%);
+
+  /* Hex with alpha channel (8 digits) */
+  background-color: #00aaff80;
+
+  /* HSL with simplified notation */
+  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
+}
+```
+
+Bun's CSS bundler automatically converts these modern color formats to ensure compatibility with older browsers:
+
+```css
+.modern-styling {
+  /* Converted to comma format for older browsers */
+  color: rgb(50, 100, 200);
+
+  /* Alpha channels handled appropriately */
+  border-color: rgba(100, 50, 200, 0.75);
+
+  /* Hex+alpha converted to rgba when needed */
+  background-color: rgba(0, 170, 255, 0.5);
+
+  box-shadow: 0 5px 10px rgba(38, 115, 153, 0.4);
+}
+```
+
+This conversion process lets you write cleaner, more modern CSS while ensuring your styles work correctly across all browsers.
+
+#### 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
+:root {
+  /* Define color scheme support */
+  color-scheme: light dark;
+}
+
+.themed-component {
+  /* Automatically picks the right color based on system preference */
+  background-color: light-dark(#ffffff, #121212);
+  color: light-dark(#333333, #eeeeee);
+  border-color: light-dark(#dddddd, #555555);
+}
+
+/* Override system preference when needed */
+.light-theme {
+  color-scheme: light;
+}
+
+.dark-theme {
+  color-scheme: dark;
+}
+```
+
+For browsers that don't support this feature yet, Bun's CSS bundler converts it to use CSS variables with proper fallbacks:
+
+```css
+:root {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
+}
+
+.light-theme {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+.dark-theme {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+}
+
+.themed-component {
+  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);
+}
+```
+
+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
+
+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
+.multilingual-component {
+  /* Margin that adapts to writing direction */
+  margin-inline-start: 1rem;
+
+  /* Padding that makes sense regardless of text direction */
+  padding-block: 1rem 2rem;
+
+  /* Border radius for the starting corner at the top */
+  border-start-start-radius: 4px;
+
+  /* Size that respects the writing mode */
+  inline-size: 80%;
+  block-size: auto;
+}
+```
+
+For browsers that don't fully support logical properties, Bun's CSS bundler compiles them to physical properties with appropriate directional adjustments:
+
+```css
+/* For left-to-right languages */
+.multilingual-component:dir(ltr) {
+  margin-left: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  border-top-left-radius: 4px;
+  width: 80%;
+  height: auto;
+}
+
+/* For right-to-left languages */
+.multilingual-component:dir(rtl) {
+  margin-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  border-top-right-radius: 4px;
+  width: 80%;
+  height: auto;
+}
+```
+
+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
+
+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
+/* Apply different styles based on text direction */
+.nav-arrow:dir(ltr) {
+  transform: rotate(0deg);
+}
+
+.nav-arrow:dir(rtl) {
+  transform: rotate(180deg);
+}
+
+/* Position elements based on text flow */
+.sidebar:dir(ltr) {
+  border-right: 1px solid #ddd;
+}
+
+.sidebar:dir(rtl) {
+  border-left: 1px solid #ddd;
+}
+```
+
+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
+/* Converted to use language-based selectors as fallback */
+.nav-arrow:lang(en, fr, de, es, it, pt, nl) {
+  transform: rotate(0deg);
+}
+
+.nav-arrow:lang(ar, he, fa, ur) {
+  transform: rotate(180deg);
+}
+
+.sidebar:lang(en, fr, de, es, it, pt, nl) {
+  border-right: 1px solid #ddd;
+}
+
+.sidebar:lang(ar, he, fa, ur) {
+  border-left: 1px solid #ddd;
+}
+```
+
+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
+
+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
+/* Typography adjustments for CJK languages */
+:lang(zh, ja, ko) {
+  line-height: 1.8;
+  font-size: 1.05em;
+}
+
+/* Different quote styles by language group */
+blockquote:lang(fr, it, es, pt) {
+  font-style: italic;
+}
+
+blockquote:lang(de, nl, da, sv) {
+  font-weight: 500;
+}
+```
+
+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
+/* Multiple languages grouped with :is() for better browser support */
+:is(:lang(zh), :lang(ja), :lang(ko)) {
+  line-height: 1.8;
+  font-size: 1.05em;
+}
+
+blockquote:is(:lang(fr), :lang(it), :lang(es), :lang(pt)) {
+  font-style: italic;
+}
+
+blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) {
+  font-weight: 500;
+}
+```
+
+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
+
+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
+/* Instead of writing these separately */
+/* 
+.article h1,
+.article h2,
+.article h3 {
+  margin-top: 1.5em;
+}
+*/
+
+/* You can write this */
+.article :is(h1, h2, h3) {
+  margin-top: 1.5em;
+}
+
+/* Complex example with multiple groups */
+:is(header, main, footer) :is(h1, h2, .title) {
+  font-family: "Heading Font", sans-serif;
+}
+```
+
+For browsers that don't support `:is()`, Bun's CSS bundler provides fallbacks using vendor-prefixed alternatives:
+
+```css
+/* Fallback using -webkit-any */
+.article :-webkit-any(h1, h2, h3) {
+  margin-top: 1.5em;
+}
+
+/* Fallback using -moz-any */
+.article :-moz-any(h1, h2, h3) {
+  margin-top: 1.5em;
+}
+
+/* Original preserved for modern browsers */
+.article :is(h1, h2, h3) {
+  margin-top: 1.5em;
+}
+
+/* Complex example with fallbacks */
+:-webkit-any(header, main, footer) :-webkit-any(h1, h2, .title) {
+  font-family: "Heading Font", sans-serif;
+}
+
+:-moz-any(header, main, footer) :-moz-any(h1, h2, .title) {
+  font-family: "Heading Font", sans-serif;
+}
+
+:is(header, main, footer) :is(h1, h2, .title) {
+  font-family: "Heading Font", sans-serif;
+}
+```
+
+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.
+
+#### :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
+/* Select all buttons except primary and secondary variants */
+button:not(.primary, .secondary) {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+}
+
+/* Apply styles to all headings except those inside sidebars or footers */
+h2:not(.sidebar *, footer *) {
+  margin-top: 2em;
+}
+```
+
+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
+/* Converted to use :not with :is() for compatibility */
+button:not(:is(.primary, .secondary)) {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+}
+
+h2:not(:is(.sidebar *, footer *)) {
+  margin-top: 2em;
+}
+```
+
+And if `:is()` isn't supported, Bun can generate further fallbacks:
+
+```css
+/* Even more fallbacks for maximum compatibility */
+button:not(:-webkit-any(.primary, .secondary)) {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+}
+
+button:not(:-moz-any(.primary, .secondary)) {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+}
+
+button:not(:is(.primary, .secondary)) {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+}
+```
+
+This conversion ensures your negative selectors work correctly across all browsers while maintaining the correct specificity and behavior of the original selector.
+
+#### 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
+.dynamic-sizing {
+  /* Clamp a value between minimum and maximum */
+  width: clamp(200px, 50%, 800px);
+
+  /* Round to the nearest multiple */
+  padding: round(14.8px, 5px);
+
+  /* Trigonometry for animations or layouts */
+  transform: rotate(calc(sin(45deg) * 50deg));
+
+  /* Complex math with multiple functions */
+  --scale-factor: pow(1.25, 3);
+  font-size: calc(16px * var(--scale-factor));
+}
+```
+
+Bun's CSS bundler evaluates these mathematical expressions at build time when all values are known constants (not variables), resulting in optimized output:
+
+```css
+.dynamic-sizing {
+  width: clamp(200px, 50%, 800px);
+  padding: 15px;
+  transform: rotate(35.36deg);
+  --scale-factor: 1.953125;
+  font-size: calc(16px * var(--scale-factor));
+}
+```
+
+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
+
+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
+/* Modern syntax with comparison operators */
+@media (width >= 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+/* Inclusive range using <= and >= */
+@media (768px <= width <= 1199px) {
+  .sidebar {
+    display: flex;
+  }
+}
+
+/* Exclusive range using < and > */
+@media (width > 320px) and (width < 768px) {
+  .mobile-only {
+    display: block;
+  }
+}
+```
+
+Bun's CSS bundler converts these modern range queries to traditional media query syntax for compatibility with all browsers:
+
+```css
+/* Converted to traditional min/max syntax */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .sidebar {
+    display: flex;
+  }
+}
+
+@media (min-width: 321px) and (max-width: 767px) {
+  .mobile-only {
+    display: block;
+  }
+}
+```
+
+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
+
+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
+/* Alignment shorthands */
+.flex-container {
+  /* Shorthand for align-items and justify-items */
+  place-items: center start;
+
+  /* Shorthand for align-content and justify-content */
+  place-content: space-between center;
+}
+
+.grid-item {
+  /* Shorthand for align-self and justify-self */
+  place-self: end center;
+}
+
+/* Two-value overflow */
+.content-box {
+  /* First value for horizontal, second for vertical */
+  overflow: hidden auto;
+}
+
+/* Enhanced text-decoration */
+.fancy-link {
+  /* Combines multiple text decoration properties */
+  text-decoration: underline dotted blue 2px;
+}
+
+/* Two-value display syntax */
+.component {
+  /* Outer display type + inner display type */
+  display: inline flex;
+}
+```
+
+For browsers that don't support these modern shorthands, Bun converts them to their component longhand properties:
+
+```css
+.flex-container {
+  /* Expanded alignment properties */
+  align-items: center;
+  justify-items: start;
+
+  align-content: space-between;
+  justify-content: center;
+}
+
+.grid-item {
+  align-self: end;
+  justify-self: center;
+}
+
+.content-box {
+  /* Separate overflow properties */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.fancy-link {
+  /* Individual text decoration properties */
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: blue;
+  text-decoration-thickness: 2px;
+}
+
+.component {
+  /* Single value display */
+  display: inline-flex;
+}
+```
+
+This conversion ensures your stylesheets remain clean and maintainable while providing the broadest possible browser compatibility.
+
+#### 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
+.striped-background {
+  /* Creates a sharp transition from green to red at 30%-40% */
+  background: linear-gradient(
+    to right,
+    yellow 0%,
+    green 20%,
+    green 30%,
+    red 30%,
+    /* Double position creates hard stop */ red 70%,
+    blue 70%,
+    blue 100%
+  );
+}
+
+.progress-bar {
+  /* Creates distinct color sections */
+  background: linear-gradient(
+    to right,
+    #4caf50 0% 25%,
+    /* Green from 0% to 25% */ #ffc107 25% 50%,
+    /* Yellow from 25% to 50% */ #2196f3 50% 75%,
+    /* Blue from 50% to 75% */ #9c27b0 75% 100% /* Purple from 75% to 100% */
+  );
+}
+```
+
+For browsers that don't support this syntax, Bun's CSS bundler automatically converts it to the traditional format by duplicating color stops:
+
+```css
+.striped-background {
+  background: linear-gradient(
+    to right,
+    yellow 0%,
+    green 20%,
+    green 30%,
+    red 30%,
+    /* Split into two color stops */ red 70%,
+    blue 70%,
+    blue 100%
+  );
+}
+
+.progress-bar {
+  background: linear-gradient(
+    to right,
+    #4caf50 0%,
+    #4caf50 25%,
+    /* Two stops for green section */ #ffc107 25%,
+    #ffc107 50%,
+    /* Two stops for yellow section */ #2196f3 50%,
+    #2196f3 75%,
+    /* Two stops for blue section */ #9c27b0 75%,
+    #9c27b0 100% /* Two stops for purple section */
+  );
+}
+```
+
+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
+
+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
+.native-interface {
+  /* Use the system's default UI font */
+  font-family: system-ui;
+}
+
+.fallback-aware {
+  /* System UI font with explicit fallbacks */
+  font-family: system-ui, sans-serif;
+}
+```
+
+For browsers that don't support `system-ui`, Bun's CSS bundler automatically expands it to a comprehensive cross-platform font stack:
+
+```css
+.native-interface {
+  /* Expanded to support all major platforms */
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Noto Sans",
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue";
+}
+
+.fallback-aware {
+  /* Preserves the original fallback after the expanded stack */
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Noto Sans",
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue",
+    sans-serif;
+}
+```
+
+This approach gives you the simplicity of writing just `system-ui` in your source code while ensuring your interface adapts correctly to all operating systems and browsers. The expanded font stack includes appropriate system fonts for macOS/iOS, Windows, Android, Linux, and fallbacks for older browsers.
+
+## 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:
+
+- Automatically detecting CSS module files (`.module.css`) with zero configuration
+- Composition (`composes` property)
+- Importing CSS modules into JSX/TSX
+- Warnings/errors for invalid usages of CSS modules
+
+A CSS module is a CSS file (with the `.module.css` extension) where are all class names and animations are scoped to the file. This helps you avoid class name collisions as CSS declarations are globally scoped by default.
+
+Under the hood, Bun's bundler transforms locally scoped class names into unique identifiers.
+
+## Getting started
+
+Create a CSS file with the `.module.css` extension:
+
+```css
+/* styles.module.css */
+.button {
+  color: red;
+}
+
+/* other-styles.module.css */
+.button {
+  color: blue;
+}
+```
+
+You can then import this file, for example into a TSX file:
+
+```tsx
+import styles from "./styles.module.css";
+import otherStyles from "./other-styles.module.css";
+
+export default function App() {
+  return (
+    <>
+      <button className={styles.button}>Red button!</button>
+      <button className={otherStyles.button}>Blue button!</button>
+    </>
+  );
+}
+```
+
+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
+import styles from "./styles.module.css";
+import otherStyles from "./other-styles.module.css";
+
+console.log(styles);
+console.log(otherStyles);
+```
+
+This will output:
+
+```ts
+{
+  button: "button_123";
+}
+
+{
+  button: "button_456";
+}
+```
+
+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.
+
+For example:
+
+```css
+/* styles.module.css */
+.button {
+  composes: background;
+  color: red;
+}
+
+.background {
+  background-color: blue;
+}
+```
+
+Would be the same as writing:
+
+```css
+.button {
+  background-color: blue;
+  color: red;
+}
+
+.background {
+  background-color: blue;
+}
+```
+
+{% 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**:
+
+```css
+#button {
+  /* Invalid! `#button` is not a class selector */
+  composes: background;
+}
+
+.button,
+.button-secondary {
+  /* Invalid! `.button, .button-secondary` is not a simple selector */
+  composes: background;
+}
+```
+
+{% /callout %}
+
+### Composing from a separate CSS module file
+
+You can also compose from a separate CSS module file:
+
+```css
+/* background.module.css */
+.background {
+  background-color: blue;
+}
+
+/* styles.module.css */
+.button {
+  composes: background from "./background.module.css";
+  color: red;
+}
+```
+
+{% callout %}
+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 %}
diff --git a/docs/bundler/css_modules.md b/docs/bundler/css_modules.md
new file mode 100644
index 00000000000000..271ab4621dc7bf
--- /dev/null
+++ b/docs/bundler/css_modules.md
@@ -0,0 +1,145 @@
+# 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:
+
+- Automatically detecting CSS module files (`.module.css`) with zero configuration
+- Composition (`composes` property)
+- Importing CSS modules into JSX/TSX
+- Warnings/errors for invalid usages of CSS modules
+
+A CSS module is a CSS file (with the `.module.css` extension) where are all class names and animations are scoped to the file. This helps you avoid class name collisions as CSS declarations are globally scoped by default.
+
+Under the hood, Bun's bundler transforms locally scoped class names into unique identifiers.
+
+## Getting started
+
+Create a CSS file with the `.module.css` extension:
+
+```css
+/* styles.module.css */
+.button {
+  color: red;
+}
+
+/* other-styles.module.css */
+.button {
+  color: blue;
+}
+```
+
+You can then import this file, for example into a TSX file:
+
+```tsx
+import styles from "./styles.module.css";
+import otherStyles from "./other-styles.module.css";
+
+export default function App() {
+  return (
+    <>
+      <button className={styles.button}>Red button!</button>
+      <button className={otherStyles.button}>Blue button!</button>
+    </>
+  );
+}
+```
+
+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
+import styles from "./styles.module.css";
+import otherStyles from "./other-styles.module.css";
+
+console.log(styles);
+console.log(otherStyles);
+```
+
+This will output:
+
+```ts
+{
+  button: "button_123";
+}
+
+{
+  button: "button_456";
+}
+```
+
+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.
+
+For example:
+
+```css
+/* styles.module.css */
+.button {
+  composes: background;
+  color: red;
+}
+
+.background {
+  background-color: blue;
+}
+```
+
+Would be the same as writing:
+
+```css
+.button {
+  background-color: blue;
+  color: red;
+}
+
+.background {
+  background-color: blue;
+}
+```
+
+{% 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**:
+
+```css
+#button {
+  /* Invalid! `#button` is not a class selector */
+  composes: background;
+}
+
+.button,
+.button-secondary {
+  /* Invalid! `.button, .button-secondary` is not a simple selector */
+  composes: background;
+}
+```
+
+{% /callout %}
+
+### Composing from a separate CSS module file
+
+You can also compose from a separate CSS module file:
+
+```css
+/* background.module.css */
+.background {
+  background-color: blue;
+}
+
+/* styles.module.css */
+.button {
+  composes: background from "./background.module.css";
+  color: red;
+}
+```
+
+{% callout %}
+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 %}
diff --git a/docs/nav.ts b/docs/nav.ts
index cdbe442e902760..518bd56472135a 100644
--- a/docs/nav.ts
+++ b/docs/nav.ts
@@ -218,6 +218,9 @@ export default {
     page("bundler/html", "Bundle frontend & static sites", {
       description: `Zero-config HTML bundler for single-page apps and multi-page apps. Automatic bundling, TailwindCSS plugins, TypeScript, JSX, React support, and incredibly fast builds`,
     }),
+    page("bundler/css", "Bundle, transpile, and minify CSS", {
+      description: `Production ready CSS bundler with support for modern CSS features, CSS modules, and more.`,
+    }),
     page("bundler/fullstack", "Fullstack Dev Server", {
       description: "Serve your frontend and backend from the same app with Bun's dev server.",
     }),
diff --git a/src/baby_list.zig b/src/baby_list.zig
index 0d8be0abf68105..60fb5dcf877981 100644
--- a/src/baby_list.zig
+++ b/src/baby_list.zig
@@ -316,6 +316,12 @@ pub fn BabyList(comptime Type: type) type {
             this.update(list__);
         }
 
+        pub fn insertSlice(this: *@This(), allocator: std.mem.Allocator, index: usize, vals: []const Type) !void {
+            var list__ = this.listManaged(allocator);
+            try list__.insertSlice(index, vals);
+            this.update(list__);
+        }
+
         pub fn append(this: *@This(), allocator: std.mem.Allocator, value: []const Type) !void {
             var list__ = this.listManaged(allocator);
             try list__.appendSlice(value);
diff --git a/src/bake/DevServer.zig b/src/bake/DevServer.zig
index a6aa2357416d35..00b7013700b889 100644
--- a/src/bake/DevServer.zig
+++ b/src/bake/DevServer.zig
@@ -1321,6 +1321,15 @@ fn appendRouteEntryPointsIfNotStale(dev: *DevServer, entry_points: *EntryPointLi
             try entry_points.append(alloc, html.html_bundle.html_bundle.path, .{ .client = true });
         },
     }
+
+    if (dev.has_tailwind_plugin_hack) |*map| {
+        for (map.keys()) |abs_path| {
+            const file = dev.client_graph.bundled_files.get(abs_path) orelse
+                continue;
+            if (file.flags.kind == .css)
+                entry_points.appendCss(alloc, abs_path) catch bun.outOfMemory();
+        }
+    }
 }
 
 fn onFrameworkRequestWithBundle(
@@ -3664,7 +3673,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
             bundler_index: bun.JSAst.Index,
         ) !void {
             bun.assert(bundler_index.isValid());
-            bun.assert(ctx.loaders[bundler_index.get()] == .css);
+            bun.assert(ctx.loaders[bundler_index.get()].isCSS());
 
             var sfb = std.heap.stackFallback(@sizeOf(bun.JSAst.Index) * 64, temp_alloc);
             const queue_alloc = sfb.get();
diff --git a/src/bake/production.zig b/src/bake/production.zig
index fcc67158072a0b..9e1fc0d59a83b0 100644
--- a/src/bake/production.zig
+++ b/src/bake/production.zig
@@ -286,7 +286,7 @@ pub fn buildWithVm(ctx: bun.CLI.Command.Context, cwd: []const u8, vm: *VirtualMa
             file.dest_path,
             file.entry_point_index,
         });
-        if (file.loader == .css) {
+        if (file.loader.isCSS()) {
             if (css_chunks_count == 0) css_chunks_first = i;
             css_chunks_count += 1;
         }
@@ -417,7 +417,7 @@ pub fn buildWithVm(ctx: bun.CLI.Command.Context, cwd: []const u8, vm: *VirtualMa
     const css_chunk_js_strings = try allocator.alloc(JSValue, css_chunks_count);
     for (bundled_outputs[css_chunks_first..][0..css_chunks_count], css_chunk_js_strings) |output_file, *str| {
         bun.assert(output_file.dest_path[0] != '.');
-        bun.assert(output_file.loader == .css);
+        bun.assert(output_file.loader.isCSS());
         str.* = (try bun.String.createFormat("{s}{s}", .{ public_path, output_file.dest_path })).toJS(global);
     }
 
diff --git a/src/base64/base64.zig b/src/base64/base64.zig
index b47856fe6861ef..3b4a816b9f69ca 100644
--- a/src/base64/base64.zig
+++ b/src/base64/base64.zig
@@ -48,6 +48,20 @@ pub fn encode(destination: []u8, source: []const u8) usize {
     return bun.simdutf.base64.encode(source, destination, false);
 }
 
+pub fn simdutfEncodeLenUrlSafe(source_len: usize) usize {
+    return bun.simdutf.base64.encode_len(source_len, true);
+}
+
+/// Encode with the following differences from regular `encode` function:
+///
+/// * No padding is added (the extra `=` characters at the end)
+/// * `-` and `_` are used instead of `+` and `/`
+///
+/// See the documentation for simdutf's `binary_to_base64` function for more details (simdutf_impl.h).
+pub fn simdutfEncodeUrlSafe(destination: []u8, source: []const u8) usize {
+    return bun.simdutf.base64.encode(source, destination, true);
+}
+
 pub fn decodeLenUpperBound(len: usize) usize {
     return zig_base64.standard.Decoder.calcSizeUpperBound(len) catch {
         //fallback
diff --git a/src/bun.js/api/BunObject.zig b/src/bun.js/api/BunObject.zig
index 45b40bfd2e0980..7ee4acafd735f2 100644
--- a/src/bun.js/api/BunObject.zig
+++ b/src/bun.js/api/BunObject.zig
@@ -3625,7 +3625,15 @@ const TOMLObject = struct {
             return globalThis.throwValue(log.toJS(globalThis, default_allocator, "Failed to print toml"));
         };
         var writer = js_printer.BufferPrinter.init(buffer_writer);
-        _ = js_printer.printJSON(*js_printer.BufferPrinter, &writer, parse_result, &source, .{}) catch {
+        _ = js_printer.printJSON(
+            *js_printer.BufferPrinter,
+            &writer,
+            parse_result,
+            &source,
+            .{
+                .mangled_props = null,
+            },
+        ) catch {
             return globalThis.throwValue(log.toJS(globalThis, default_allocator, "Failed to print toml"));
         };
 
diff --git a/src/bun.js/api/server.zig b/src/bun.js/api/server.zig
index 905863038994ac..a0ed809d571bbd 100644
--- a/src/bun.js/api/server.zig
+++ b/src/bun.js/api/server.zig
@@ -7518,7 +7518,7 @@ pub fn NewServer(comptime NamespaceType: type, comptime ssl_enabled_: bool, comp
                 &writer,
                 bun.Global.BunInfo.generate(*Transpiler, &JSC.VirtualMachine.get().transpiler, allocator) catch unreachable,
                 &source,
-                .{},
+                .{ .mangled_props = null },
             ) catch unreachable;
 
             resp.writeStatus("200 OK");
diff --git a/src/bun.js/bindings/bun-simdutf.cpp b/src/bun.js/bindings/bun-simdutf.cpp
index e6dd1c471d4c6c..6aba5caa744a75 100644
--- a/src/bun.js/bindings/bun-simdutf.cpp
+++ b/src/bun.js/bindings/bun-simdutf.cpp
@@ -339,6 +339,11 @@ size_t simdutf__base64_encode(const char* input, size_t length, char* output, in
     return simdutf::binary_to_base64(input, length, output, is_urlsafe ? simdutf::base64_url : simdutf::base64_default);
 }
 
+size_t simdutf__base64_length_from_binary(size_t length, int is_urlsafe)
+{
+    return simdutf::base64_length_from_binary(length, is_urlsafe ? simdutf::base64_url : simdutf::base64_default);
+}
+
 SIMDUTFResult simdutf__base64_decode_from_binary(const char* input, size_t length, char* output, size_t outlen_, int is_urlsafe)
 {
     size_t outlen = outlen_;
diff --git a/src/bun.js/bindings/bun-simdutf.zig b/src/bun.js/bindings/bun-simdutf.zig
index 7ef948dfc22c1f..246624c3f3c1ae 100644
--- a/src/bun.js/bindings/bun-simdutf.zig
+++ b/src/bun.js/bindings/bun-simdutf.zig
@@ -387,11 +387,16 @@ pub const base64 = struct {
     extern fn simdutf__base64_encode(input: [*]const u8, length: usize, output: [*]u8, is_urlsafe: c_int) usize;
     extern fn simdutf__base64_decode_from_binary(input: [*]const u8, length: usize, output: [*]u8, outlen: usize, is_urlsafe: c_int) SIMDUTFResult;
     extern fn simdutf__base64_decode_from_binary16(input: [*]const u16, length: usize, output: [*]u8, outlen: usize, is_urlsafe: c_int) SIMDUTFResult;
+    extern fn simdutf__base64_length_from_binary(length: usize, options: c_int) usize;
 
     pub fn encode(input: []const u8, output: []u8, is_urlsafe: bool) usize {
         return simdutf__base64_encode(input.ptr, input.len, output.ptr, @intFromBool(is_urlsafe));
     }
 
+    pub fn encode_len(input: usize, is_urlsafe: bool) usize {
+        return simdutf__base64_length_from_binary(input, @intFromBool(is_urlsafe));
+    }
+
     pub fn decode(input: []const u8, output: []u8, is_urlsafe: bool) SIMDUTFResult {
         return simdutf__base64_decode_from_binary(input.ptr, input.len, output.ptr, output.len, @intFromBool(is_urlsafe));
     }
diff --git a/src/bundler/bundle_v2.zig b/src/bundler/bundle_v2.zig
index 71dcae1294f162..76f27263a583b7 100644
--- a/src/bundler/bundle_v2.zig
+++ b/src/bundler/bundle_v2.zig
@@ -67,7 +67,7 @@ const linker = @import("../linker.zig");
 const sourcemap = bun.sourcemap;
 const StringJoiner = bun.StringJoiner;
 const base64 = bun.base64;
-const Ref = @import("../ast/base.zig").Ref;
+pub const Ref = @import("../ast/base.zig").Ref;
 const Define = @import("../defines.zig").Define;
 const DebugOptions = @import("../cli.zig").Command.DebugOptions;
 const ThreadPoolLib = @import("../thread_pool.zig");
@@ -134,6 +134,8 @@ const DataURL = @import("../resolver/resolver.zig").DataURL;
 
 const logPartDependencyTree = Output.scoped(.part_dep_tree, false);
 
+pub const MangledProps = std.AutoArrayHashMapUnmanaged(Ref, []const u8);
+
 fn tracer(comptime src: std.builtin.SourceLocation, comptime name: [:0]const u8) bun.tracy.Ctx {
     return bun.tracy.traceNamed(src, "Transpiler." ++ name);
 }
@@ -616,7 +618,7 @@ pub const BundleV2 = struct {
             }
 
             const is_js = v.all_loaders[source_index.get()].isJavaScriptLike();
-            const is_css = v.all_loaders[source_index.get()] == .css;
+            const is_css = v.all_loaders[source_index.get()].isCSS();
 
             const import_record_list_id = source_index;
             // when there are no import records, v index will be invalid
@@ -3206,7 +3208,7 @@ pub const BundleV2 = struct {
             }
 
             if (this.transpiler.options.dev_server) |dev_server| brk: {
-                if (loader == .css) {
+                if (loader.isCSS()) {
                     // Do not use cached files for CSS.
                     break :brk;
                 }
@@ -3511,12 +3513,12 @@ pub const BundleV2 = struct {
                 const input_file_loaders = this.graph.input_files.items(.loader);
                 const save_import_record_source_index = this.transpiler.options.dev_server == null or
                     result.loader == .html or
-                    result.loader == .css;
+                    result.loader.isCSS();
 
                 if (this.resolve_tasks_waiting_for_import_source_index.fetchSwapRemove(result.source.index.get())) |pending_entry| {
                     for (pending_entry.value.slice()) |to_assign| {
                         if (save_import_record_source_index or
-                            input_file_loaders[to_assign.to_source_index.get()] == .css)
+                            input_file_loaders[to_assign.to_source_index.get()].isCSS())
                         {
                             import_records.slice()[to_assign.import_record_index].source_index = to_assign.to_source_index;
                         }
@@ -4179,6 +4181,7 @@ pub const ParseTask = struct {
         loader: Loader,
         unique_key_prefix: u64,
         unique_key_for_additional_file: *FileLoaderHash,
+        has_any_css_locals: *std.atomic.Value(u32),
     ) !JSAst {
         switch (loader) {
             .jsx, .tsx, .js, .ts => {
@@ -4380,6 +4383,7 @@ pub const ParseTask = struct {
                 return JSAst.init(ast);
             },
             .css => {
+                // make css ast
                 var import_records = BabyList(ImportRecord){};
                 const source_code = source.contents;
                 var temp_log = bun.logger.Log.init(allocator);
@@ -4387,11 +4391,22 @@ pub const ParseTask = struct {
                     temp_log.appendToMaybeRecycled(log, &source) catch bun.outOfMemory();
                 }
 
-                var css_ast = switch (bun.css.BundlerStyleSheet.parseBundler(
+                const css_module_suffix = ".module.css";
+                const enable_css_modules = source.path.pretty.len > css_module_suffix.len and
+                    strings.eqlComptime(source.path.pretty[source.path.pretty.len - css_module_suffix.len ..], css_module_suffix);
+                const parser_options = if (enable_css_modules) init: {
+                    var parseropts = bun.css.ParserOptions.default(allocator, &temp_log);
+                    parseropts.filename = bun.path.basename(source.path.pretty);
+                    parseropts.css_modules = bun.css.CssModuleConfig{};
+                    break :init parseropts;
+                } else bun.css.ParserOptions.default(allocator, &temp_log);
+
+                var css_ast, var extra = switch (bun.css.BundlerStyleSheet.parseBundler(
                     allocator,
                     source_code,
-                    bun.css.ParserOptions.default(allocator, &temp_log),
+                    parser_options,
                     &import_records,
+                    source.index,
                 )) {
                     .result => |v| v,
                     .err => |e| {
@@ -4399,16 +4414,29 @@ pub const ParseTask = struct {
                         return error.SyntaxError;
                     },
                 };
+                // Make sure the css modules local refs have a valid tag
+                if (comptime bun.Environment.isDebug) {
+                    if (css_ast.local_scope.count() > 0) {
+                        for (css_ast.local_scope.values()) |entry| {
+                            const ref = entry.ref;
+                            bun.assert(ref.innerIndex() < extra.symbols.len);
+                        }
+                    }
+                }
                 if (css_ast.minify(allocator, bun.css.MinifyOptions{
                     .targets = bun.css.Targets.forBundlerTarget(transpiler.options.target),
                     .unused_symbols = .{},
-                }).asErr()) |e| {
+                }, &extra).asErr()) |e| {
                     try e.addToLogger(&temp_log, &source, allocator);
                     return error.MinifyError;
                 }
+                if (css_ast.local_scope.count() > 0) {
+                    _ = has_any_css_locals.fetchAdd(1, .monotonic);
+                }
+                // If this is a css module, the final exports object wil be set in `generateCodeForLazyExport`.
                 const root = Expr.init(E.Object, E.Object{}, Logger.Loc{ .start = 0 });
                 const css_ast_heap = bun.create(allocator, bun.css.BundlerStyleSheet, css_ast);
-                var ast = JSAst.init((try js_parser.newLazyExportAST(allocator, transpiler.options.define, opts, &temp_log, root, &source, "")).?);
+                var ast = JSAst.init((try js_parser.newLazyExportASTImpl(allocator, transpiler.options.define, opts, &temp_log, root, &source, "", extra.symbols)).?);
                 ast.css = css_ast_heap;
                 ast.import_records = import_records;
                 return ast;
@@ -5077,9 +5105,9 @@ pub const ParseTask = struct {
             .content_hash = 0,
         };
         var ast: JSAst = if (!is_empty)
-            try getAST(log, transpiler, opts, allocator, resolver, source, loader, task.ctx.unique_key, &unique_key_for_additional_file)
+            try getAST(log, transpiler, opts, allocator, resolver, source, loader, task.ctx.unique_key, &unique_key_for_additional_file, &task.ctx.linker.has_any_css_locals)
         else switch (opts.module_type == .esm) {
-            inline else => |as_undefined| if (loader == .css) try getEmptyCSSAST(
+            inline else => |as_undefined| if (loader.isCSS()) try getEmptyCSSAST(
                 log,
                 transpiler,
                 opts,
@@ -6256,10 +6284,15 @@ pub const LinkerContext = struct {
     /// to know whether or not we can free it safely.
     pending_task_count: std.atomic.Value(u32) = std.atomic.Value(u32).init(0),
 
+    ///
+    has_any_css_locals: std.atomic.Value(u32) = std.atomic.Value(u32).init(0),
+
     /// Used by Bake to extract []CompileResult before it is joined
     dev_server: ?*bun.bake.DevServer = null,
     framework: ?*const bake.Framework = null,
 
+    mangled_props: MangledProps = .{},
+
     fn pathWithPrettyInitialized(this: *LinkerContext, path: Fs.Path) !Fs.Path {
         return genericPathWithPrettyInitialized(path, this.options.target, this.resolver.fs.top_level_dir, this.graph.allocator);
     }
@@ -7177,6 +7210,10 @@ pub const LinkerContext = struct {
                 wrapping_conditions: *BabyList(bun.css.ImportConditions),
                 wrapping_import_records: *BabyList(ImportRecord),
             ) void {
+                debug(
+                    "Visit file: {d}={s}",
+                    .{ source_index.get(), visitor.parse_graph.input_files.items(.source)[source_index.get()].path.pretty },
+                );
                 // The CSS specification strangely does not describe what to do when there
                 // is a cycle. So we are left with reverse-engineering the behavior from a
                 // real browser. Here's what the WebKit code base has to say about this:
@@ -7188,6 +7225,10 @@ pub const LinkerContext = struct {
                 // WebKit for more information.
                 for (visitor.visited.slice()) |visitedSourceIndex| {
                     if (visitedSourceIndex.get() == source_index.get()) {
+                        debug(
+                            "Skip file: {d}={s}",
+                            .{ source_index.get(), visitor.parse_graph.input_files.items(.source)[source_index.get()].path.pretty },
+                        );
                         return;
                     }
                 }
@@ -7273,24 +7314,29 @@ pub const LinkerContext = struct {
                                     },
                                 ) catch bun.outOfMemory();
                             }
+                            debug(
+                                "Push external: {d}={s}",
+                                .{ source_index.get(), visitor.parse_graph.input_files.items(.source)[source_index.get()].path.pretty },
+                            );
                             visitor.has_external_import = true;
                         }
                     }
                 }
 
-                // TODO: composes from css modules
+                // Iterate over the "composes" directives. Note that the order doesn't
+                // matter for these because the output order is explicitly undfened
+                // in the specification.
+                for (visitor.all_import_records[source_index.get()].sliceConst()) |*record| {
+                    if (record.kind == .composes and record.source_index.isValid()) {
+                        visitor.visit(record.source_index, wrapping_conditions, wrapping_import_records);
+                    }
+                }
 
                 if (comptime bun.Environment.isDebug) {
                     debug(
-                        "Looking at file: {d}={s}",
+                        "Push file: {d}={s}",
                         .{ source_index.get(), visitor.parse_graph.input_files.items(.source)[source_index.get()].path.pretty },
                     );
-                    for (visitor.visited.slice()) |idx| {
-                        debug(
-                            "Visit: {d}",
-                            .{idx.get()},
-                        );
-                    }
                 }
                 // Accumulate imports in depth-first postorder
                 visitor.order.push(visitor.allocator, Chunk.CssImportOrder{
@@ -7321,6 +7367,8 @@ pub const LinkerContext = struct {
 
         const css_asts: []const ?*bun.css.BundlerStyleSheet = this.graph.ast.items(.css);
 
+        debugCssOrder(this, &order, .BEFORE_HOISTING);
+
         // CSS syntax unfortunately only allows "@import" rules at the top of the
         // file. This means we must hoist all external "@import" rules to the top of
         // the file when bundling, even though doing so will change the order of CSS
@@ -7620,6 +7668,7 @@ pub const LinkerContext = struct {
     }
 
     const CssOrderDebugStep = enum {
+        BEFORE_HOISTING,
         AFTER_HOISTING,
         AFTER_REMOVING_DUPLICATES,
         WHILE_OPTIMIZING_REDUNDANT_LAYER_RULES,
@@ -7648,6 +7697,7 @@ pub const LinkerContext = struct {
                     const writer = arrlist.writer(arena.allocator());
                     const W = @TypeOf(writer);
                     arrlist.appendSlice(arena.allocator(), "[") catch unreachable;
+                    var symbols = Symbol.Map{};
                     for (entry.conditions.sliceConst(), 0..) |*condition_, j| {
                         const condition: *const bun.css.ImportConditions = condition_;
                         const scratchbuf = std.ArrayList(u8).init(arena.allocator());
@@ -7661,6 +7711,8 @@ pub const LinkerContext = struct {
                                 .ast_urls_for_css = this.parse_graph.ast.items(.url_for_css),
                                 .ast_unique_key_for_additional_file = this.parse_graph.input_files.items(.unique_key_for_additional_file),
                             },
+                            &this.mangled_props,
+                            &symbols,
                         );
 
                         condition.toCss(W, &printer) catch unreachable;
@@ -7795,11 +7847,13 @@ pub const LinkerContext = struct {
 
         const all_import_records = this.graph.ast.items(.import_records);
         const all_loaders = this.parse_graph.input_files.items(.loader);
+        const all_parts = this.graph.ast.items(.parts);
 
         const visit = struct {
             fn visit(
                 c: *LinkerContext,
                 import_records: []const BabyList(ImportRecord),
+                parts: []const Part.List,
                 loaders: []const Loader,
                 temp: std.mem.Allocator,
                 visits: *BitSet,
@@ -7811,25 +7865,31 @@ pub const LinkerContext = struct {
                 visits.set(source_index.get());
 
                 const records: []ImportRecord = import_records[source_index.get()].slice();
-
-                for (records) |record| {
-                    if (record.source_index.isValid()) {
-                        // Traverse any files imported by this part. Note that CommonJS calls
-                        // to "require()" count as imports too, sort of as if the part has an
-                        // ESM "import" statement in it. This may seem weird because ESM imports
-                        // are a compile-time concept while CommonJS imports are a run-time
-                        // concept. But we don't want to manipulate <style> tags at run-time so
-                        // this is the only way to do it.
-                        visit(
-                            c,
-                            import_records,
-                            loaders,
-                            temp,
-                            visits,
-                            o,
-                            record.source_index,
-                            loaders[record.source_index.get()] == .css,
-                        );
+                const p = &parts[source_index.get()];
+
+                // Iterate over each part in the file in order
+                for (p.sliceConst()) |part| {
+                    // Traverse any files imported by this part. Note that CommonJS calls
+                    // to "require()" count as imports too, sort of as if the part has an
+                    // ESM "import" statement in it. This may seem weird because ESM imports
+                    // are a compile-time concept while CommonJS imports are a run-time
+                    // concept. But we don't want to manipulate <style> tags at run-time so
+                    // this is the only way to do it.
+                    for (part.import_record_indices.sliceConst()) |import_record_index| {
+                        const record = &records[import_record_index];
+                        if (record.source_index.isValid()) {
+                            visit(
+                                c,
+                                import_records,
+                                parts,
+                                loaders,
+                                temp,
+                                visits,
+                                o,
+                                record.source_index,
+                                loaders[record.source_index.get()].isCSS(),
+                            );
+                        }
                     }
                 }
 
@@ -7843,6 +7903,7 @@ pub const LinkerContext = struct {
         visit(
             this,
             all_import_records,
+            all_parts,
             all_loaders,
             temp_allocator,
             &visited,
@@ -7885,6 +7946,9 @@ pub const LinkerContext = struct {
 
     fn generateCodeForLazyExport(this: *LinkerContext, source_index: Index.Int) !void {
         const exports_kind = this.graph.ast.items(.exports_kind)[source_index];
+        const all_sources = this.parse_graph.input_files.items(.source);
+        const all_css_asts = this.graph.ast.items(.css);
+        const maybe_css_ast: ?*bun.css.BundlerStyleSheet = all_css_asts[source_index];
         var parts = &this.graph.ast.items(.parts)[source_index];
 
         if (parts.len < 1) {
@@ -7897,6 +7961,252 @@ pub const LinkerContext = struct {
             @panic("Internal error: expected at least one statement in the lazy export");
         }
 
+        const module_ref = this.graph.ast.items(.module_ref)[source_index];
+
+        // Handle css modules
+        //
+        // --- original comment from esbuild ---
+        // If this JavaScript file is a stub from a CSS file, populate the exports of
+        // this JavaScript stub with the local names from that CSS file. This is done
+        // now instead of earlier because we need the whole bundle to be present.
+        if (maybe_css_ast) |css_ast| {
+            const stmt: Stmt = part.stmts[0];
+            if (stmt.data != .s_lazy_export) {
+                @panic("Internal error: expected top-level lazy export statement");
+            }
+            if (css_ast.local_scope.count() > 0) out: {
+                var exports = E.Object{};
+
+                const symbols: *const Symbol.List = &this.graph.ast.items(.symbols)[source_index];
+                const all_import_records: []const BabyList(bun.css.ImportRecord) = this.graph.ast.items(.import_records);
+
+                const values = css_ast.local_scope.values();
+                if (values.len == 0) break :out;
+                const size = size: {
+                    var size: u32 = 0;
+                    for (values) |entry| {
+                        size = @max(size, entry.ref.inner_index);
+                    }
+                    break :size size + 1;
+                };
+
+                var inner_visited = try BitSet.initEmpty(this.allocator, size);
+                defer inner_visited.deinit(this.allocator);
+                var composes_visited = std.AutoArrayHashMap(bun.bundle_v2.Ref, void).init(this.allocator);
+                defer composes_visited.deinit();
+
+                const Visitor = struct {
+                    inner_visited: *BitSet,
+                    composes_visited: *std.AutoArrayHashMap(bun.bundle_v2.Ref, void),
+                    parts: *std.ArrayList(E.TemplatePart),
+                    all_import_records: []const BabyList(bun.css.ImportRecord),
+                    all_css_asts: []?*bun.css.BundlerStyleSheet,
+                    all_sources: []const Logger.Source,
+                    all_symbols: []const Symbol.List,
+                    source_index: Index.Int,
+                    log: *Logger.Log,
+                    loc: Loc,
+                    allocator: std.mem.Allocator,
+
+                    fn clearAll(visitor: *@This()) void {
+                        visitor.inner_visited.setAll(false);
+                        visitor.composes_visited.clearRetainingCapacity();
+                    }
+
+                    fn visitName(visitor: *@This(), ast: *bun.css.BundlerStyleSheet, ref: bun.css.CssRef, idx: Index.Int) void {
+                        bun.assert(ref.canBeComposed());
+                        const from_this_file = ref.sourceIndex(idx) == visitor.source_index;
+                        if ((from_this_file and visitor.inner_visited.isSet(ref.innerIndex())) or
+                            (!from_this_file and visitor.composes_visited.contains(ref.toRealRef(idx))))
+                        {
+                            return;
+                        }
+
+                        visitor.visitComposes(ast, ref, idx);
+                        visitor.parts.append(E.TemplatePart{
+                            .value = Expr.init(
+                                E.NameOfSymbol,
+                                E.NameOfSymbol{
+                                    .ref = ref.toRealRef(idx),
+                                },
+                                visitor.loc,
+                            ),
+                            .tail = .{
+                                .cooked = E.String.init(" "),
+                            },
+                            .tail_loc = visitor.loc,
+                        }) catch bun.outOfMemory();
+
+                        if (from_this_file) {
+                            visitor.inner_visited.set(ref.innerIndex());
+                        } else {
+                            visitor.composes_visited.put(ref.toRealRef(idx), {}) catch unreachable;
+                        }
+                    }
+
+                    fn warnNonSingleClassComposes(visitor: *@This(), ast: *bun.css.BundlerStyleSheet, css_ref: bun.css.CssRef, idx: Index.Int, compose_loc: Loc) void {
+                        const ref = css_ref.toRealRef(idx);
+                        _ = ref;
+                        const syms: *const Symbol.List = &visitor.all_symbols[css_ref.sourceIndex(idx)];
+                        const name = syms.at(css_ref.innerIndex()).original_name;
+                        const loc = ast.local_scope.get(name).?.loc;
+
+                        visitor.log.addRangeErrorFmtWithNote(
+                            &visitor.all_sources[idx],
+                            .{ .loc = compose_loc },
+                            visitor.allocator,
+                            "The composes property cannot be used with {}, because it is not a single class name.",
+                            .{
+                                bun.fmt.quote(name),
+                            },
+                            "The definition of {} is here.",
+                            .{
+                                bun.fmt.quote(name),
+                            },
+
+                            .{
+                                .loc = loc,
+                            },
+                        ) catch bun.outOfMemory();
+                    }
+
+                    fn visitComposes(visitor: *@This(), ast: *bun.css.BundlerStyleSheet, css_ref: bun.css.CssRef, idx: Index.Int) void {
+                        const ref = css_ref.toRealRef(idx);
+                        if (ast.composes.count() > 0) {
+                            const composes = ast.composes.getPtr(ref) orelse return;
+                            // while parsing we check that we only allow `composes` on single class selectors
+                            bun.assert(css_ref.tag.class);
+
+                            for (composes.composes.slice()) |*compose| {
+                                // it is imported
+                                if (compose.from != null) {
+                                    if (compose.from.? == .import_record_index) {
+                                        const import_record_idx = compose.from.?.import_record_index;
+                                        const import_records: *const BabyList(bun.css.ImportRecord) = &visitor.all_import_records[idx];
+                                        const import_record = import_records.at(import_record_idx);
+                                        if (import_record.source_index.isValid()) {
+                                            const other_file = visitor.all_css_asts[import_record.source_index.get()] orelse {
+                                                visitor.log.addErrorFmt(
+                                                    &visitor.all_sources[idx],
+                                                    compose.loc,
+                                                    visitor.allocator,
+                                                    "Cannot use the \"composes\" property with the {} file (it is not a CSS file)",
+                                                    .{bun.fmt.quote(visitor.all_sources[import_record.source_index.get()].path.pretty)},
+                                                ) catch bun.outOfMemory();
+                                                continue;
+                                            };
+                                            for (compose.names.slice()) |name| {
+                                                const other_name_entry = other_file.local_scope.get(name.v) orelse continue;
+                                                const other_name_ref = other_name_entry.ref;
+                                                if (!other_name_ref.canBeComposed()) {
+                                                    visitor.warnNonSingleClassComposes(other_file, other_name_ref, import_record.source_index.get(), compose.loc);
+                                                } else {
+                                                    visitor.visitName(other_file, other_name_ref, import_record.source_index.get());
+                                                }
+                                            }
+                                        }
+                                    } else if (compose.from.? == .global) {
+                                        // E.g.: `composes: foo from global`
+                                        //
+                                        // In this example `foo` is global and won't be rewritten to a locally scoped
+                                        // name, so we can just add it as a string.
+                                        for (compose.names.slice()) |name| {
+                                            visitor.parts.append(
+                                                E.TemplatePart{
+                                                    .value = Expr.init(
+                                                        E.String,
+                                                        E.String.init(name.v),
+                                                        visitor.loc,
+                                                    ),
+                                                    .tail = .{
+                                                        .cooked = E.String.init(" "),
+                                                    },
+                                                    .tail_loc = visitor.loc,
+                                                },
+                                            ) catch bun.outOfMemory();
+                                        }
+                                    }
+                                } else {
+                                    // it is from the current file
+                                    for (compose.names.slice()) |name| {
+                                        const name_entry = ast.local_scope.get(name.v) orelse {
+                                            visitor.log.addErrorFmt(
+                                                &visitor.all_sources[idx],
+                                                compose.loc,
+                                                visitor.allocator,
+                                                "The name {} never appears in {} as a CSS modules locally scoped class name. Note that \"composes\" only works with single class selectors.",
+                                                .{
+                                                    bun.fmt.quote(name.v),
+                                                    bun.fmt.quote(visitor.all_sources[idx].path.pretty),
+                                                },
+                                            ) catch bun.outOfMemory();
+                                            continue;
+                                        };
+                                        const name_ref = name_entry.ref;
+                                        if (!name_ref.canBeComposed()) {
+                                            visitor.warnNonSingleClassComposes(ast, name_ref, idx, compose.loc);
+                                        } else {
+                                            visitor.visitName(ast, name_ref, idx);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                };
+
+                var visitor = Visitor{
+                    .inner_visited = &inner_visited,
+                    .composes_visited = &composes_visited,
+                    .source_index = source_index,
+                    .parts = undefined,
+                    .all_import_records = all_import_records,
+                    .all_css_asts = all_css_asts,
+                    .loc = stmt.loc,
+                    .log = this.log,
+                    .all_sources = all_sources,
+                    .allocator = this.allocator,
+                    .all_symbols = this.graph.ast.items(.symbols),
+                };
+
+                for (values) |entry| {
+                    const ref = entry.ref;
+                    bun.assert(ref.inner_index < symbols.len);
+
+                    var template_parts = std.ArrayList(E.TemplatePart).init(this.allocator);
+                    var value = Expr.init(E.NameOfSymbol, E.NameOfSymbol{ .ref = ref.toRealRef(source_index) }, stmt.loc);
+
+                    visitor.parts = &template_parts;
+                    visitor.clearAll();
+                    visitor.inner_visited.set(ref.innerIndex());
+                    if (ref.tag.class) visitor.visitComposes(css_ast, ref, source_index);
+
+                    if (template_parts.items.len > 0) {
+                        template_parts.append(E.TemplatePart{
+                            .value = value,
+                            .tail_loc = stmt.loc,
+                            .tail = .{ .cooked = E.String.init("") },
+                        }) catch bun.outOfMemory();
+                        value = Expr.init(
+                            E.Template,
+                            E.Template{
+                                .parts = template_parts.items,
+                                .head = .{
+                                    .cooked = E.String.init(""),
+                                },
+                            },
+                            stmt.loc,
+                        );
+                    }
+
+                    const key = symbols.at(ref.innerIndex()).original_name;
+                    try exports.put(this.allocator, key, value);
+                }
+
+                part.stmts[0].data.s_lazy_export.* = Expr.init(E.Object, exports, stmt.loc).data;
+            }
+        }
+
         const stmt: Stmt = part.stmts[0];
         if (stmt.data != .s_lazy_export) {
             @panic("Internal error: expected top-level lazy export statement");
@@ -7906,7 +8216,6 @@ pub const LinkerContext = struct {
             .data = stmt.data.s_lazy_export.*,
             .loc = stmt.loc,
         };
-        const module_ref = this.graph.ast.items(.module_ref)[source_index];
 
         switch (exports_kind) {
             .cjs => {
@@ -8068,6 +8377,7 @@ pub const LinkerContext = struct {
 
                 // Is it CSS?
                 if (css_asts[id] != null) {
+                    const css_ast = css_asts[id].?;
                     // Inline URLs for non-CSS files into the CSS file
                     _ = this.scanCSSImports(
                         id,
@@ -8077,8 +8387,33 @@ pub const LinkerContext = struct {
                         loaders,
                         this.log,
                     );
-                    // TODO:
+
                     // Validate cross-file "composes: ... from" named imports
+                    for (css_ast.composes.values()) |*composes| {
+                        for (composes.composes.slice()) |*compose| {
+                            if (compose.from == null or compose.from.? != .import_record_index) continue;
+                            const import_record_idx = compose.from.?.import_record_index;
+                            const record = &import_records[import_record_idx];
+                            if (!record.source_index.isValid()) continue;
+                            const other_css_ast = css_asts[record.source_index.get()] orelse continue;
+                            for (compose.names.slice()) |name| {
+                                if (!other_css_ast.local_scope.contains(name.v)) {
+                                    try this.log.addErrorFmt(
+                                        &input_files[record.source_index.get()],
+                                        compose.loc,
+                                        this.allocator,
+                                        "The name \"{s}\" never appears in \"{s}\" as a CSS modules locally scoped class name. Note that \"composes\" only works with single class selectors.",
+                                        .{
+                                            name.v,
+                                            input_files[record.source_index.get()].path.pretty,
+                                        },
+                                    );
+                                }
+                            }
+                        }
+                    }
+                    this.validateComposesFromProperties(id, css_ast, import_records_list, css_asts);
+
                     continue;
                 }
 
@@ -8860,6 +9195,185 @@ pub const LinkerContext = struct {
         }
     }
 
+    /// CSS modules spec says that the following is undefined behavior:
+    ///
+    /// ```css
+    /// .foo {
+    ///     composes: bar;
+    ///     color: red;
+    /// }
+    ///
+    /// .bar {
+    ///     color: blue;
+    /// }
+    /// ```
+    ///
+    /// Specfically, composing two classes that both define the same property is undefined behavior.
+    ///
+    /// We check this by recording, at parse time, properties that classes use in the `PropertyUsage` struct.
+    /// Then here, we compare the properties of the two classes to ensure that there are no conflicts.
+    ///
+    /// There is one case we skip, which is checking the properties of composing from the global scope (`composes: X from global`).
+    ///
+    /// The reason we skip this is because it would require tracking _every_ property of _every_ class (not just CSS module local classes).
+    /// This sucks because:
+    /// 1. It introduces a performance hit even if the user did not use CSS modules
+    /// 2. Composing from the global scope is pretty rare
+    ///
+    /// We should find a way to do this without incurring performance penalties to the common cases.
+    fn validateComposesFromProperties(
+        this: *LinkerContext,
+        index: Index.Int,
+        root_css_ast: *bun.css.BundlerStyleSheet,
+        import_records_list: []ImportRecord.List,
+        all_css_asts: []const ?*bun.css.BundlerStyleSheet,
+    ) void {
+        const PropertyInFile = struct {
+            source_index: Index.Int,
+            range: bun.logger.Range,
+        };
+        const Visitor = struct {
+            visited: std.AutoArrayHashMap(Ref, void),
+            properties: bun.StringArrayHashMap(PropertyInFile),
+            all_import_records: []const ImportRecord.List,
+            all_css_asts: []const ?*bun.css.BundlerStyleSheet,
+            all_symbols: *const Symbol.Map,
+            all_sources: []const Logger.Source,
+            temp_allocator: std.mem.Allocator,
+            allocator: std.mem.Allocator,
+            log: *Logger.Log,
+
+            pub fn deinit(v: *@This()) void {
+                v.visited.deinit();
+                v.properties.deinit();
+            }
+
+            fn addPropertyOrWarn(v: *@This(), local: Ref, property_name: []const u8, source_index: Index.Int, range: bun.logger.Range) void {
+                const entry = v.properties.getOrPut(property_name) catch bun.outOfMemory();
+
+                if (!entry.found_existing) {
+                    entry.value_ptr.* = .{
+                        .source_index = source_index,
+                        .range = range,
+                    };
+                    return;
+                }
+
+                if (entry.value_ptr.source_index == source_index or entry.value_ptr.source_index == Index.invalid.get()) {
+                    return;
+                }
+
+                const local_original_name = v.all_symbols.get(local).?.original_name;
+
+                v.log.addMsg(.{
+                    .kind = .err,
+                    .data = Logger.rangeData(
+                        &v.all_sources[source_index],
+                        range,
+                        Logger.Log.allocPrint(
+                            v.allocator,
+                            "<r>The value of <b>{s}<r> in the class <b>{s}<r> is undefined.",
+                            .{ property_name, local_original_name },
+                        ) catch bun.outOfMemory(),
+                    ).cloneLineText(v.log.clone_line_text, v.log.msgs.allocator) catch bun.outOfMemory(),
+                    .notes = v.allocator.dupe(
+                        Logger.Data,
+                        &.{
+                            bun.logger.rangeData(
+                                &v.all_sources[entry.value_ptr.source_index],
+                                entry.value_ptr.range,
+                                Logger.Log.allocPrint(v.allocator, "The first definition of {s} is in this style rule:", .{property_name}) catch bun.outOfMemory(),
+                            ),
+                            .{ .text = std.fmt.allocPrint(
+                                v.allocator,
+                                "The specification of \"composes\" does not define an order when class declarations from separate files are composed together. " ++
+                                    "The value of the {} property for {} may change unpredictably as the code is edited. " ++
+                                    "Make sure that all definitions of {} for {} are in a single file.",
+                                .{ bun.fmt.quote(property_name), bun.fmt.quote(local_original_name), bun.fmt.quote(property_name), bun.fmt.quote(local_original_name) },
+                            ) catch bun.outOfMemory() },
+                        },
+                    ) catch bun.outOfMemory(),
+                }) catch bun.outOfMemory();
+
+                // Don't warn more than once
+                entry.value_ptr.source_index = Index.invalid.get();
+            }
+
+            fn clearRetainingCapacity(v: *@This()) void {
+                v.visited.clearRetainingCapacity();
+                v.properties.clearRetainingCapacity();
+            }
+
+            fn visit(v: *@This(), idx: Index.Int, ast: *bun.css.BundlerStyleSheet, ref: Ref) void {
+                if (v.visited.contains(ref)) return;
+                v.visited.put(ref, {}) catch unreachable;
+
+                // This local name was in a style rule that
+                if (ast.composes.getPtr(ref)) |composes| {
+                    for (composes.composes.sliceConst()) |*compose| {
+                        // is an import
+                        if (compose.from != null) {
+                            if (compose.from.? == .import_record_index) {
+                                const import_record_idx = compose.from.?.import_record_index;
+                                const record = v.all_import_records[idx].at(import_record_idx);
+                                if (record.source_index.isInvalid()) continue;
+                                const other_ast = v.all_css_asts[record.source_index.get()] orelse continue;
+                                for (compose.names.slice()) |name| {
+                                    const other_name = other_ast.local_scope.get(name.v) orelse continue;
+                                    const other_name_ref = other_name.ref.toRealRef(record.source_index.get());
+                                    v.visit(record.source_index.get(), other_ast, other_name_ref);
+                                }
+                            } else {
+                                bun.assert(compose.from.? == .global);
+                                // Otherwise it is composed from the global scope.
+                                //
+                                // See comment above for why we are skipping checking this for now.
+                            }
+                        } else {
+                            // inside this file
+                            for (compose.names.slice()) |name| {
+                                const name_entry = ast.local_scope.get(name.v) orelse continue;
+                                v.visit(idx, ast, name_entry.ref.toRealRef(idx));
+                            }
+                        }
+                    }
+                }
+
+                const property_usage = ast.local_properties.getPtr(ref) orelse return;
+                // Warn about cross-file composition with the same CSS properties
+                var iter = property_usage.bitset.iterator(.{});
+                while (iter.next()) |property_tag| {
+                    const property_id_tag: bun.css.PropertyIdTag = @enumFromInt(@as(u16, @intCast(property_tag)));
+                    bun.assert(property_id_tag != .custom);
+                    bun.assert(property_id_tag != .unparsed);
+                    v.addPropertyOrWarn(ref, @tagName(property_id_tag), idx, property_usage.range);
+                }
+
+                for (property_usage.custom_properties) |property| {
+                    v.addPropertyOrWarn(ref, property, idx, property_usage.range);
+                }
+            }
+        };
+        var sfb = std.heap.stackFallback(1024, this.graph.allocator);
+        const temp_allocator = sfb.get();
+        var visitor = Visitor{
+            .visited = std.AutoArrayHashMap(Ref, void).init(temp_allocator),
+            .properties = bun.StringArrayHashMap(PropertyInFile).init(temp_allocator),
+            .all_import_records = import_records_list,
+            .all_css_asts = all_css_asts,
+            .all_symbols = &this.graph.symbols,
+            .all_sources = this.parse_graph.input_files.items(.source),
+            .temp_allocator = temp_allocator,
+            .allocator = this.graph.allocator,
+            .log = this.log,
+        };
+        defer visitor.deinit();
+        for (root_css_ast.local_scope.values()) |local| {
+            visitor.clearRetainingCapacity();
+            visitor.visit(index, root_css_ast, local.ref.toRealRef(index));
+        }
+    }
+
     pub fn scanCSSImports(
         this: *LinkerContext,
         file_source_index: u32,
@@ -10226,6 +10740,8 @@ pub const LinkerContext = struct {
 
         const css_import = chunk.content.css.imports_in_chunk_in_order.at(imports_in_chunk_index);
         const css: *const bun.css.BundlerStyleSheet = &chunk.content.css.asts[imports_in_chunk_index];
+        // const symbols: []const Symbol.List = c.graph.ast.items(.symbols);
+        const symbols = &c.graph.symbols;
 
         switch (css_import.kind) {
             .layers => {
@@ -10243,6 +10759,9 @@ pub const LinkerContext = struct {
                         .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
                         .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
                     },
+                    &c.mangled_props,
+                    // layer does not need symbols i think
+                    symbols,
                 )) {
                     .result => {},
                     .err => {
@@ -10277,6 +10796,9 @@ pub const LinkerContext = struct {
                         .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
                         .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
                     },
+                    &c.mangled_props,
+                    // external_path does not need symbols i think
+                    symbols,
                 )) {
                     .result => {},
                     .err => {
@@ -10311,6 +10833,8 @@ pub const LinkerContext = struct {
                         .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
                         .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
                     },
+                    &c.mangled_props,
+                    symbols,
                 )) {
                     .result => {},
                     .err => {
@@ -10450,6 +10974,7 @@ pub const LinkerContext = struct {
                             .source_map_urls = .{},
                             .license_comments = .{},
                             .options = bun.css.ParserOptions.default(allocator, null),
+                            .composes = .{},
                         };
                         wrapRulesWithConditions(&ast, allocator, &entry.conditions);
                         chunk.content.css.asts[i] = ast;
@@ -10493,6 +11018,7 @@ pub const LinkerContext = struct {
                                         }) catch bun.outOfMemory();
                                         break :rules rules;
                                     },
+                                    .composes = .{},
                                 };
 
                                 const printer_options = bun.css.PrinterOptions{
@@ -10509,6 +11035,8 @@ pub const LinkerContext = struct {
                                         .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
                                         .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
                                     },
+                                    &c.mangled_props,
+                                    &c.graph.symbols,
                                 )) {
                                     .result => |v| v,
                                     .err => |e| {
@@ -10543,6 +11071,7 @@ pub const LinkerContext = struct {
                             .source_map_urls = .{},
                             .license_comments = .{},
                             .options = bun.css.ParserOptions.default(allocator, null),
+                            .composes = .{},
                         };
                     },
                     .source_index => |source_index| {
@@ -10745,7 +11274,7 @@ pub const LinkerContext = struct {
                 if (this.linker.dev_server != null) {
                     if (unique_key_for_additional_files.len > 0) {
                         element.setAttribute(url_attribute, unique_key_for_additional_files) catch bun.outOfMemory();
-                    } else if (import_record.path.is_disabled or loader.isJavaScriptLike() or loader == .css) {
+                    } else if (import_record.path.is_disabled or loader.isJavaScriptLike() or loader.isCSS()) {
                         element.remove();
                     } else {
                         element.setAttribute(url_attribute, import_record.path.pretty) catch bun.outOfMemory();
@@ -10758,7 +11287,7 @@ pub const LinkerContext = struct {
                     return;
                 }
 
-                if (loader.isJavaScriptLike() or loader == .css) {
+                if (loader.isJavaScriptLike() or loader.isCSS()) {
                     // Remove the original non-external tags
                     element.remove();
                     return;
@@ -11090,6 +11619,7 @@ pub const LinkerContext = struct {
                 .minify_syntax = c.options.minify_syntax,
                 .target = c.options.target,
                 .print_dce_annotations = c.options.emit_dce_annotations,
+                .mangled_props = &c.mangled_props,
                 // .const_values = c.graph.const_values,
             };
 
@@ -12229,6 +12759,7 @@ pub const LinkerContext = struct {
             .minify_whitespace = c.options.minify_whitespace,
             .print_dce_annotations = c.options.emit_dce_annotations,
             .minify_syntax = c.options.minify_syntax,
+            .mangled_props = &c.mangled_props,
             // .const_values = c.graph.const_values,
         };
 
@@ -13812,6 +14343,7 @@ pub const LinkerContext = struct {
                 c.parse_graph.input_files.items(.source)
             else
                 null,
+            .mangled_props = &c.mangled_props,
         };
 
         writer.buffer.reset();
@@ -13866,10 +14398,64 @@ pub const LinkerContext = struct {
         shifts: []sourcemap.SourceMapShifts,
     };
 
+    fn mangleLocalCss(c: *LinkerContext) void {
+        if (c.has_any_css_locals.load(.monotonic) == 0) return;
+
+        const all_css_asts: []?*bun.css.BundlerStyleSheet = c.graph.ast.items(.css);
+        const all_symbols: []Symbol.List = c.graph.ast.items(.symbols);
+        const all_sources: []Logger.Source = c.parse_graph.input_files.items(.source);
+
+        // Collect all local css names
+        var sfb = std.heap.stackFallback(512, c.allocator);
+        const allocator = sfb.get();
+        var local_css_names = std.AutoHashMap(bun.bundle_v2.Ref, void).init(allocator);
+        defer local_css_names.deinit();
+
+        for (all_css_asts, 0..) |maybe_css_ast, source_index| {
+            if (maybe_css_ast) |css_ast| {
+                if (css_ast.local_scope.count() == 0) continue;
+                const symbols = all_symbols[source_index];
+                for (symbols.sliceConst(), 0..) |*symbol_, inner_index| {
+                    var symbol = symbol_;
+                    if (symbol.kind == .local_css) {
+                        const ref = ref: {
+                            var ref = Ref.init(@intCast(inner_index), @intCast(source_index), false);
+                            ref.tag = .symbol;
+                            while (symbol.hasLink()) {
+                                ref = symbol.link;
+                                symbol = all_symbols[ref.source_index].at(ref.inner_index);
+                            }
+                            break :ref ref;
+                        };
+
+                        const entry = local_css_names.getOrPut(ref) catch bun.outOfMemory();
+                        if (entry.found_existing) continue;
+
+                        const source = all_sources[ref.source_index];
+
+                        const original_name = symbol.original_name;
+                        const path_hash = bun.css.css_modules.hash(
+                            allocator,
+                            "{s}",
+                            // use path relative to cwd for determinism
+                            .{source.path.pretty},
+                            false,
+                        );
+
+                        const final_generated_name = std.fmt.allocPrint(c.graph.allocator, "{s}_{s}", .{ original_name, path_hash }) catch bun.outOfMemory();
+                        c.mangled_props.put(c.allocator, ref, final_generated_name) catch bun.outOfMemory();
+                    }
+                }
+            }
+        }
+    }
+
     pub fn generateChunksInParallel(c: *LinkerContext, chunks: []Chunk, comptime is_dev_server: bool) !if (is_dev_server) void else std.ArrayList(options.OutputFile) {
         const trace = tracer(@src(), "generateChunksInParallel");
         defer trace.end();
 
+        c.mangleLocalCss();
+
         var has_js_chunk = false;
         var has_css_chunk = false;
         var has_html_chunk = false;
diff --git a/src/cli/create_command.zig b/src/cli/create_command.zig
index 3d8e339bc66d70..351c6b40dc0002 100644
--- a/src/cli/create_command.zig
+++ b/src/cli/create_command.zig
@@ -1431,7 +1431,7 @@ pub const CreateCommand = struct {
 
                 const package_json_writer = JSPrinter.NewFileWriter(package_json_file.?);
 
-                const written = JSPrinter.printJSON(@TypeOf(package_json_writer), package_json_writer, package_json_expr, &source, .{}) catch |err| {
+                const written = JSPrinter.printJSON(@TypeOf(package_json_writer), package_json_writer, package_json_expr, &source, .{ .mangled_props = null }) catch |err| {
                     Output.prettyErrorln("package.json failed to write due to error {s}", .{@errorName(err)});
                     package_json_file = null;
                     break :process_package_json;
diff --git a/src/cli/init_command.zig b/src/cli/init_command.zig
index a13abffffff341..15e06bade7e20f 100644
--- a/src/cli/init_command.zig
+++ b/src/cli/init_command.zig
@@ -767,7 +767,7 @@ pub const InitCommand = struct {
                 package_json_writer,
                 js_ast.Expr{ .data = .{ .e_object = fields.object }, .loc = logger.Loc.Empty },
                 &logger.Source.initEmptyFile("package.json"),
-                .{},
+                .{ .mangled_props = null },
             ) catch |err| {
                 Output.prettyErrorln("package.json failed to write due to error {s}", .{@errorName(err)});
                 package_json_file = null;
diff --git a/src/cli/pack_command.zig b/src/cli/pack_command.zig
index a59cfbe7fb89d3..35c1ed6883302e 100644
--- a/src/cli/pack_command.zig
+++ b/src/cli/pack_command.zig
@@ -2110,6 +2110,7 @@ pub const PackCommand = struct {
             &json.source,
             .{
                 .indent = json.indentation,
+                .mangled_props = null,
             },
         ) catch |err| {
             return switch (err) {
diff --git a/src/cli/pm_trusted_command.zig b/src/cli/pm_trusted_command.zig
index fb197f3071e1ea..762df8f752c22c 100644
--- a/src/cli/pm_trusted_command.zig
+++ b/src/cli/pm_trusted_command.zig
@@ -424,7 +424,7 @@ pub const TrustCommand = struct {
         buffer_writer.append_newline = package_json_contents.len > 0 and package_json_contents[package_json_contents.len - 1] == '\n';
         var package_json_writer = bun.js_printer.BufferPrinter.init(buffer_writer);
 
-        _ = bun.js_printer.printJSON(@TypeOf(&package_json_writer), &package_json_writer, package_json, &package_json_source, .{}) catch |err| {
+        _ = bun.js_printer.printJSON(@TypeOf(&package_json_writer), &package_json_writer, package_json, &package_json_source, .{ .mangled_props = null }) catch |err| {
             Output.errGeneric("failed to print package.json: {s}", .{@errorName(err)});
             Global.crash();
         };
diff --git a/src/cli/publish_command.zig b/src/cli/publish_command.zig
index 94b9116e81230f..c6d405d04424f3 100644
--- a/src/cli/publish_command.zig
+++ b/src/cli/publish_command.zig
@@ -973,6 +973,7 @@ pub const PublishCommand = struct {
             &json_source,
             .{
                 .minify_whitespace = true,
+                .mangled_props = null,
             },
         ) catch |err| {
             switch (err) {
diff --git a/src/css/css_internals.zig b/src/css/css_internals.zig
index 5521c2af729c7f..4c770d6295f531 100644
--- a/src/css/css_internals.zig
+++ b/src/css/css_internals.zig
@@ -119,23 +119,32 @@ pub fn testingImpl(globalThis: *JSC.JSGlobalObject, callframe: *JSC.CallFrame, c
         source.slice(),
         parser_options,
         &import_records,
+        bun.bundle_v2.Index.invalid,
     )) {
-        .result => |stylesheet_| {
-            var stylesheet = stylesheet_;
+        .result => |ret| {
+            var stylesheet, var extra = ret;
             var minify_options: bun.css.MinifyOptions = bun.css.MinifyOptions.default();
             minify_options.targets.browsers = browsers;
-            _ = stylesheet.minify(alloc, minify_options).assert();
+            _ = stylesheet.minify(alloc, minify_options, &extra).assert();
 
-            const result = switch (stylesheet.toCss(alloc, bun.css.PrinterOptions{
-                .minify = switch (test_kind) {
-                    .minify => true,
-                    .normal => false,
-                    .prefix => false,
-                },
-                .targets = .{
-                    .browsers = minify_options.targets.browsers,
+            const symbols = bun.JSAst.Symbol.Map{};
+            var local_names = bun.css.LocalsResultsMap{};
+            const result = switch (stylesheet.toCss(
+                alloc,
+                bun.css.PrinterOptions{
+                    .minify = switch (test_kind) {
+                        .minify => true,
+                        .normal => false,
+                        .prefix => false,
+                    },
+                    .targets = .{
+                        .browsers = minify_options.targets.browsers,
+                    },
                 },
-            }, .initOutsideOfBundler(&import_records))) {
+                .initOutsideOfBundler(&import_records),
+                &local_names,
+                &symbols,
+            )) {
                 .result => |result| result,
                 .err => |err| {
                     return err.toJSString(alloc, globalThis);
@@ -307,7 +316,7 @@ pub fn attrTest(globalThis: *JSC.JSGlobalObject, callframe: *JSC.CallFrame) bun.
     const parser_options = bun.css.ParserOptions.default(alloc, &log);
 
     var import_records = bun.BabyList(bun.ImportRecord){};
-    switch (bun.css.StyleAttribute.parse(alloc, source.slice(), parser_options, &import_records)) {
+    switch (bun.css.StyleAttribute.parse(alloc, source.slice(), parser_options, &import_records, bun.bundle_v2.Index.invalid)) {
         .result => |stylesheet_| {
             var stylesheet = stylesheet_;
             var minify_options: bun.css.MinifyOptions = bun.css.MinifyOptions.default();
diff --git a/src/css/css_modules.zig b/src/css/css_modules.zig
index e476b03b4c2bd1..c81f8cc9ed9c05 100644
--- a/src/css/css_modules.zig
+++ b/src/css/css_modules.zig
@@ -13,6 +13,8 @@ const PrintErr = css.PrintErr;
 
 const ArrayList = std.ArrayListUnmanaged;
 
+const debug = bun.Output.scoped(.CssModules, false);
+
 pub const CssModule = struct {
     config: *const Config,
     sources: *const ArrayList([]const u8),
@@ -27,15 +29,16 @@ pub const CssModule = struct {
         project_root: ?[]const u8,
         references: *CssModuleReferences,
     ) CssModule {
+        // TODO: this is BAAAAAAAAAAD we are going to remove it
         const hashes = hashes: {
             var hashes = ArrayList([]const u8).initCapacity(allocator, sources.items.len) catch bun.outOfMemory();
             for (sources.items) |path| {
                 var alloced = false;
                 const source = source: {
+                    // Make paths relative to project root so hashes are stable
                     if (project_root) |root| {
                         if (bun.path.Platform.auto.isAbsolute(root)) {
                             alloced = true;
-                            // TODO: should we use this allocator or something else
                             break :source allocator.dupe(u8, bun.path.relative(root, path)) catch bun.outOfMemory();
                         }
                     }
@@ -85,24 +88,27 @@ pub const CssModule = struct {
 
     pub fn referenceDashed(
         this: *CssModule,
-        allocator: std.mem.Allocator,
+        comptime W: type,
+        dest: *css.Printer(W),
         name: []const u8,
         from: *const ?css.css_properties.css_modules.Specifier,
         source_index: u32,
-    ) ?[]const u8 {
+    ) PrintErr!?[]const u8 {
+        const allocator = dest.allocator;
         const reference, const key = if (from.*) |specifier| switch (specifier) {
             .global => return name[2..],
-            .file => |file| .{
-                CssModuleReference{ .dependency = .{ .name = name[2..], .specifier = file } },
-                file,
+            .import_record_index => |import_record_index| init: {
+                const import_record = try dest.importRecord(import_record_index);
+                break :init .{
+                    CssModuleReference{
+                        .dependency = .{
+                            .name = name[2..],
+                            .specifier = import_record.path.text,
+                        },
+                    },
+                    import_record.path.text,
+                };
             },
-            .source_index => |dep_source_index| return this.config.pattern.writeToString(
-                allocator,
-                .{},
-                this.hashes.items[dep_source_index],
-                this.sources.items[dep_source_index],
-                name[2..],
-            ),
         } else {
             // Local export. Mark as used.
             const gop = this.exports_by_source_index.items[source_index].getOrPut(allocator, name) catch bun.outOfMemory();
@@ -138,71 +144,17 @@ pub const CssModule = struct {
     }
 
     pub fn handleComposes(
-        this: *CssModule,
-        allocator: Allocator,
+        _: *CssModule,
+        comptime W: type,
+        _: *css.Printer(W),
         selectors: *const css.selector.parser.SelectorList,
-        composes: *const css.css_properties.css_modules.Composes,
-        source_index: u32,
+        _: *const css.css_properties.css_modules.Composes,
+        _: u32,
     ) css.Maybe(void, css.PrinterErrorKind) {
+        // const allocator = dest.allocator;
         for (selectors.v.slice()) |*sel| {
-            if (sel.len() == 1) {
-                const component: *const css.selector.parser.Component = &sel.components.items[0];
-                switch (component.*) {
-                    .class => |id| {
-                        for (composes.names.slice()) |name| {
-                            const reference: CssModuleReference = if (composes.from) |*specifier|
-                                switch (specifier.*) {
-                                    .source_index => |dep_source_index| {
-                                        if (this.exports_by_source_index.items[dep_source_index].get(name.v)) |entry| {
-                                            const entry_name = entry.name;
-                                            const composes2 = &entry.composes;
-                                            const @"export" = this.exports_by_source_index.items[source_index].getPtr(id.v).?;
-
-                                            @"export".composes.append(allocator, .{ .local = .{ .name = entry_name } }) catch bun.outOfMemory();
-                                            @"export".composes.appendSlice(allocator, composes2.items) catch bun.outOfMemory();
-                                        }
-                                        continue;
-                                    },
-                                    .global => CssModuleReference{ .global = .{ .name = name.v } },
-                                    .file => |file| CssModuleReference{
-                                        .dependency = .{
-                                            .name = name.v,
-                                            .specifier = file,
-                                        },
-                                    },
-                                }
-                            else
-                                CssModuleReference{
-                                    .local = .{
-                                        .name = this.config.pattern.writeToString(
-                                            allocator,
-                                            ArrayList(u8){},
-                                            this.hashes.items[source_index],
-                                            this.sources.items[source_index],
-                                            name.v,
-                                        ),
-                                    },
-                                };
-
-                            const export_value = this.exports_by_source_index.items[source_index].getPtr(id.v) orelse unreachable;
-                            export_value.composes.append(allocator, reference) catch bun.outOfMemory();
-
-                            const contains_reference = brk: {
-                                for (export_value.composes.items) |*compose_| {
-                                    const compose: *const CssModuleReference = compose_;
-                                    if (compose.eql(&reference)) {
-                                        break :brk true;
-                                    }
-                                }
-                                break :brk false;
-                            };
-                            if (!contains_reference) {
-                                export_value.composes.append(allocator, reference) catch bun.outOfMemory();
-                            }
-                        }
-                    },
-                    else => {},
-                }
+            if (sel.len() == 1 and sel.components.items[0] == .class) {
+                continue;
             }
 
             // The composes property can only be used within a simple class selector.
@@ -253,28 +205,28 @@ pub const CssModule = struct {
 pub const Config = struct {
     /// The name pattern to use when renaming class names and other identifiers.
     /// Default is `[hash]_[local]`.
-    pattern: Pattern,
+    pattern: Pattern = .{},
 
     /// Whether to rename dashed identifiers, e.g. custom properties.
-    dashed_idents: bool,
+    dashed_idents: bool = false,
 
     /// Whether to scope animation names.
     /// Default is `true`.
-    animation: bool,
+    animation: bool = true,
 
     /// Whether to scope grid names.
     /// Default is `true`.
-    grid: bool,
+    grid: bool = true,
 
     /// Whether to scope custom identifiers
     /// Default is `true`.
-    custom_idents: bool,
+    custom_idents: bool = true,
 };
 
 /// A CSS modules class name pattern.
 pub const Pattern = struct {
     /// The list of segments in the pattern.
-    segments: css.SmallList(Segment, 2),
+    segments: css.SmallList(Segment, 3) = css.SmallList(Segment, 3).initInlined(&[_]Segment{ .local, .{ .literal = "_" }, .hash }),
 
     /// Write the substituted pattern to a destination.
     pub fn write(
@@ -435,6 +387,8 @@ pub const CssModuleReference = union(enum) {
         /// The name to reference within the dependency.
         name: []const u8,
         /// The dependency specifier for the referenced file.
+        ///
+        /// import record idx
         specifier: []const u8,
     },
 
@@ -444,6 +398,7 @@ pub const CssModuleReference = union(enum) {
         return switch (this.*) {
             .local => |v| bun.strings.eql(v.name, other.local.name),
             .global => |v| bun.strings.eql(v.name, other.global.name),
+            // .dependency => |v| bun.strings.eql(v.name, other.dependency.name) and bun.strings.eql(v.specifier, other.dependency.specifier),
             .dependency => |v| bun.strings.eql(v.name, other.dependency.name) and bun.strings.eql(v.specifier, other.dependency.specifier),
         };
     }
@@ -462,14 +417,14 @@ pub fn hash(allocator: Allocator, comptime fmt: []const u8, args: anytype, at_st
     var h_bytes: [4]u8 = undefined;
     std.mem.writeInt(u32, &h_bytes, h, .little);
 
-    const encode_len = bun.base64.encodeLen(h_bytes[0..]);
+    const encode_len = bun.base64.simdutfEncodeLenUrlSafe(h_bytes[0..].len);
 
     var slice_to_write = if (encode_len <= 128 - @as(usize, @intFromBool(at_start)))
         allocator.alloc(u8, encode_len + @as(usize, @intFromBool(at_start))) catch bun.outOfMemory()
     else
         fmt_str[0..];
 
-    const base64_encoded_hash_len = bun.base64.encode(slice_to_write, &h_bytes);
+    const base64_encoded_hash_len = bun.base64.simdutfEncodeUrlSafe(slice_to_write, &h_bytes);
 
     const base64_encoded_hash = slice_to_write[0..base64_encoded_hash_len];
 
diff --git a/src/css/css_parser.zig b/src/css/css_parser.zig
index 86eff8b5fb2655..fef1204c417291 100644
--- a/src/css/css_parser.zig
+++ b/src/css/css_parser.zig
@@ -4,10 +4,14 @@ const bun = @import("root").bun;
 const logger = bun.logger;
 const Log = logger.Log;
 
+pub const SrcIndex = bun.bundle_v2.Index;
+
+pub const SymbolList = bun.JSAst.Symbol.List;
+
 const ArrayList = std.ArrayListUnmanaged;
 
-const ImportRecord = bun.ImportRecord;
-const ImportKind = bun.ImportKind;
+pub const ImportRecord = bun.ImportRecord;
+pub const ImportKind = bun.ImportKind;
 
 pub const prefixes = @import("./prefixes.zig");
 
@@ -19,6 +23,7 @@ pub const CssModuleExports = css_modules.CssModuleExports;
 pub const CssModule = css_modules.CssModule;
 pub const CssModuleReferences = css_modules.CssModuleReferences;
 pub const CssModuleReference = css_modules.CssModuleReference;
+pub const CssModuleConfig = css_modules.Config;
 
 pub const css_rules = @import("./rules/rules.zig");
 pub const CssRule = css_rules.CssRule;
@@ -205,6 +210,14 @@ pub const SourceLocation = struct {
     line: u32,
     column: u32,
 
+    pub fn toLoggerLocation(this: SourceLocation, file: []const u8) bun.logger.Location {
+        return bun.logger.Location{
+            .file = file,
+            .line = @intCast(this.line),
+            .column = @intCast(this.column),
+        };
+    }
+
     /// Create a new BasicParseError at this location for an unexpected token
     pub fn newBasicUnexpectedTokenError(this: SourceLocation, token: Token) ParseError(ParserError) {
         return BasicParseError.intoDefaultParseError(.{
@@ -1148,6 +1161,8 @@ fn parse_until_before(
             } else null,
             .stop_before = delimiters,
             .import_records = parser.import_records,
+            .flags = parser.flags,
+            .extra = parser.extra,
         };
         const result = delimited_parser.parseEntirely(T, closure, parse_fn);
         if (error_behavior == .stop and result.isErr()) {
@@ -1223,6 +1238,8 @@ fn parse_nested_block(parser: *Parser, comptime T: type, closure: anytype, compt
         .input = parser.input,
         .stop_before = closing_delimiter,
         .import_records = parser.import_records,
+        .flags = parser.flags,
+        .extra = parser.extra,
     };
     const result = nested_parser.parseEntirely(T, closure, parsefn);
     if (nested_parser.at_start_of) |block_type2| {
@@ -1232,6 +1249,8 @@ fn parse_nested_block(parser: *Parser, comptime T: type, closure: anytype, compt
     return result;
 }
 
+/// Qualified rules are rules that apply styles to elements in a
+/// document.
 pub fn ValidQualifiedRuleParser(comptime T: type) void {
     // The intermediate representation of a qualified rule prelude.
     _ = T.QualifiedRuleParser.Prelude;
@@ -1507,6 +1526,15 @@ pub fn ValidCustomAtRuleParser(comptime T: type) void {
     _ = T.CustomAtRuleParser.bumpAnonLayerCount;
 }
 
+/// At rules are rules that basically have the `@` symbol:
+///
+/// ```css
+/// @import "foo.css";
+/// @media (min-width: 100px) {
+///     foo {
+///     }
+/// }
+/// ```
 pub fn ValidAtRuleParser(comptime T: type) void {
     _ = T.AtRuleParser.AtRule;
     _ = T.AtRuleParser.Prelude;
@@ -1628,6 +1656,9 @@ pub fn TopLevelRuleParser(comptime AtRuleParserT: type) type {
         at_rule_parser: *AtRuleParserT,
         // TODO: think about memory management
         rules: *CssRuleList(AtRuleT),
+        composes: *ComposesMap,
+        composes_refs: SmallList(bun.bundle_v2.Ref, 2) = .{},
+        local_properties: *LocalPropertyUsage,
 
         const State = enum(u8) {
             start = 1,
@@ -1873,13 +1904,15 @@ pub fn TopLevelRuleParser(comptime AtRuleParserT: type) type {
             }
         };
 
-        pub fn new(allocator: Allocator, options: *const ParserOptions, at_rule_parser: *AtRuleParserT, rules: *CssRuleList(AtRuleT)) @This() {
+        pub fn new(allocator: Allocator, options: *const ParserOptions, at_rule_parser: *AtRuleParserT, rules: *CssRuleList(AtRuleT), composes: *ComposesMap, local_properties: *LocalPropertyUsage) @This() {
             return .{
                 .options = options,
                 .state = .start,
                 .at_rule_parser = at_rule_parser,
                 .rules = rules,
                 .allocator = allocator,
+                .composes = composes,
+                .local_properties = local_properties,
             };
         }
 
@@ -1893,6 +1926,9 @@ pub fn TopLevelRuleParser(comptime AtRuleParserT: type) type {
                 .is_in_style_rule = false,
                 .allow_declarations = false,
                 .allocator = this.allocator,
+                .composes = this.composes,
+                .composes_refs = &this.composes_refs,
+                .local_properties = this.local_properties,
             };
         }
     };
@@ -1914,8 +1950,21 @@ pub fn NestedRuleParser(comptime T: type) type {
         rules: *CssRuleList(T.CustomAtRuleParser.AtRule),
         is_in_style_rule: bool,
         allow_declarations: bool,
+
+        composes_state: ComposesState = .disallow_entirely,
+        composes_refs: *SmallList(bun.bundle_v2.Ref, 2),
+        composes: *ComposesMap,
+        local_properties: *LocalPropertyUsage,
+
         allocator: Allocator,
 
+        const ComposesState = union(enum) {
+            allow: SourceLocation,
+            disallow_nested: SourceLocation,
+            disallow_not_single_class: SourceLocation,
+            disallow_entirely,
+        };
+
         const This = @This();
 
         pub fn getLoc(this: *This, start: *const ParserState) Location {
@@ -2521,13 +2570,67 @@ pub fn NestedRuleParser(comptime T: type) type {
 
             pub fn parseBlock(this: *This, selectors: Prelude, start: *const ParserState, input: *Parser) Result(QualifiedRule) {
                 const loc = this.getLoc(start);
+                defer this.composes_refs.clearRetainingCapacity();
+                // allow composes if:
+                // - NOT in nested style rules
+                // - AND there is only one class selector
+                if (input.flags.css_modules) out: {
+                    if (this.is_in_style_rule) {
+                        this.composes_state = .{ .disallow_nested = .{ .line = loc.line, .column = loc.column } };
+                        break :out;
+                    }
+                    if (selectors.v.len() != 1) {
+                        this.composes_state = .{ .disallow_not_single_class = .{ .line = loc.line, .column = loc.column } };
+                        break :out;
+                    }
+
+                    const sel = selectors.v.slice()[0];
+                    if (sel.components.items.len != 1) {
+                        this.composes_state = .{ .disallow_not_single_class = .{ .line = loc.line, .column = loc.column } };
+                        break :out;
+                    }
+
+                    const comp = &sel.components.items[0];
+                    if (comp.asClass()) |r| {
+                        const ref = r.asRef().?;
+                        this.composes_refs.append(input.allocator(), ref);
+                        this.composes_state = .{ .allow = .{ .line = loc.line, .column = loc.column } };
+                        break :out;
+                    }
+
+                    this.composes_state = .{ .disallow_not_single_class = .{ .line = loc.line, .column = loc.column } };
+                }
+                const location = input.position();
                 const result = switch (this.parseNested(input, true)) {
                     .err => |e| return .{ .err = e },
                     .result => |v| v,
                 };
-                const declarations = result[0];
+                const declarations: DeclarationBlock = result[0];
                 const rules = result[1];
 
+                // We parsed a style rule with the `composes` property
+                //
+                // Track which properties it used so we can validate it later (it is undefined
+                // behavior when composing and properties conflict so we will warn the user
+                // about that).
+                if (this.composes_state == .allow) {
+                    const len = input.position() - location;
+                    var usage = PropertyBitset.initEmpty();
+                    var custom_properties = bun.BabyList([]const u8){};
+                    fillPropertyBitSet(this.allocator, &usage, &declarations, &custom_properties);
+
+                    const custom_properties_slice = custom_properties.slice();
+
+                    for (this.composes_refs.slice()) |ref| {
+                        const entry = this.local_properties.getOrPut(this.allocator, ref) catch bun.outOfMemory();
+                        const property_usage: *PropertyUsage = if (!entry.found_existing) brk: {
+                            entry.value_ptr.* = PropertyUsage{ .range = bun.logger.Range{ .loc = bun.logger.Loc{ .start = @intCast(location) }, .len = @intCast(len) } };
+                            break :brk entry.value_ptr;
+                        } else entry.value_ptr;
+                        property_usage.fill(&usage, custom_properties_slice);
+                    }
+                }
+
                 this.rules.v.append(this.allocator, .{
                     .style = StyleRule(AtRuleT){
                         .selectors = selectors,
@@ -2557,16 +2660,29 @@ pub fn NestedRuleParser(comptime T: type) type {
             pub const Declaration = void;
 
             pub fn parseValue(this: *This, name: []const u8, input: *Parser) Result(Declaration) {
-                return css_decls.parse_declaration(
+                return css_decls.parse_declaration_impl(
                     name,
                     input,
                     &this.declarations,
                     &this.important_declarations,
                     this.options,
+                    this,
                 );
             }
         };
 
+        /// If css modules is enabled, we want to record each occurence of the `composes` property
+        /// for the bundler so we can generate the lazy JS import object later.
+        pub fn recordComposes(this: *This, allocator: Allocator, composes: *Composes) void {
+            for (this.composes_refs.slice()) |ref| {
+                const entry = this.composes.getOrPut(allocator, ref) catch bun.outOfMemory();
+                if (!entry.found_existing) {
+                    entry.value_ptr.* = ComposesEntry{};
+                }
+                entry.value_ptr.*.composes.push(allocator, composes.deepClone(allocator)) catch bun.outOfMemory();
+            }
+        }
+
         pub fn parseNested(this: *This, input: *Parser, is_style_rule: bool) Result(struct { DeclarationBlock, CssRuleList(T.CustomAtRuleParser.AtRule) }) {
             // TODO: think about memory management in error cases
             var rules = CssRuleList(T.CustomAtRuleParser.AtRule){};
@@ -2579,6 +2695,14 @@ pub fn NestedRuleParser(comptime T: type) type {
                 .rules = &rules,
                 .is_in_style_rule = this.is_in_style_rule or is_style_rule,
                 .allow_declarations = this.allow_declarations or this.is_in_style_rule or is_style_rule,
+                // .composes_state = this.allow_composes and !this.is_in_style_rule,
+                .composes_state = if (this.is_in_style_rule and this.composes_state == .allow)
+                    .{ .disallow_nested = .{ .line = this.composes_state.allow.line, .column = this.composes_state.allow.column } }
+                else
+                    this.composes_state,
+                .composes = this.composes,
+                .composes_refs = this.composes_refs,
+                .local_properties = this.local_properties,
             };
 
             const parse_declarations = This.RuleBodyItemParser.parseDeclarations(&nested_parser);
@@ -2790,6 +2914,127 @@ pub const BundlerTailwindState = struct {
     output_from_tailwind: ?[]const u8 = null,
 };
 
+/// Additional data we don't want store
+/// on the stylesheet
+pub const StylesheetExtra = struct {
+    /// Uses when css modules is enabled
+    symbols: SymbolList = .{},
+};
+
+pub const ParserExtra = struct {
+    symbols: SymbolList = .{},
+    local_scope: LocalScope = .{},
+    source_index: SrcIndex,
+};
+
+pub const CustomIdentList = css_values.ident.CustomIdentList;
+pub const Specifier = css_properties.css_modules.Specifier;
+
+/// Reference to a symbol in a stylesheet.
+pub const CssRef = packed struct(u32) {
+    inner_index: u26 = 0,
+
+    tag: Tag,
+
+    pub const Tag = packed struct(u6) {
+        class: bool = false,
+        id: bool = false,
+        animation: bool = false,
+        keyframes: bool = false,
+        container: bool = false,
+        counter_style: bool = false,
+
+        pub const ID = Tag{ .id = true };
+        pub const CLASS = Tag{ .class = true };
+
+        pub usingnamespace Bitflags(@This());
+
+        pub fn canBeComposed(this: @This()) bool {
+            return this.class;
+        }
+    };
+
+    pub fn canBeComposed(this: @This()) bool {
+        return this.tag.canBeComposed();
+    }
+
+    pub fn sourceIndex(_: @This(), source_index: u32) u32 {
+        return source_index;
+    }
+
+    pub fn innerIndex(this: @This()) u32 {
+        return this.inner_index;
+    }
+
+    pub fn toRealRef(this: @This(), source_index: u32) bun.bundle_v2.Ref {
+        return bun.bundle_v2.Ref{
+            .inner_index = this.inner_index,
+            .source_index = @intCast(source_index),
+            .tag = .symbol,
+        };
+    }
+};
+const LocalEntry = struct {
+    ref: CssRef,
+    loc: bun.logger.Loc,
+};
+/// If css modules is enabled, this maps locally scoped class names to their ref.
+///
+/// We use this ref as a layer of indirection during the bundling stage because we don't
+/// know the final generated class names for local scope until print time.
+pub const LocalScope = bun.StringArrayHashMapUnmanaged(LocalEntry);
+/// Local symbol renaming results go here
+pub const LocalsResultsMap = bun.bundle_v2.MangledProps;
+/// Using `compose` and having conflicting properties is undefined behavior according
+/// to the css modules spec. We should warn the user about this.
+pub const LocalPropertyUsage = std.AutoArrayHashMapUnmanaged(bun.bundle_v2.Ref, PropertyUsage);
+pub const Composes = css_properties.css_modules.Composes;
+pub const ComposesMap = std.AutoArrayHashMapUnmanaged(bun.bundle_v2.Ref, ComposesEntry);
+
+pub const ComposesEntry = struct {
+    composes: bun.BabyList(Composes) = .{},
+};
+pub const PropertyUsage = struct {
+    bitset: PropertyBitset = PropertyBitset.initEmpty(),
+    custom_properties: []const []const u8 = &.{},
+    range: bun.logger.Range,
+
+    pub inline fn fill(this: *PropertyUsage, used: *const PropertyBitset, custom_properties: []const []const u8) void {
+        this.bitset.setUnion(used.*);
+        this.custom_properties = custom_properties;
+    }
+};
+
+pub const PropertyBitset = std.bit_set.ArrayBitSet(usize, std.math.ceilPowerOfTwo(u16, bun.meta.EnumFields(PropertyIdTag).len) catch unreachable);
+pub fn fillPropertyBitSet(allocator: Allocator, bitset: *PropertyBitset, block: *const DeclarationBlock, custom_properties: *bun.BabyList([]const u8)) void {
+    for (block.declarations.items) |*prop| {
+        const tag = switch (prop.*) {
+            .custom => {
+                custom_properties.push(allocator, prop.custom.name.asStr()) catch bun.outOfMemory();
+                continue;
+            },
+            .unparsed => |u| @as(PropertyIdTag, u.property_id),
+            .composes => continue,
+            else => @as(PropertyIdTag, prop.*),
+        };
+        const int: u16 = @intFromEnum(tag);
+        bitset.set(int);
+    }
+    for (block.important_declarations.items) |*prop| {
+        const tag = switch (prop.*) {
+            .custom => {
+                custom_properties.push(allocator, prop.custom.name.asStr()) catch bun.outOfMemory();
+                continue;
+            },
+            .unparsed => |u| @as(PropertyIdTag, u.property_id),
+            .composes => continue,
+            else => @as(PropertyIdTag, prop.*),
+        };
+        const int: u16 = @intFromEnum(tag);
+        bitset.set(int);
+    }
+}
+
 pub fn StyleSheet(comptime AtRule: type) type {
     return struct {
         /// A list of top-level rules within the style sheet.
@@ -2801,6 +3046,27 @@ pub fn StyleSheet(comptime AtRule: type) type {
         tailwind: if (AtRule == BundlerAtRule) ?*BundlerTailwindState else u0 = if (AtRule == BundlerAtRule) null else 0,
         layer_names: bun.BabyList(LayerName) = .{},
 
+        /// Used when css modules is enabled.
+        ///
+        /// Maps `local name string` -> `Ref`
+        ///
+        /// Invariants:
+        ///    1. `local_scope.values()[i].source_index == <source_index_of_stylesheet>`
+        ///    2. `local_scope.values()[i].tag == .symbol`
+        ///    3. `local_scopes.values().last().inner_index == symbols.count() - 1`
+        local_scope: LocalScope = .{},
+        /// Used when css modules is enabled.
+        ///
+        /// Track which properties are used in local scope.
+        ///
+        /// Used later to warn when using `composes` property on
+        /// two style rules which have conflicting properties.
+        local_properties: LocalPropertyUsage = .{},
+        /// Used whenn css modules is enabled.
+        ///
+        /// `bun.bundle_v2.Ref` => `bun.BabyList(ComposesExtended)`
+        composes: ComposesMap,
+
         const This = @This();
 
         pub fn empty(allocator: Allocator) This {
@@ -2810,11 +3076,12 @@ pub fn StyleSheet(comptime AtRule: type) type {
                 .source_map_urls = .{},
                 .license_comments = .{},
                 .options = ParserOptions.default(allocator, null),
+                .composes = .{},
             };
         }
 
         /// Minify and transform the style sheet for the provided browser targets.
-        pub fn minify(this: *@This(), allocator: Allocator, options: MinifyOptions) Maybe(void, Err(MinifyErrorKind)) {
+        pub fn minify(this: *@This(), allocator: Allocator, options: MinifyOptions, extra: *const StylesheetExtra) Maybe(void, Err(MinifyErrorKind)) {
             const ctx = PropertyHandlerContext.new(allocator, options.targets, &options.unused_symbols);
             var handler = declaration.DeclarationHandler.default();
             var important_handler = declaration.DeclarationHandler.default();
@@ -2843,6 +3110,7 @@ pub fn StyleSheet(comptime AtRule: type) type {
                 .unused_symbols = &options.unused_symbols,
                 .custom_media = custom_media,
                 .css_modules = this.options.css_modules != null,
+                .extra = extra,
             };
 
             this.rules.minify(&minify_ctx, false) catch {
@@ -2852,10 +3120,18 @@ pub fn StyleSheet(comptime AtRule: type) type {
             return .{ .result = {} };
         }
 
-        pub fn toCssWithWriter(this: *const @This(), allocator: Allocator, writer: anytype, options: css_printer.PrinterOptions, import_info: ?bun.css.ImportInfo) PrintResult(ToCssResultInternal) {
+        pub fn toCssWithWriter(
+            this: *const @This(),
+            allocator: Allocator,
+            writer: anytype,
+            options: css_printer.PrinterOptions,
+            import_info: ?bun.css.ImportInfo,
+            local_names: ?*const LocalsResultsMap,
+            symbols: *const bun.JSAst.Symbol.Map,
+        ) PrintResult(ToCssResultInternal) {
             const W = @TypeOf(writer);
 
-            var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
+            var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info, local_names, symbols);
             const result = this.toCssWithWriterImpl(allocator, W, &printer, options) catch {
                 bun.assert(printer.error_kind != null);
                 return .{
@@ -2915,36 +3191,53 @@ pub fn StyleSheet(comptime AtRule: type) type {
             }
         }
 
-        pub fn toCss(this: *const @This(), allocator: Allocator, options: css_printer.PrinterOptions, import_info: ?bun.css.ImportInfo) PrintResult(ToCssResult) {
+        pub fn toCss(
+            this: *const @This(),
+            allocator: Allocator,
+            options: css_printer.PrinterOptions,
+            import_info: ?bun.css.ImportInfo,
+            local_names: ?*const LocalsResultsMap,
+            symbols: *const bun.JSAst.Symbol.Map,
+        ) PrintResult(ToCssResult) {
             // TODO: this is not necessary
             // Make sure we always have capacity > 0: https://github.com/napi-rs/napi-rs/issues/1124.
             var dest = ArrayList(u8).initCapacity(allocator, 1) catch unreachable;
             const writer = dest.writer(allocator);
-            const result = switch (toCssWithWriter(this, allocator, writer, options, import_info)) {
+            const result = switch (toCssWithWriter(
+                this,
+                allocator,
+                writer,
+                options,
+                import_info,
+                local_names,
+                symbols,
+            )) {
                 .result => |v| v,
                 .err => |e| return .{ .err = e },
             };
-            return .{ .result = ToCssResult{
-                .code = dest.items,
-                .dependencies = result.dependencies,
-                .exports = result.exports,
-                .references = result.references,
-            } };
+            return .{
+                .result = ToCssResult{
+                    .code = dest.items,
+                    .dependencies = result.dependencies,
+                    .exports = result.exports,
+                    .references = result.references,
+                },
+            };
         }
 
-        pub fn parse(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: ?*bun.BabyList(ImportRecord)) Maybe(This, Err(ParserError)) {
+        pub fn parse(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: ?*bun.BabyList(ImportRecord), source_index: SrcIndex) Maybe(struct { This, StylesheetExtra }, Err(ParserError)) {
             var default_at_rule_parser = DefaultAtRuleParser{};
-            return parseWith(allocator, code, options, DefaultAtRuleParser, &default_at_rule_parser, import_records);
+            return parseWith(allocator, code, options, DefaultAtRuleParser, &default_at_rule_parser, import_records, source_index);
         }
 
-        pub fn parseBundler(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: *bun.BabyList(ImportRecord)) Maybe(This, Err(ParserError)) {
+        pub fn parseBundler(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: *bun.BabyList(ImportRecord), source_index: SrcIndex) Maybe(struct { This, StylesheetExtra }, Err(ParserError)) {
             var at_rule_parser = BundlerAtRuleParser{
                 .import_records = import_records,
                 .allocator = allocator,
                 .options = &options,
                 .layer_names = .{},
             };
-            return parseWith(allocator, code, options, BundlerAtRuleParser, &at_rule_parser, import_records);
+            return parseWith(allocator, code, options, BundlerAtRuleParser, &at_rule_parser, import_records, source_index);
         }
 
         /// Parse a style sheet from a string.
@@ -2955,9 +3248,25 @@ pub fn StyleSheet(comptime AtRule: type) type {
             comptime P: type,
             at_rule_parser: *P,
             import_records: ?*bun.BabyList(ImportRecord),
-        ) Maybe(This, Err(ParserError)) {
+            source_index: SrcIndex,
+        ) Maybe(struct { This, StylesheetExtra }, Err(ParserError)) {
+            var composes = ComposesMap{};
+            var parser_extra = ParserExtra{
+                .local_scope = .{},
+                .symbols = .{},
+                .source_index = source_index,
+            };
+            var local_properties = LocalPropertyUsage{};
+
             var input = ParserInput.new(allocator, code);
-            var parser = Parser.new(&input, import_records);
+            var parser = Parser.new(
+                &input,
+                import_records,
+                .{
+                    .css_modules = options.css_modules != null,
+                },
+                &parser_extra,
+            );
 
             var license_comments = ArrayList([]const u8){};
             var state = parser.state();
@@ -2979,7 +3288,7 @@ pub fn StyleSheet(comptime AtRule: type) type {
             parser.reset(&state);
 
             var rules = CssRuleList(AtRule){};
-            var rule_parser = TopLevelRuleParser(P).new(allocator, &options, at_rule_parser, &rules);
+            var rule_parser = TopLevelRuleParser(P).new(allocator, &options, at_rule_parser, &rules, &composes, &local_properties);
             var rule_list_parser = StyleSheetParser(TopLevelRuleParser(P)).new(&parser, &rule_parser);
 
             while (rule_list_parser.next(allocator)) |result| {
@@ -3000,13 +3309,21 @@ pub fn StyleSheet(comptime AtRule: type) type {
             source_map_urls.append(allocator, parser.currentSourceMapUrl()) catch bun.outOfMemory();
 
             return .{
-                .result = This{
-                    .rules = rules,
-                    .sources = sources,
-                    .source_map_urls = source_map_urls,
-                    .license_comments = license_comments,
-                    .options = options,
-                    .layer_names = if (comptime P == BundlerAtRuleParser) at_rule_parser.layer_names else .{},
+                .result = .{
+                    This{
+                        .rules = rules,
+                        .sources = sources,
+                        .source_map_urls = source_map_urls,
+                        .license_comments = license_comments,
+                        .options = options,
+                        .layer_names = if (comptime P == BundlerAtRuleParser) at_rule_parser.layer_names else .{},
+                        .local_scope = parser_extra.local_scope,
+                        .local_properties = local_properties,
+                        .composes = composes,
+                    },
+                    StylesheetExtra{
+                        .symbols = parser_extra.symbols,
+                    },
                 },
             };
         }
@@ -3129,9 +3446,21 @@ pub const StyleAttribute = struct {
     declarations: DeclarationBlock,
     sources: ArrayList([]const u8),
 
-    pub fn parse(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: *bun.BabyList(ImportRecord)) Maybe(StyleAttribute, Err(ParserError)) {
+    pub fn parse(allocator: Allocator, code: []const u8, options: ParserOptions, import_records: *bun.BabyList(ImportRecord), source_index: SrcIndex) Maybe(StyleAttribute, Err(ParserError)) {
+        var parser_extra = ParserExtra{
+            .local_scope = .{},
+            .symbols = .{},
+            .source_index = source_index,
+        };
         var input = ParserInput.new(allocator, code);
-        var parser = Parser.new(&input, import_records);
+        var parser = Parser.new(
+            &input,
+            import_records,
+            .{
+                .css_modules = options.css_modules != null,
+            },
+            &parser_extra,
+        );
         const sources = sources: {
             var s = ArrayList([]const u8).initCapacity(allocator, 1) catch bun.outOfMemory();
             s.appendAssumeCapacity(options.filename);
@@ -3153,9 +3482,18 @@ pub const StyleAttribute = struct {
         //   "Source maps are not supported for style attributes"
         // );
 
+        var symbols = bun.JSAst.Symbol.Map{};
         var dest = ArrayList(u8){};
         const writer = dest.writer(allocator);
-        var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
+        var printer = Printer(@TypeOf(writer)).new(
+            allocator,
+            std.ArrayList(u8).init(allocator),
+            writer,
+            options,
+            import_info,
+            null,
+            &symbols,
+        );
         printer.sources = &this.sources;
 
         try this.declarations.toCss(@TypeOf(writer), &printer);
@@ -3366,6 +3704,48 @@ pub const ParserOptions = struct {
         }
     }
 
+    pub fn warnFmt(this: *const ParserOptions, comptime text: []const u8, args: anytype, line: u32, column: u32) void {
+        if (this.logger) |lg| {
+            lg.addWarningFmtLineCol(
+                this.filename,
+                line,
+                column,
+                this.allocator,
+                text,
+                args,
+            ) catch unreachable;
+        }
+    }
+
+    pub fn warnFmtWithNotes(this: *const ParserOptions, comptime text: []const u8, args: anytype, line: u32, column: u32, notes: []bun.logger.Data) void {
+        if (this.logger) |lg| {
+            lg.addWarningFmtLineColWithNotes(
+                this.filename,
+                line,
+                column,
+                this.allocator,
+                text,
+                args,
+                notes,
+            ) catch unreachable;
+        }
+    }
+
+    pub fn warnFmtWithNote(this: *const ParserOptions, comptime text: []const u8, args: anytype, line: u32, column: u32, note_fmt: []const u8, note_args: anytype, note_range: bun.logger.Range) void {
+        if (this.logger) |lg| {
+            lg.addRangeWarningFmtWithNote(
+                null,
+                bun.logger.Loc{ .start = @intCast(line), .end = @intCast(column) },
+                this.allocator,
+                text,
+                args,
+                note_fmt,
+                note_args,
+                note_range,
+            ) catch unreachable;
+        }
+    }
+
     pub fn default(allocator: std.mem.Allocator, log: ?*Log) ParserOptions {
         return ParserOptions{
             .filename = "",
@@ -3421,15 +3801,57 @@ pub const Parser = struct {
     input: *ParserInput,
     at_start_of: ?BlockType = null,
     stop_before: Delimiters = Delimiters.NONE,
+    flags: Opts,
     import_records: ?*bun.BabyList(ImportRecord),
+    extra: ?*ParserExtra,
+
+    const Opts = packed struct(u8) {
+        css_modules: bool = false,
+        __unused: u7 = 0,
+    };
+
+    pub fn addSymbolForName(this: *Parser, name: []const u8, tag: CssRef.Tag, loc: bun.logger.Loc) bun.bundle_v2.Ref {
+        // don't call this if css modules is not enabled!
+        bun.assert(this.flags.css_modules);
+        bun.assert(this.extra != null);
+        if (comptime bun.Environment.allow_assert) {
+            // tag should only have one bit set, or none
+            bun.assert(@popCount(tag.asBits()) <= 1);
+        }
+
+        const extra = this.extra.?;
+
+        const entry = extra.local_scope.getOrPut(this.allocator(), name) catch bun.outOfMemory();
+        if (!entry.found_existing) {
+            entry.value_ptr.* = LocalEntry{
+                .ref = CssRef{
+                    .inner_index = @intCast(extra.symbols.len),
+                    .tag = tag,
+                },
+                .loc = loc,
+            };
+            extra.symbols.push(this.allocator(), bun.JSAst.Symbol{
+                .kind = .local_css,
+                .original_name = name,
+            }) catch bun.outOfMemory();
+        } else {
+            const prev_tag = entry.value_ptr.ref.tag;
+            if (!prev_tag.class and tag.class) {
+                entry.value_ptr.loc = loc;
+                entry.value_ptr.ref.tag = entry.value_ptr.ref.tag.bitwiseOr(tag);
+            }
+        }
+
+        return entry.value_ptr.ref.toRealRef(extra.source_index.get());
+    }
 
     // TODO: dedupe import records??
-    pub fn addImportRecordForUrl(this: *Parser, url: []const u8, start_position: usize) Result(u32) {
+    pub fn addImportRecord(this: *Parser, url: []const u8, start_position: usize, kind: ImportKind) Result(u32) {
         if (this.import_records) |import_records| {
             const idx = import_records.len;
             import_records.push(this.allocator(), ImportRecord{
                 .path = bun.fs.Path.init(url),
-                .kind = .url,
+                .kind = kind,
                 .range = bun.logger.Range{
                     .loc = bun.logger.Loc{ .start = @intCast(start_position) },
                     .len = @intCast(url.len), // TODO: technically this is not correct because the url could be escaped
@@ -3448,11 +3870,13 @@ pub const Parser = struct {
     /// Create a new Parser
     ///
     /// Pass in `import_records` to track imports (`@import` rules, `url()` tokens). If this
-    /// is `null`, calling `Parser.addImportRecordForUrl` will error.
-    pub fn new(input: *ParserInput, import_records: ?*bun.BabyList(ImportRecord)) Parser {
+    /// is `null`, calling `Parser.addImportRecord` will error.
+    pub fn new(input: *ParserInput, import_records: ?*bun.BabyList(ImportRecord), flags: Opts, extra: ?*ParserExtra) Parser {
         return Parser{
             .input = input,
+            .flags = flags,
             .import_records = import_records,
+            .extra = extra,
         };
     }
 
@@ -4299,7 +4723,12 @@ pub const nth = struct {
 
     fn parse_number_saturate(allocator: Allocator, string: []const u8) Maybe(i32, void) {
         var input = ParserInput.new(allocator, string);
-        var parser = Parser.new(&input, null);
+        var parser = Parser.new(
+            &input,
+            null,
+            .{},
+            null,
+        );
         const tok = switch (parser.nextIncludingWhitespaceAndComments()) {
             .result => |v| v,
             .err => {
@@ -5707,33 +6136,90 @@ pub const Token = union(TokenKind) {
 
     pub fn format(
         this: *const Token,
-        comptime fmt: []const u8,
-        opts: std.fmt.FormatOptions,
+        comptime _: []const u8,
+        _: std.fmt.FormatOptions,
         writer: anytype,
     ) !void {
-        _ = fmt; // autofix
-        _ = opts; // autofix
         return switch (this.*) {
-            inline .ident,
-            .function,
-            .at_keyword,
-            .unrestrictedhash,
-            .idhash,
-            .quoted_string,
-            .bad_string,
-            .unquoted_url,
-            .bad_url,
-            .whitespace,
-            .comment,
-            => |str| {
-                try writer.print("{s} = {s}", .{ @tagName(this.*), str });
+            .ident => |value| try serializer.serializeIdentifier(value, writer),
+            .at_keyword => |value| {
+                try writer.writeByte('@');
+                try serializer.serializeIdentifier(value, writer);
+            },
+            .unrestrictedhash => |value| {
+                try writer.writeByte('#');
+                try serializer.serializeName(value, writer);
+            },
+            .idhash => |value| {
+                try writer.writeByte('#');
+                try serializer.serializeIdentifier(value, writer);
+            },
+            .quoted_string => |value| try serializer.serializeString(value, writer),
+            .unquoted_url => |value| {
+                try writer.writeAll("url(");
+                try serializer.serializeUnquotedUrl(value, writer);
+                try writer.writeByte(')');
+            },
+            .delim => |value| {
+                // See comment for this variant in declaration of Token
+                // The value of delim is only ever ascii
+                bun.debugAssert(value <= 0x7F);
+                try writer.writeByte(@truncate(value));
+            },
+            .number => |num| try serializer.writeNumeric(num.value, num.int_value, num.has_sign, writer),
+            .percentage => |num| {
+                try serializer.writeNumeric(num.unit_value * 100, num.int_value, num.has_sign, writer);
+                try writer.writeAll("%");
+            },
+            .dimension => |dim| {
+                try serializer.writeNumeric(dim.num.value, dim.num.int_value, dim.num.has_sign, writer);
+                // Disambiguate with scientific notation.
+                const unit = dim.unit;
+                if (std.mem.eql(u8, unit, "e") or std.mem.eql(u8, unit, "E") or
+                    std.mem.startsWith(u8, unit, "e-") or std.mem.startsWith(u8, unit, "E-"))
+                {
+                    try writer.writeAll("\\65 ");
+                    try serializer.serializeName(unit[1..], writer);
+                } else {
+                    try serializer.serializeIdentifier(unit, writer);
+                }
+            },
+            .whitespace => |content| try writer.writeAll(content),
+            .comment => |content| {
+                try writer.writeAll("/*");
+                try writer.writeAll(content);
+                try writer.writeAll("*/");
+            },
+            .colon => try writer.writeByte(':'),
+            .semicolon => try writer.writeByte(';'),
+            .comma => try writer.writeByte(','),
+            .include_match => try writer.writeAll("~="),
+            .dash_match => try writer.writeAll("|="),
+            .prefix_match => try writer.writeAll("^="),
+            .suffix_match => try writer.writeAll("$="),
+            .substring_match => try writer.writeAll("*="),
+            .cdo => try writer.writeAll("<!--"),
+            .cdc => try writer.writeAll("-->"),
+            .function => |name| {
+                try serializer.serializeIdentifier(name, writer);
+                try writer.writeByte('(');
             },
-            .delim => |d| {
-                try writer.print("'{c}'", .{@as(u8, @truncate(d))});
+            .open_paren => try writer.writeAll("("),
+            .open_square => try writer.writeAll("["),
+            .open_curly => try writer.writeAll("{"),
+            .bad_url => |contents| {
+                try writer.writeAll("url(");
+                try writer.writeAll(contents);
+                try writer.writeByte(')');
             },
-            else => {
-                try writer.print("{s}", .{@tagName(this.*)});
+            .bad_string => |value| {
+                try writer.writeByte('"');
+                var string_writer = serializer.CssStringWriter(@TypeOf(writer)).new(writer);
+                try string_writer.writeStr(value);
             },
+            .close_paren => try writer.writeAll(")"),
+            .close_square => try writer.writeAll("]"),
+            .close_curly => try writer.writeAll("}"),
         };
     }
 
@@ -5852,7 +6338,6 @@ pub const Token = union(TokenKind) {
     }
 
     pub fn toCss(this: *const This, comptime W: type, dest: *Printer(W)) PrintErr!void {
-        // zack is here: verify this is correct
         return switch (this.*) {
             .ident => |value| serializer.serializeIdentifier(value, dest) catch return dest.addFmtError(),
             .at_keyword => |value| {
@@ -6495,7 +6980,7 @@ pub const parse_utility = struct {
         var import_records = bun.BabyList(bun.ImportRecord){};
         defer import_records.deinitWithAllocator(allocator);
         var i = ParserInput.new(allocator, input);
-        var parser = Parser.new(&i, &import_records);
+        var parser = Parser.new(&i, &import_records, .{}, null);
         const result = switch (parse_one(&parser)) {
             .err => |e| return .{ .err = e },
             .result => |v| v,
@@ -6515,13 +7000,15 @@ pub const to_css = struct {
         this: *const T,
         options: PrinterOptions,
         import_info: ?ImportInfo,
+        local_names: ?*const LocalsResultsMap,
+        symbols: *const bun.JSAst.Symbol.Map,
     ) PrintErr![]const u8 {
         var s = ArrayList(u8){};
         errdefer s.deinit(allocator);
         const writer = s.writer(allocator);
         const W = @TypeOf(writer);
         // PERF: think about how cheap this is to create
-        var printer = Printer(W).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
+        var printer = Printer(W).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info, local_names, symbols);
         defer printer.deinit();
         switch (T) {
             CSSString => try CSSStringFns.toCss(this, W, &printer),
diff --git a/src/css/declaration.zig b/src/css/declaration.zig
index c2bb443209248b..02f2f584547fb9 100644
--- a/src/css/declaration.zig
+++ b/src/css/declaration.zig
@@ -56,7 +56,8 @@ pub const DeclarationBlock = struct {
             var arraylist = ArrayList(u8){};
             const w = arraylist.writer(bun.default_allocator);
             defer arraylist.deinit(bun.default_allocator);
-            var printer = css.Printer(@TypeOf(w)).new(bun.default_allocator, std.ArrayList(u8).init(bun.default_allocator), w, css.PrinterOptions.default(), null);
+            var symbols = bun.JSAst.Symbol.Map{};
+            var printer = css.Printer(@TypeOf(w)).new(bun.default_allocator, std.ArrayList(u8).init(bun.default_allocator), w, css.PrinterOptions.default(), null, null, &symbols);
             defer printer.deinit();
             this.self.toCss(@TypeOf(w), &printer) catch |e| return try writer.print("<error writing declaration block: {s}>\n", .{@errorName(e)});
             try writer.writeAll(arraylist.items);
@@ -298,6 +299,17 @@ pub fn parse_declaration(
     declarations: *DeclarationList,
     important_declarations: *DeclarationList,
     options: *const css.ParserOptions,
+) Result(void) {
+    return parse_declaration_impl(name, input, declarations, important_declarations, options, {});
+}
+
+pub fn parse_declaration_impl(
+    name: []const u8,
+    input: *css.Parser,
+    declarations: *DeclarationList,
+    important_declarations: *DeclarationList,
+    options: *const css.ParserOptions,
+    composes_ctx: anytype,
 ) Result(void) {
     const property_id = css.PropertyId.fromStr(name);
     var delimiters = css.Delimiters{ .bang = true };
@@ -312,7 +324,8 @@ pub fn parse_declaration(
         .property_id = property_id,
         .options = options,
     };
-    const property = switch (input.parseUntilBefore(delimiters, css.Property, &closure, struct {
+    const source_location = input.currentSourceLocation();
+    var property = switch (input.parseUntilBefore(delimiters, css.Property, &closure, struct {
         pub fn parseFn(this: *Closure, input2: *css.Parser) Result(css.Property) {
             return css.Property.parse(this.property_id, input2, this.options);
         }
@@ -327,6 +340,43 @@ pub fn parse_declaration(
         }
     }.parsefn, .{}).isOk();
     if (input.expectExhausted().asErr()) |e| return .{ .err = e };
+
+    if (comptime @TypeOf(composes_ctx) != void) {
+        if (input.flags.css_modules and property == .composes) {
+            switch (composes_ctx.composes_state) {
+                .disallow_entirely => {},
+                .allow => {
+                    composes_ctx.recordComposes(input.allocator(), &property.composes);
+                },
+                .disallow_nested => |info| {
+                    options.warnFmtWithNotes(
+                        "\"composes\" is not allowed inside nested selectors",
+                        .{},
+                        info.line,
+                        info.column,
+                        &[_]bun.logger.Data{},
+                    );
+                },
+                .disallow_not_single_class => |info| {
+                    options.warnFmtWithNotes(
+                        "\"composes\" only works inside single class selectors",
+                        .{},
+                        source_location.line,
+                        source_location.column,
+                        options.allocator.dupe(
+                            bun.logger.Data,
+                            &[_]bun.logger.Data{
+                                bun.logger.Data{
+                                    .text = options.allocator.dupe(u8, "The parent selector is not a single class selector because of the syntax here:") catch bun.outOfMemory(),
+                                    .location = info.toLoggerLocation(options.filename),
+                                },
+                            },
+                        ) catch bun.outOfMemory(),
+                    );
+                },
+            }
+        }
+    }
     if (important) {
         important_declarations.append(input.allocator(), property) catch bun.outOfMemory();
     } else {
diff --git a/src/css/dependencies.zig b/src/css/dependencies.zig
index 453f9cefb3e962..3ad9eda93f76a8 100644
--- a/src/css/dependencies.zig
+++ b/src/css/dependencies.zig
@@ -64,7 +64,7 @@ pub const ImportDependency = struct {
     /// The location of the dependency in the source file.
     loc: SourceRange,
 
-    pub fn new(allocator: Allocator, rule: *const css.css_rules.import.ImportRule, filename: []const u8) ImportDependency {
+    pub fn new(allocator: Allocator, rule: *const css.css_rules.import.ImportRule, filename: []const u8, local_names: ?*const css.LocalsResultsMap, symbols: *const bun.JSAst.Symbol.Map) ImportDependency {
         const supports = if (rule.supports) |*supports| brk: {
             const s = css.to_css.string(
                 allocator,
@@ -72,6 +72,8 @@ pub const ImportDependency = struct {
                 supports,
                 css.PrinterOptions.default(),
                 null,
+                local_names,
+                symbols,
             ) catch bun.Output.panic(
                 "Unreachable code: failed to stringify SupportsCondition.\n\nThis is a bug in Bun's CSS printer. Please file a bug report at https://github.com/oven-sh/bun/issues/new/choose",
                 .{},
@@ -80,7 +82,7 @@ pub const ImportDependency = struct {
         } else null;
 
         const media = if (rule.media.media_queries.items.len > 0) media: {
-            const s = css.to_css.string(allocator, css.MediaList, &rule.media, css.PrinterOptions.default(), null) catch bun.Output.panic(
+            const s = css.to_css.string(allocator, css.MediaList, &rule.media, css.PrinterOptions.default(), null, local_names, symbols) catch bun.Output.panic(
                 "Unreachable code: failed to stringify MediaList.\n\nThis is a bug in Bun's CSS printer. Please file a bug report at https://github.com/oven-sh/bun/issues/new/choose",
                 .{},
             );
diff --git a/src/css/error.zig b/src/css/error.zig
index 4f5cbd40295300..4a7c555a4955f8 100644
--- a/src/css/error.zig
+++ b/src/css/error.zig
@@ -349,6 +349,7 @@ pub const SelectorError = union(enum) {
     /// An unsupported pseudo class or pseudo element was encountered.
     unsupported_pseudo_class_or_element: []const u8,
     unexpected_selector_after_pseudo_element: css.Token,
+    ambiguous_css_module_class: []const u8,
 
     pub fn format(this: @This(), comptime _: []const u8, _: std.fmt.FormatOptions, writer: anytype) !void {
         return switch (this) {
@@ -374,6 +375,7 @@ pub const SelectorError = union(enum) {
             .pseudo_element_expected_ident => |tok| try writer.print("Expected identifier in pseudo-element, found: {}", .{tok}),
             .unexpected_token_in_attribute_selector => |tok| try writer.print("Unexpected token in attribute selector: {}", .{tok}),
             .unexpected_selector_after_pseudo_element => |tok| try writer.print("Unexpected selector after pseudo-element: {}", .{tok}),
+            .ambiguous_css_module_class => |name| try writer.print("CSS module class: '{s}' is currently not supported.", .{name}),
         };
     }
 };
diff --git a/src/css/generics.zig b/src/css/generics.zig
index 9c7fbb3a230b81..3876d69e84d42d 100644
--- a/src/css/generics.zig
+++ b/src/css/generics.zig
@@ -45,6 +45,10 @@ pub inline fn implementDeepClone(comptime T: type, this: *const T, allocator: Al
         return this.*;
     }
 
+    if (comptime T == bun.logger.Loc) {
+        return this.*;
+    }
+
     if (comptime @typeInfo(T) == .pointer) {
         const TT = std.meta.Child(T);
         return implementEql(TT, this.*);
@@ -109,6 +113,9 @@ pub fn implementEql(comptime T: type, this: *const T, other: *const T) bool {
     if (comptime T == VendorPrefix) {
         return VendorPrefix.eql(this.*, other.*);
     }
+    if (comptime T == bun.logger.Loc) {
+        return this.*.start == other.*.start;
+    }
     return switch (tyinfo) {
         .optional => @compileError("Handled above, this means Zack wrote a bug."),
         .pointer => @compileError("Handled above, this means Zack wrote a bug."),
@@ -444,6 +451,7 @@ pub inline fn eql(comptime T: type, lhs: *const T, rhs: *const T) bool {
         CSSInteger => lhs.* == rhs.*,
         CustomIdent, DashedIdent, Ident => bun.strings.eql(lhs.v, rhs.v),
         []const u8 => bun.strings.eql(lhs.*, rhs.*),
+        bun.logger.Loc => lhs.eql(rhs.*),
         // css.VendorPrefix => css.VendorPrefix.eq(lhs.*, rhs.*),
         else => T.eql(lhs, rhs),
     };
diff --git a/src/css/printer.zig b/src/css/printer.zig
index e8411a83820ba8..b686f1d035e231 100644
--- a/src/css/printer.zig
+++ b/src/css/printer.zig
@@ -127,6 +127,8 @@ pub fn Printer(comptime Writer: type) type {
         css_module: ?css.CssModule = null,
         dependencies: ?ArrayList(css.Dependency) = null,
         remove_imports: bool,
+        /// A mapping of pseudo classes to replace with class names that can be applied
+        /// from JavaScript. Useful for polyfills, for example.
         pseudo_classes: ?PseudoClasses = null,
         indentation_buf: std.ArrayList(u8),
         ctx: ?*const css.StyleContext = null,
@@ -134,12 +136,40 @@ pub fn Printer(comptime Writer: type) type {
         error_kind: ?css.PrinterError = null,
         import_info: ?ImportInfo = null,
         public_path: []const u8,
+        symbols: *const bun.JSAst.Symbol.Map,
+        local_names: ?*const css.LocalsResultsMap = null,
         /// NOTE This should be the same mimalloc heap arena allocator
         allocator: Allocator,
         // TODO: finish the fields
 
+        pub threadlocal var in_debug_fmt: if (bun.Environment.isDebug) bool else u0 = if (bun.Environment.isDebug) false else 0;
+
         const This = @This();
 
+        pub fn lookupSymbol(this: *This, ref: bun.bundle_v2.Ref) []const u8 {
+            const symbols = this.symbols;
+
+            const final_ref = symbols.follow(ref);
+            if (this.local_names) |local_names| {
+                if (local_names.get(final_ref)) |local_name| return local_name;
+            }
+
+            const original_name = symbols.get(final_ref).?.original_name;
+            return original_name;
+        }
+
+        pub fn lookupIdentOrRef(this: *This, ident: css.css_values.ident.IdentOrRef) []const u8 {
+            if (comptime bun.Environment.isDebug) {
+                if (in_debug_fmt) {
+                    return ident.debugIdent();
+                }
+            }
+            if (ident.isIdent()) {
+                return ident.asIdent().?.v;
+            }
+            return this.lookupSymbol(ident.asRef().?);
+        }
+
         inline fn getWrittenAmt(writer: Writer) usize {
             return switch (Writer) {
                 ArrayList(u8).Writer => writer.context.self.items.len,
@@ -223,6 +253,8 @@ pub fn Printer(comptime Writer: type) type {
             dest: Writer,
             options: PrinterOptions,
             import_info: ?ImportInfo,
+            local_names: ?*const css.LocalsResultsMap,
+            symbols: *const bun.JSAst.Symbol.Map,
         ) This {
             return .{
                 .sources = null,
@@ -237,11 +269,13 @@ pub fn Printer(comptime Writer: type) type {
                 .scratchbuf = scratchbuf,
                 .allocator = allocator,
                 .public_path = options.public_path,
+                .local_names = local_names,
                 .loc = .{
                     .source_index = 0,
                     .line = 0,
                     .column = 1,
                 },
+                .symbols = symbols,
             };
         }
 
@@ -342,6 +376,16 @@ pub fn Printer(comptime Writer: type) type {
             return str;
         }
 
+        pub fn writeIdentOrRef(this: *This, ident: css.css_values.ident.IdentOrRef, handle_css_module: bool) PrintErr!void {
+            if (!handle_css_module) {
+                bun.assert(ident.isIdent());
+                return css.serializer.serializeIdentifier(ident.asIdent().?.v, this) catch return this.addFmtError();
+            }
+
+            const str = this.lookupIdentOrRef(ident);
+            return css.serializer.serializeIdentifier(str, this) catch return this.addFmtError();
+        }
+
         /// Writes a CSS identifier to the underlying destination, escaping it
         /// as appropriate. If the `css_modules` option was enabled, then a hash
         /// is added, and the mapping is added to the CSS module.
diff --git a/src/css/properties/css_modules.zig b/src/css/properties/css_modules.zig
index 859ca91f577a25..bbb09c06d81a15 100644
--- a/src/css/properties/css_modules.zig
+++ b/src/css/properties/css_modules.zig
@@ -37,10 +37,12 @@ pub const Composes = struct {
     /// Where the class names are composed from.
     from: ?Specifier,
     /// The source location of the `composes` property.
-    loc: Location,
+    loc: bun.logger.Loc,
+    cssparser_loc: Location,
 
     pub fn parse(input: *css.Parser) css.Result(Composes) {
-        const loc = input.currentSourceLocation();
+        const loc = input.position();
+        const loc2 = input.currentSourceLocation();
         var names: CustomIdentList = .{};
         while (input.tryParse(parseOneIdent, .{}).asValue()) |name| {
             names.append(input.allocator(), name);
@@ -53,7 +55,14 @@ pub const Composes = struct {
             .err => |e| return .{ .err = e },
         } else null;
 
-        return .{ .result = Composes{ .names = names, .from = from, .loc = Location.fromSourceLocation(loc) } };
+        return .{
+            .result = Composes{
+                .names = names,
+                .from = from,
+                .loc = bun.logger.Loc{ .start = @intCast(loc) },
+                .cssparser_loc = Location.fromSourceLocation(loc2),
+            },
+        };
     }
 
     pub fn toCss(this: *const @This(), comptime W: type, dest: *Printer(W)) PrintErr!void {
@@ -100,17 +109,26 @@ pub const Specifier = union(enum) {
     /// The referenced name is global.
     global,
     /// The referenced name comes from the specified file.
-    file: []const u8,
-    /// The referenced name comes from a source index (used during bundling).
-    source_index: u32,
+    ///
+    /// Is an import record index
+    import_record_index: u32,
 
     pub fn eql(lhs: *const @This(), rhs: *const @This()) bool {
         return css.implementEql(@This(), lhs, rhs);
     }
 
     pub fn parse(input: *css.Parser) css.Result(Specifier) {
-        if (input.tryParse(css.Parser.expectString, .{}).asValue()) |file| {
-            return .{ .result = .{ .file = file } };
+        const start_position = input.position();
+        if (input.tryParse(css.Parser.expectUrlOrString, .{}).asValue()) |file| {
+            const import_record_index = switch (input.addImportRecord(file, start_position, .composes)) {
+                .result => |idx| idx,
+                .err => |e| return .{ .err = e },
+            };
+            return .{
+                .result = .{
+                    .import_record_index = import_record_index,
+                },
+            };
         }
         if (input.expectIdentMatching("global").asErr()) |e| return .{ .err = e };
         return .{ .result = .global };
@@ -119,8 +137,11 @@ pub const Specifier = union(enum) {
     pub fn toCss(this: *const @This(), comptime W: type, dest: *Printer(W)) PrintErr!void {
         return switch (this.*) {
             .global => dest.writeStr("global"),
-            .file => |file| css.serializer.serializeString(file, dest) catch return dest.addFmtError(),
-            .source_index => {},
+            .import_record_index => |import_record_index| {
+                const url = try dest.getImportRecordUrl(import_record_index);
+                css.serializer.serializeString(url, dest) catch return dest.addFmtError();
+            },
+            // .source_index => {},
         };
     }
 
diff --git a/src/css/properties/generate_properties.ts b/src/css/properties/generate_properties.ts
index 2dbe7defa422cf..27cdf015261f07 100644
--- a/src/css/properties/generate_properties.ts
+++ b/src/css/properties/generate_properties.ts
@@ -30,6 +30,14 @@ type PropertyDef = {
     css_modules: boolean;
   };
   eval_branch_quota?: number;
+  /**
+   * If parsing a property fails, we fallback to parsing it as `UnparsedProperty`. This is just
+   * the raw tokens. This is helpful for certain minify property handlers.
+   *
+   * In other cases, it's more helpful to throw an error. For example, if the `composes` property,
+   * is used incorrectly, it is more useful for the user to know about that error.
+   */
+  parse_dont_make_unparsed?: boolean;
 };
 
 const OUTPUT_FILE = "src/css/properties/properties_generated.zig";
@@ -313,6 +321,15 @@ function generatePropertyImplParseCases(property_defs: Record<string, PropertyDe
         meta.valid_prefixes === undefined
           ? `.{ .${escapeIdent(name)} = c }`
           : `.{ .${escapeIdent(name)} = .{ c, pre } }`;
+      if (meta.parse_dont_make_unparsed === true) {
+        return `.${escapeIdent(name)} => ${capture} {
+    ${meta.eval_branch_quota !== undefined ? `@setEvalBranchQuota(${meta.eval_branch_quota});` : ""}
+  return switch (css.generic.parseWithOptions(${meta.ty}, input, options)) {
+    .result => |c| return .{ .result = ${ret} },
+    .err => |e| return .{ .err = e },
+  };
+},`;
+      }
       return `.${escapeIdent(name)} => ${capture} {
     ${meta.eval_branch_quota !== undefined ? `@setEvalBranchQuota(${meta.eval_branch_quota});` : ""}
   if (css.generic.parseWithOptions(${meta.ty}, input, options).asValue()) |c| {
@@ -1549,6 +1566,7 @@ generateCode({
   composes: {
     ty: "Composes",
     conditional: { css_modules: true },
+    parse_dont_make_unparsed: true,
   },
   // TODO: Hello future Zack, if you uncomment this, remember to uncomment the corresponding value in FallbackHandler in prefix_handler.zig :)
   // fill: {
diff --git a/src/css/properties/properties_generated.zig b/src/css/properties/properties_generated.zig
index 16e6bc6d97af8e..65a3d3a1e25286 100644
--- a/src/css/properties/properties_generated.zig
+++ b/src/css/properties/properties_generated.zig
@@ -5850,11 +5850,10 @@ pub const Property = union(PropertyIdTag) {
                 }
             },
             .composes => {
-                if (css.generic.parseWithOptions(Composes, input, options).asValue()) |c| {
-                    if (input.expectExhausted().isOk()) {
-                        return .{ .result = .{ .composes = c } };
-                    }
-                }
+                return switch (css.generic.parseWithOptions(Composes, input, options)) {
+                    .result => |c| return .{ .result = .{ .composes = c } },
+                    .err => |e| return .{ .err = e },
+                };
             },
             .@"mask-image" => |pre| {
                 if (css.generic.parseWithOptions(SmallList(Image, 1), input, options).asValue()) |c| {
diff --git a/src/css/properties/transform.zig b/src/css/properties/transform.zig
index 2fc78932ce53fd..9be9dacb6e6686 100644
--- a/src/css/properties/transform.zig
+++ b/src/css/properties/transform.zig
@@ -82,6 +82,8 @@ pub const TransformList = struct {
                 base_writer,
                 css.PrinterOptions.defaultWithMinify(true),
                 dest.import_info,
+                dest.local_names,
+                dest.symbols,
             );
             defer p.deinit();
 
diff --git a/src/css/rules/import.zig b/src/css/rules/import.zig
index 2dbf45c508bdab..5186bb7864c716 100644
--- a/src/css/rules/import.zig
+++ b/src/css/rules/import.zig
@@ -221,6 +221,8 @@ pub const ImportRule = struct {
             dest.allocator,
             this,
             dest.filename(),
+            dest.local_names,
+            dest.symbols,
         ) else null;
 
         // #[cfg(feature = "sourcemap")]
diff --git a/src/css/rules/property.zig b/src/css/rules/property.zig
index 8ad0892f10c147..0e965f747d1e29 100644
--- a/src/css/rules/property.zig
+++ b/src/css/rules/property.zig
@@ -45,7 +45,7 @@ pub const PropertyRule = struct {
         const initial_value = switch (syntax) {
             .universal => if (parser.initial_value) |val| brk: {
                 var i = css.ParserInput.new(input.allocator(), val);
-                var p2 = css.Parser.new(&i, null);
+                var p2 = css.Parser.new(&i, null, .{}, null);
 
                 if (p2.isExhausted()) {
                     break :brk ParsedComponent{
@@ -62,7 +62,7 @@ pub const PropertyRule = struct {
             else => brk: {
                 const val = parser.initial_value orelse return .{ .err = input.newCustomError(css.ParserError.at_rule_body_invalid) };
                 var i = css.ParserInput.new(input.allocator(), val);
-                var p2 = css.Parser.new(&i, null);
+                var p2 = css.Parser.new(&i, null, .{}, null);
                 break :brk switch (syntax.parseValue(&p2)) {
                     .result => |vv| vv,
                     .err => |e| return .{ .err = e },
diff --git a/src/css/rules/rules.zig b/src/css/rules/rules.zig
index 191e55240efb6c..67055e22549bd3 100644
--- a/src/css/rules/rules.zig
+++ b/src/css/rules/rules.zig
@@ -482,7 +482,7 @@ pub fn CssRuleList(comptime AtRule: type) type {
                 if (rule.* == .import) {
                     if (dest.remove_imports) {
                         const dep = if (dest.dependencies != null) Dependency{
-                            .import = dependencies.ImportDependency.new(dest.allocator, &rule.import, dest.filename()),
+                            .import = dependencies.ImportDependency.new(dest.allocator, &rule.import, dest.filename(), dest.local_names, dest.symbols),
                         } else null;
 
                         if (dest.dependencies) |*deps| {
@@ -523,6 +523,7 @@ pub const MinifyContext = struct {
     handler_context: css.PropertyHandlerContext,
     unused_symbols: *const std.StringArrayHashMapUnmanaged(void),
     custom_media: ?std.StringArrayHashMapUnmanaged(custom_media.CustomMediaRule),
+    extra: *const css.StylesheetExtra,
     css_modules: bool,
     err: ?css.MinifyError = null,
 };
@@ -612,6 +613,7 @@ fn mergeStyleRules(
     context: *MinifyContext,
 ) bool {
     // Merge declarations if the selectors are equivalent, and both are compatible with all targets.
+    // Does not apply if css modules are enabled
     if (sty.selectors.eql(&last_style_rule.selectors) and
         sty.isCompatible(context.targets.*) and
         last_style_rule.isCompatible(context.targets.*) and
diff --git a/src/css/rules/style.zig b/src/css/rules/style.zig
index a972865541f9f2..9e3893fd0baeac 100644
--- a/src/css/rules/style.zig
+++ b/src/css/rules/style.zig
@@ -127,17 +127,18 @@ pub fn StyleRule(comptime R: type) type {
                         if (decl.* == .composes) {
                             const composes = &decl.composes;
                             if (dest.isNested() and dest.css_module != null) {
-                                return dest.newError(css.PrinterErrorKind.invalid_composes_nesting, composes.loc);
+                                return dest.newError(css.PrinterErrorKind.invalid_composes_nesting, composes.cssparser_loc);
                             }
 
                             if (dest.css_module) |*css_module| {
                                 if (css_module.handleComposes(
-                                    dest.allocator,
+                                    W,
+                                    dest,
                                     &this.selectors,
                                     composes,
                                     this.loc.source_index,
                                 ).asErr()) |error_kind| {
-                                    return dest.newError(error_kind, composes.loc);
+                                    return dest.newError(error_kind, composes.cssparser_loc);
                                 }
                                 continue;
                             }
@@ -198,7 +199,7 @@ pub fn StyleRule(comptime R: type) type {
         pub fn minify(this: *This, context: *css.MinifyContext, parent_is_unused: bool) css.MinifyErr!bool {
             var unused = false;
             if (context.unused_symbols.count() > 0) {
-                if (css.selector.isUnused(this.selectors.v.slice(), context.unused_symbols, parent_is_unused)) {
+                if (css.selector.isUnused(this.selectors.v.slice(), context.unused_symbols, &context.extra.symbols, parent_is_unused)) {
                     if (this.rules.v.items.len == 0) {
                         return true;
                     }
diff --git a/src/css/selectors/parser.zig b/src/css/selectors/parser.zig
index a5bc5745b4996c..b23962d7308e7a 100644
--- a/src/css/selectors/parser.zig
+++ b/src/css/selectors/parser.zig
@@ -927,7 +927,7 @@ pub const PseudoClass = union(enum) {
         const writer = s.writer(dest.allocator);
         const W2 = @TypeOf(writer);
         const scratchbuf = std.ArrayList(u8).init(dest.allocator);
-        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info);
+        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info, dest.local_names, dest.symbols);
         try serialize.serializePseudoClass(this, W2, &printer, null);
         return dest.writeStr(s.items);
     }
@@ -1043,6 +1043,15 @@ pub const SelectorParser = struct {
 
     pub const Impl = impl.Selectors;
 
+    pub fn newLocalIdentifier(_: *SelectorParser, input: *css.Parser, tag: css.CssRef.Tag, raw: []const u8, loc: usize) Impl.SelectorImpl.LocalIdentifier {
+        if (input.flags.css_modules) {
+            return Impl.SelectorImpl.LocalIdentifier.fromRef(input.addSymbolForName(raw, tag, bun.logger.Loc{
+                .start = @intCast(loc),
+            }), if (comptime bun.Environment.isDebug) .{ raw, input.allocator() } else {});
+        }
+        return Impl.SelectorImpl.LocalIdentifier.fromIdent(.{ .v = raw });
+    }
+
     pub fn namespaceForPrefix(this: *SelectorParser, prefix: css.css_values.ident.Ident) ?[]const u8 {
         _ = this; // autofix
         return prefix.v;
@@ -1125,213 +1134,105 @@ pub const SelectorParser = struct {
     ) Result(PseudoClass) {
         // @compileError(css.todo_stuff.match_ignore_ascii_case);
         const pseudo_class: PseudoClass = pseudo_class: {
-            if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "hover")) {
-                // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-                break :pseudo_class .hover;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "active")) {
-                // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-                break :pseudo_class .active;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "focus")) {
+            const Map = comptime bun.ComptimeStringMap(PseudoClass, .{
                 // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-                break :pseudo_class .focus;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "focus-visible")) {
-                // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-                break :pseudo_class .focus_visible;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "focus-within")) {
-                // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-                break :pseudo_class .focus_within;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "current")) {
-                // https://drafts.csswg.org/selectors-4/#time-pseudos
-                break :pseudo_class .current;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "past")) {
-                // https://drafts.csswg.org/selectors-4/#time-pseudos
-                break :pseudo_class .past;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "future")) {
+                .{ "hover", PseudoClass{ .hover = {} } },
+                .{ "active", PseudoClass{ .active = {} } },
+                .{ "focus", PseudoClass{ .focus = {} } },
+                .{ "focus-visible", PseudoClass{ .focus_visible = {} } },
+                .{ "focus-within", PseudoClass{ .focus_within = {} } },
+
                 // https://drafts.csswg.org/selectors-4/#time-pseudos
-                break :pseudo_class .future;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "playing")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .playing;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "paused")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .paused;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "seeking")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .seeking;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "buffering")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .buffering;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "stalled")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .stalled;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "muted")) {
-                // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .muted;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "volume-locked")) {
+                .{ "current", PseudoClass{ .current = {} } },
+                .{ "past", PseudoClass{ .past = {} } },
+                .{ "future", PseudoClass{ .future = {} } },
+
                 // https://drafts.csswg.org/selectors-4/#resource-pseudos
-                break :pseudo_class .volume_locked;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "fullscreen")) {
-                // https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class
-                break :pseudo_class .{ .fullscreen = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-webkit-full-screen")) {
-                // https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class
-                break :pseudo_class .{ .fullscreen = css.VendorPrefix{ .webkit = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-moz-full-screen")) {
-                // https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class
-                break :pseudo_class .{ .fullscreen = css.VendorPrefix{ .moz = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-ms-fullscreen")) {
+                .{ "playing", PseudoClass{ .playing = {} } },
+                .{ "paused", PseudoClass{ .paused = {} } },
+                .{ "seeking", PseudoClass{ .seeking = {} } },
+                .{ "buffering", PseudoClass{ .buffering = {} } },
+                .{ "stalled", PseudoClass{ .stalled = {} } },
+                .{ "muted", PseudoClass{ .muted = {} } },
+                .{ "volume-locked", PseudoClass{ .volume_locked = {} } },
+
                 // https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class
-                break :pseudo_class .{ .fullscreen = css.VendorPrefix{ .ms = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "open")) {
-                // https://drafts.csswg.org/selectors/#display-state-pseudos
-                break :pseudo_class .open;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "closed")) {
-                // https://drafts.csswg.org/selectors/#display-state-pseudos
-                break :pseudo_class .closed;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "modal")) {
-                // https://drafts.csswg.org/selectors/#display-state-pseudos
-                break :pseudo_class .modal;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "picture-in-picture")) {
+                .{ "fullscreen", PseudoClass{ .fullscreen = css.VendorPrefix{ .none = true } } },
+                .{ "-webkit-full-screen", PseudoClass{ .fullscreen = css.VendorPrefix{ .webkit = true } } },
+                .{ "-moz-full-screen", PseudoClass{ .fullscreen = css.VendorPrefix{ .moz = true } } },
+                .{ "-ms-fullscreen", PseudoClass{ .fullscreen = css.VendorPrefix{ .ms = true } } },
+
                 // https://drafts.csswg.org/selectors/#display-state-pseudos
-                break :pseudo_class .picture_in_picture;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "popover-open")) {
+                .{ "open", PseudoClass{ .open = {} } },
+                .{ "closed", PseudoClass{ .closed = {} } },
+                .{ "modal", PseudoClass{ .modal = {} } },
+                .{ "picture-in-picture", PseudoClass{ .picture_in_picture = {} } },
+
                 // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-popover-open
-                break :pseudo_class .popover_open;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "defined")) {
+                .{ "popover-open", PseudoClass{ .popover_open = {} } },
+
                 // https://drafts.csswg.org/selectors-4/#the-defined-pseudo
-                break :pseudo_class .defined;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "any-link")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .{ .any_link = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-webkit-any-link")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .{ .any_link = css.VendorPrefix{ .webkit = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-moz-any-link")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .{ .any_link = css.VendorPrefix{ .moz = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "link")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .link;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "local-link")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .local_link;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "target")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .target;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "target-within")) {
-                // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .target_within;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "visited")) {
+                .{ "defined", PseudoClass{ .defined = {} } },
+
                 // https://drafts.csswg.org/selectors-4/#location
-                break :pseudo_class .visited;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "enabled")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .enabled;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "disabled")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .disabled;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "read-only")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .read_only = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-moz-read-only")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .read_only = css.VendorPrefix{ .moz = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "read-write")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .read_write = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-moz-read-write")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .read_write = css.VendorPrefix{ .moz = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "placeholder-shown")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .placeholder_shown = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-moz-placeholder-shown")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .placeholder_shown = css.VendorPrefix{ .moz = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-ms-placeholder-shown")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .{ .placeholder_shown = css.VendorPrefix{ .ms = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "default")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .default;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "checked")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .checked;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "indeterminate")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .indeterminate;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "blank")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .blank;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "valid")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .valid;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "invalid")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .invalid;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "in-range")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .in_range;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "out-of-range")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .out_of_range;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "required")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .required;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "optional")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .optional;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "user-valid")) {
-                // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .user_valid;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "user-invalid")) {
+                .{ "any-link", PseudoClass{ .any_link = css.VendorPrefix{ .none = true } } },
+                .{ "-webkit-any-link", PseudoClass{ .any_link = css.VendorPrefix{ .webkit = true } } },
+                .{ "-moz-any-link", PseudoClass{ .any_link = css.VendorPrefix{ .moz = true } } },
+                .{ "link", PseudoClass{ .link = {} } },
+                .{ "local-link", PseudoClass{ .local_link = {} } },
+                .{ "target", PseudoClass{ .target = {} } },
+                .{ "target-within", PseudoClass{ .target_within = {} } },
+                .{ "visited", PseudoClass{ .visited = {} } },
+
                 // https://drafts.csswg.org/selectors-4/#input-pseudos
-                break :pseudo_class .user_invalid;
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "autofill")) {
-                // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill
-                break :pseudo_class .{ .autofill = css.VendorPrefix{ .none = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-webkit-autofill")) {
-                // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill
-                break :pseudo_class .{ .autofill = css.VendorPrefix{ .webkit = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "-o-autofill")) {
+                .{ "enabled", PseudoClass{ .enabled = {} } },
+                .{ "disabled", PseudoClass{ .disabled = {} } },
+                .{ "read-only", PseudoClass{ .read_only = css.VendorPrefix{ .none = true } } },
+                .{ "-moz-read-only", PseudoClass{ .read_only = css.VendorPrefix{ .moz = true } } },
+                .{ "read-write", PseudoClass{ .read_write = css.VendorPrefix{ .none = true } } },
+                .{ "-moz-read-write", PseudoClass{ .read_write = css.VendorPrefix{ .moz = true } } },
+                .{ "placeholder-shown", PseudoClass{ .placeholder_shown = css.VendorPrefix{ .none = true } } },
+                .{ "-moz-placeholder-shown", PseudoClass{ .placeholder_shown = css.VendorPrefix{ .moz = true } } },
+                .{ "-ms-placeholder-shown", PseudoClass{ .placeholder_shown = css.VendorPrefix{ .ms = true } } },
+                .{ "default", PseudoClass{ .default = {} } },
+                .{ "checked", PseudoClass{ .checked = {} } },
+                .{ "indeterminate", PseudoClass{ .indeterminate = {} } },
+                .{ "blank", PseudoClass{ .blank = {} } },
+                .{ "valid", PseudoClass{ .valid = {} } },
+                .{ "invalid", PseudoClass{ .invalid = {} } },
+                .{ "in-range", PseudoClass{ .in_range = {} } },
+                .{ "out-of-range", PseudoClass{ .out_of_range = {} } },
+                .{ "required", PseudoClass{ .required = {} } },
+                .{ "optional", PseudoClass{ .optional = {} } },
+                .{ "user-valid", PseudoClass{ .user_valid = {} } },
+                .{ "user-invalid", PseudoClass{ .user_invalid = {} } },
+
                 // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill
-                break :pseudo_class .{ .autofill = css.VendorPrefix{ .o = true } };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "horizontal")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .horizontal };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "vertical")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .vertical };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "decrement")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .decrement };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "increment")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .increment };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "start")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .start };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "end")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .end };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "double-button")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .double_button };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "single-button")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .single_button };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "no-button")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .no_button };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "corner-present")) {
-                // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .corner_present };
-            } else if (bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "window-inactive")) {
+                .{ "autofill", PseudoClass{ .autofill = css.VendorPrefix{ .none = true } } },
+                .{ "-webkit-autofill", PseudoClass{ .autofill = css.VendorPrefix{ .webkit = true } } },
+                .{ "-o-autofill", PseudoClass{ .autofill = css.VendorPrefix{ .o = true } } },
+
                 // https://webkit.org/blog/363/styling-scrollbars/
-                break :pseudo_class .{ .webkit_scrollbar = .window_inactive };
+                .{ "horizontal", PseudoClass{ .webkit_scrollbar = .horizontal } },
+                .{ "vertical", PseudoClass{ .webkit_scrollbar = .vertical } },
+                .{ "decrement", PseudoClass{ .webkit_scrollbar = .decrement } },
+                .{ "increment", PseudoClass{ .webkit_scrollbar = .increment } },
+                .{ "start", PseudoClass{ .webkit_scrollbar = .start } },
+                .{ "end", PseudoClass{ .webkit_scrollbar = .end } },
+                .{ "double-button", PseudoClass{ .webkit_scrollbar = .double_button } },
+                .{ "single-button", PseudoClass{ .webkit_scrollbar = .single_button } },
+                .{ "no-button", PseudoClass{ .webkit_scrollbar = .no_button } },
+                .{ "corner-present", PseudoClass{ .webkit_scrollbar = .corner_present } },
+                .{ "window-inactive", PseudoClass{ .webkit_scrollbar = .window_inactive } },
+            });
+
+            if (Map.getAnyCase(name)) |pseudo| {
+                break :pseudo_class pseudo;
             } else {
                 if (bun.strings.startsWithChar(name, '_')) {
                     this.options.warn(loc.newCustomError(SelectorParseErrorKind{ .unsupported_pseudo_class_or_element = name }));
+                } else if (this.options.css_modules != null and bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "local") or bun.strings.eqlCaseInsensitiveASCIIICheckLength(name, "global")) {
+                    return .{ .err = loc.newCustomError(SelectorParseErrorKind{ .ambiguous_css_module_class = name }) };
                 }
                 return .{ .result = PseudoClass{ .custom = .{ .name = name } } };
             }
@@ -1746,8 +1647,13 @@ pub fn GenericSelector(comptime Impl: type) type {
                 var arraylist = ArrayList(u8){};
                 const w = arraylist.writer(bun.default_allocator);
                 defer arraylist.deinit(bun.default_allocator);
-                var printer = css.Printer(@TypeOf(w)).new(bun.default_allocator, std.ArrayList(u8).init(bun.default_allocator), w, css.PrinterOptions.default(), null);
+                const symbols = bun.JSAst.Symbol.Map{};
+                const P = css.Printer(@TypeOf(w));
+                var printer = P.new(bun.default_allocator, std.ArrayList(u8).init(bun.default_allocator), w, css.PrinterOptions.default(), null, null, &symbols);
                 defer printer.deinit();
+                P.in_debug_fmt = true;
+                defer P.in_debug_fmt = false;
+
                 css.selector.tocss_servo.toCss_Selector(this.this, @TypeOf(w), &printer) catch |e| return try writer.print("<error writing selector: {s}>\n", .{@errorName(e)});
                 try writer.writeAll(arraylist.items);
             }
@@ -1884,8 +1790,8 @@ pub fn GenericComponent(comptime Impl: type) type {
         explicit_universal_type,
         local_name: LocalName(Impl),
 
-        id: Impl.SelectorImpl.Identifier,
-        class: Impl.SelectorImpl.Identifier,
+        id: Impl.SelectorImpl.LocalIdentifier,
+        class: Impl.SelectorImpl.LocalIdentifier,
 
         attribute_in_no_namespace_exists: struct {
             local_name: Impl.SelectorImpl.LocalName,
@@ -1979,6 +1885,21 @@ pub fn GenericComponent(comptime Impl: type) type {
 
         const This = @This();
 
+        /// If css mdules is enabled these will be locally scoped
+        pub fn isLocallyScoped(this: *const @This()) bool {
+            return switch (this.*) {
+                .id, .class => true,
+                else => false,
+            };
+        }
+
+        pub fn asClass(this: *const @This()) ?Impl.SelectorImpl.LocalIdentifier {
+            return switch (this.*) {
+                inline .class => |v| v,
+                else => null,
+            };
+        }
+
         pub fn deepClone(this: *const @This(), allocator: Allocator) @This() {
             return css.implementDeepClone(@This(), this, allocator);
         }
@@ -1992,7 +1913,7 @@ pub fn GenericComponent(comptime Impl: type) type {
                 .local_name => return try writer.print("local_name={s}", .{this.local_name.name.v}),
                 .combinator => return try writer.print("combinator='{}'", .{this.combinator}),
                 .pseudo_element => return try writer.print("pseudo_element={}", .{this.pseudo_element}),
-                .class => return try writer.print("class={s}", .{this.class.v}),
+                .class => return try writer.print("class={}", .{this.class}),
                 else => {},
             }
             return writer.print("{s}", .{@tagName(this.*)});
@@ -2367,6 +2288,7 @@ pub const SelectorParseErrorKind = union(enum) {
     bad_value_in_attr: css.Token,
     explicit_namespace_unexpected_token: css.Token,
     unexpected_ident: []const u8,
+    ambiguous_css_module_class: []const u8,
 
     pub fn intoDefaultParserError(this: SelectorParseErrorKind) css.ParserError {
         return css.ParserError{
@@ -2396,6 +2318,7 @@ pub const SelectorParseErrorKind = union(enum) {
             .explicit_namespace_unexpected_token => |token| .{ .explicit_namespace_unexpected_token = token },
             .unexpected_ident => |ident| .{ .unexpected_ident = ident },
             .unexpected_selector_after_pseudo_element => |tok| .{ .unexpected_selector_after_pseudo_element = tok },
+            .ambiguous_css_module_class => |name| .{ .ambiguous_css_module_class = name },
         };
     }
 };
@@ -2598,7 +2521,7 @@ pub const PseudoElement = union(enum) {
         const writer = s.writer(dest.allocator);
         const W2 = @TypeOf(writer);
         const scratchbuf = std.ArrayList(u8).init(dest.allocator);
-        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info);
+        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info, dest.local_names, dest.symbols);
         try serialize.serializePseudoElement(this, W2, &printer, null);
         return dest.writeStr(s.items);
     }
@@ -2744,6 +2667,7 @@ pub fn parse_one_simple_selector(
 
     const start = input.state();
     const token_location = input.currentSourceLocation();
+    const token_loc = input.position();
     const token = switch (input.nextIncludingWhitespace()) {
         .result => |v| v.*,
         .err => {
@@ -2757,7 +2681,7 @@ pub fn parse_one_simple_selector(
             if (state.intersects(SelectorParsingState.AFTER_PSEUDO)) {
                 return .{ .err = token_location.newCustomError(SelectorParseErrorKind.intoDefaultParserError(.{ .unexpected_selector_after_pseudo_element = .{ .idhash = id } })) };
             }
-            const component: GenericComponent(Impl) = .{ .id = .{ .v = id } };
+            const component: GenericComponent(Impl) = .{ .id = parser.newLocalIdentifier(input, .ID, id, token_loc) };
             return .{ .result = S{
                 .simple_selector = component,
             } };
@@ -2948,7 +2872,7 @@ pub fn parse_one_simple_selector(
                             return .{ .err = location.newCustomError(e.intoDefaultParserError()) };
                         },
                     };
-                    return .{ .result = .{ .simple_selector = .{ .class = .{ .v = class } } } };
+                    return .{ .result = .{ .simple_selector = .{ .class = parser.newLocalIdentifier(input, .CLASS, class, token_loc) } } };
                 },
                 '&' => {
                     if (parser.isNestingAllowed()) {
diff --git a/src/css/selectors/selector.zig b/src/css/selectors/selector.zig
index 94352ab1349428..ea453c6ce8479d 100644
--- a/src/css/selectors/selector.zig
+++ b/src/css/selectors/selector.zig
@@ -31,6 +31,8 @@ pub const impl = struct {
         pub const SelectorImpl = struct {
             pub const AttrValue = css.css_values.string.CSSString;
             pub const Identifier = css.css_values.ident.Ident;
+            /// An identifier which could be a local name for use in CSS modules
+            pub const LocalIdentifier = css.css_values.ident.IdentOrRef;
             pub const LocalName = css.css_values.ident.Ident;
             pub const NamespacePrefix = css.css_values.ident.Ident;
             pub const NamespaceUrl = []const u8;
@@ -42,6 +44,12 @@ pub const impl = struct {
             pub const VendorPrefix = css.VendorPrefix;
             pub const ExtraMatchingData = void;
         };
+
+        pub const LocalIdentifier = struct {
+            pub fn fromIdent(ident: css.css_values.ident.Ident) SelectorImpl.LocalIdentifier {
+                return .{ .v = ident };
+            }
+        };
     };
 };
 
@@ -441,12 +449,13 @@ pub fn isCompatible(selectors: []const parser.Selector, targets: css.targets.Tar
 pub fn isUnused(
     selectors: []const parser.Selector,
     unused_symbols: *const std.StringArrayHashMapUnmanaged(void),
+    symbols: *const css.SymbolList,
     parent_is_unused: bool,
 ) bool {
     if (unused_symbols.count() == 0) return false;
 
     for (selectors) |*selector| {
-        if (!isSelectorUnused(selector, unused_symbols, parent_is_unused)) return false;
+        if (!isSelectorUnused(selector, unused_symbols, symbols, parent_is_unused)) return false;
     }
 
     return true;
@@ -455,18 +464,20 @@ pub fn isUnused(
 fn isSelectorUnused(
     selector: *const parser.Selector,
     unused_symbols: *const std.StringArrayHashMapUnmanaged(void),
+    symbols: *const css.SymbolList,
     parent_is_unused: bool,
 ) bool {
     for (selector.components.items) |*component| {
         switch (component.*) {
             .class, .id => |ident| {
-                if (unused_symbols.contains(ident.v)) return true;
+                const actual_ident = ident.asOriginalString(symbols);
+                if (unused_symbols.contains(actual_ident)) return true;
             },
             .is, .where => |is| {
-                if (isUnused(is, unused_symbols, parent_is_unused)) return true;
+                if (isUnused(is, unused_symbols, symbols, parent_is_unused)) return true;
             },
             .any => |any| {
-                if (isUnused(any.selectors, unused_symbols, parent_is_unused)) return true;
+                if (isUnused(any.selectors, unused_symbols, symbols, parent_is_unused)) return true;
             },
             .nesting => {
                 if (parent_is_unused) return true;
@@ -708,7 +719,7 @@ pub const serialize = struct {
                     const writer = id.writer();
                     css.serializer.serializeIdentifier(v.value, writer) catch return dest.addFmtError();
 
-                    const s = try css.to_css.string(dest.allocator, CSSString, &v.value, css.PrinterOptions.default(), dest.import_info);
+                    const s = try css.to_css.string(dest.allocator, CSSString, &v.value, css.PrinterOptions.default(), dest.import_info, dest.local_names, dest.symbols);
 
                     if (id.items.len > 0 and id.items.len < s.len) {
                         try dest.writeStr(id.items);
@@ -782,11 +793,11 @@ pub const serialize = struct {
             },
             .class => |class| {
                 try dest.writeChar('.');
-                return dest.writeIdent(class.v, true);
+                return dest.writeIdentOrRef(class, dest.css_module != null);
             },
             .id => |id| {
                 try dest.writeChar('#');
-                return dest.writeIdent(id.v, true);
+                return dest.writeIdentOrRef(id, dest.css_module != null);
             },
             .host => |selector| {
                 try dest.writeStr(":host");
@@ -1343,11 +1354,13 @@ pub const tocss_servo = struct {
             },
             .id => |s| {
                 try dest.writeChar('#');
-                try css.IdentFns.toCss(&s, W, dest);
+                const str = dest.lookupIdentOrRef(s);
+                try dest.writeStr(str);
             },
             .class => |s| {
                 try dest.writeChar('.');
-                try css.IdentFns.toCss(&s, W, dest);
+                const str = dest.lookupIdentOrRef(s);
+                try dest.writeStr(str);
             },
             .local_name => |local_name| {
                 try local_name.toCss(W, dest);
diff --git a/src/css/small_list.zig b/src/css/small_list.zig
index e433f503c2a3cf..a5b523fc740a7b 100644
--- a/src/css/small_list.zig
+++ b/src/css/small_list.zig
@@ -48,6 +48,17 @@ pub fn SmallList(comptime T: type, comptime N: comptime_int) type {
 
         const This = @This();
 
+        pub fn initInlined(values: []const T) This {
+            bun.assert(values.len <= N);
+            var this = This{
+                .capacity = values.len,
+                .data = .{ .inlined = undefined },
+            };
+
+            @memcpy(this.data.inlined[0..values.len], values);
+
+            return this;
+        }
         pub fn parse(input: *Parser) Result(@This()) {
             const parseFn = comptime voidWrap(T, generic.parseFor(T));
             var values: @This() = .{};
diff --git a/src/css/values/calc.zig b/src/css/values/calc.zig
index cc04956dbc78ff..7c3abd30cb999f 100644
--- a/src/css/values/calc.zig
+++ b/src/css/values/calc.zig
@@ -45,6 +45,45 @@ pub fn needsDeepclone(comptime V: type) bool {
     };
 }
 
+const Tag_ = enum(u8) {
+    /// A literal value.
+    value = 1,
+    /// A literal number.
+    number = 2,
+    /// A sum of two calc expressions.
+    sum = 4,
+    /// A product of a number and another calc expression.
+    product = 8,
+    /// A math function, such as `calc()`, `min()`, or `max()`.
+    function = 16,
+};
+
+const CalcUnit = enum {
+    abs,
+    acos,
+    asin,
+    atan,
+    atan2,
+    calc,
+    clamp,
+    cos,
+    exp,
+    hypot,
+    log,
+    max,
+    min,
+    mod,
+    pow,
+    rem,
+    round,
+    sign,
+    sin,
+    sqrt,
+    tan,
+
+    pub const Map = bun.ComptimeEnumMap(CalcUnit);
+};
+
 /// A mathematical expression used within the `calc()` function.
 ///
 /// This type supports generic value types. Values such as `Length`, `Percentage`,
@@ -72,18 +111,7 @@ pub fn Calc(comptime V: type) type {
         /// A math function, such as `calc()`, `min()`, or `max()`.
         function: *MathFunction(V),
 
-        const Tag = enum(u8) {
-            /// A literal value.
-            value = 1,
-            /// A literal number.
-            number = 2,
-            /// A sum of two calc expressions.
-            sum = 4,
-            /// A product of a number and another calc expression.
-            product = 8,
-            /// A math function, such as `calc()`, `min()`, or `max()`.
-            function = 16,
-        };
+        const Tag = Tag_;
 
         const This = @This();
 
@@ -267,32 +295,6 @@ pub fn Calc(comptime V: type) type {
             return parseWith(input, {}, Fn.parseWithFn);
         }
 
-        const CalcUnit = enum {
-            abs,
-            acos,
-            asin,
-            atan,
-            atan2,
-            calc,
-            clamp,
-            cos,
-            exp,
-            hypot,
-            log,
-            max,
-            min,
-            mod,
-            pow,
-            rem,
-            round,
-            sign,
-            sin,
-            sqrt,
-            tan,
-
-            pub const Map = bun.ComptimeEnumMap(CalcUnit);
-        };
-
         pub fn parseWith(
             input: *css.Parser,
             ctx: anytype,
diff --git a/src/css/values/color_js.zig b/src/css/values/color_js.zig
index ca07f17bc27cbf..234e6e08d5bb49 100644
--- a/src/css/values/color_js.zig
+++ b/src/css/values/color_js.zig
@@ -235,7 +235,7 @@ pub fn jsFunctionColor(globalThis: *JSC.JSGlobalObject, callFrame: *JSC.CallFram
         input = try args[0].toSlice(globalThis, bun.default_allocator);
 
         var parser_input = css.ParserInput.new(allocator, input.slice());
-        var parser = css.Parser.new(&parser_input, null);
+        var parser = css.Parser.new(&parser_input, null, .{}, null);
         break :brk css.CssColor.parse(&parser);
     };
 
@@ -423,12 +423,15 @@ pub fn jsFunctionColor(globalThis: *JSC.JSGlobalObject, callFrame: *JSC.CallFram
             defer dest.deinit(allocator);
             const writer = dest.writer(allocator);
 
+            const symbols = bun.JSAst.Symbol.Map{};
             var printer = css.Printer(@TypeOf(writer)).new(
                 allocator,
                 std.ArrayList(u8).init(allocator),
                 writer,
                 css.PrinterOptions.default(),
                 null,
+                null,
+                &symbols,
             );
 
             result.toCss(@TypeOf(writer), &printer) catch |err| {
diff --git a/src/css/values/ident.zig b/src/css/values/ident.zig
index 9dab1de5be444e..0bc12530d6d511 100644
--- a/src/css/values/ident.zig
+++ b/src/css/values/ident.zig
@@ -3,6 +3,7 @@ const Allocator = std.mem.Allocator;
 const bun = @import("root").bun;
 const logger = bun.logger;
 const Log = logger.Log;
+const Symbol = bun.JSAst.Symbol;
 
 pub const css = @import("../css_parser.zig");
 pub const Result = css.Result;
@@ -49,7 +50,7 @@ pub const DashedIdentReference = struct {
     pub fn toCss(this: *const @This(), comptime W: type, dest: *Printer(W)) PrintErr!void {
         if (dest.css_module) |*css_module| {
             if (css_module.config.dashed_idents) {
-                if (css_module.referenceDashed(dest.allocator, this.ident.v, &this.from, dest.loc.source_index)) |name| {
+                if (try css_module.referenceDashed(W, dest, this.ident.v, &this.from, dest.loc.source_index)) |name| {
                     try dest.writeStr("--");
                     css.serializer.serializeName(name, dest) catch return dest.addFmtError();
                     return;
@@ -141,6 +142,135 @@ pub const Ident = struct {
     }
 };
 
+/// Encodes an `Ident` or the bundler's `Ref` into 16 bytes.
+///
+/// It uses the top bit of the pointer to denote whether it's an ident or a ref
+///
+/// If it's an `Ident`, then `__ref_bit == false` and `__len` is the length of the slice.
+///
+/// If it's `Ref`, then `__ref_bit == true` and `__len` is the bit pattern of the `Ref`.
+///
+/// In debug mode, if it is a `Ref` we will also set the `__ptrbits` to point to the original
+/// []const u8 so we can debug the string. This should be fine since we use arena
+pub const IdentOrRef = packed struct(u128) {
+    __ptrbits: u63 = 0,
+    __ref_bit: bool = false,
+    __len: u64 = 0,
+
+    const Tag = enum {
+        ident,
+        ref,
+    };
+
+    const DebugIdent = if (bun.Environment.isDebug) struct { []const u8, Allocator } else void;
+
+    pub fn debugIdent(this: @This()) []const u8 {
+        if (comptime !bun.Environment.isDebug) {
+            @compileError("debugIdent is only available in debug mode");
+        }
+
+        if (this.__ref_bit) {
+            const ptr: *const []const u8 = @ptrFromInt(@as(usize, @intCast(this.__ptrbits)));
+            return ptr.*;
+        }
+
+        return this.asIdent().?.v;
+    }
+
+    pub fn format(this: @This(), comptime _: []const u8, _: std.fmt.FormatOptions, writer: anytype) !void {
+        if (this.__ref_bit) {
+            const ref = this.asRef().?;
+            return writer.print("Ref({})", .{ref});
+        }
+        return writer.print("Ident({s})", .{this.asIdent().?.v});
+    }
+
+    pub fn fromIdent(ident: Ident) @This() {
+        return @This(){
+            .__ptrbits = @intCast(@intFromPtr(ident.v.ptr)),
+            .__len = ident.v.len,
+            .__ref_bit = false,
+        };
+    }
+
+    pub fn fromRef(ref: bun.bundle_v2.Ref, debug_ident: DebugIdent) @This() {
+        var this = @This(){
+            .__len = @bitCast(ref),
+            .__ref_bit = true,
+        };
+
+        if (comptime bun.Environment.isDebug) {
+            const heap_ptr: *[]const u8 = debug_ident[1].create([]const u8) catch bun.outOfMemory();
+            heap_ptr.* = debug_ident[0];
+            this.__ptrbits = @intCast(@intFromPtr(heap_ptr));
+        }
+
+        return this;
+    }
+
+    pub inline fn isIdent(this: @This()) bool {
+        return !this.__ref_bit;
+    }
+
+    pub inline fn isRef(this: @This()) bool {
+        return this.__ref_bit;
+    }
+
+    pub inline fn asIdent(this: @This()) ?Ident {
+        if (!this.__ref_bit) {
+            const ptr: [*]const u8 = @ptrFromInt(@as(usize, @intCast(this.__ptrbits)));
+            return Ident{ .v = ptr[0..this.__len] };
+        }
+        return null;
+    }
+
+    pub inline fn asRef(this: @This()) ?bun.bundle_v2.Ref {
+        if (this.__ref_bit) {
+            const out: bun.bundle_v2.Ref = @bitCast(this.__len);
+            return out;
+        }
+        return null;
+    }
+
+    pub fn asStr(this: @This(), map: *const bun.JSAst.Symbol.Map, local_names: ?*const css.LocalsResultsMap) ?[]const u8 {
+        if (this.isIdent()) return this.asIdent().?.v;
+        const ref = this.asRef().?;
+        const final_ref = map.follow(ref);
+        return local_names.?.get(final_ref);
+    }
+
+    pub fn asOriginalString(this: @This(), symbols: *const Symbol.List) []const u8 {
+        if (this.isIdent()) return this.asIdent().?.v;
+        const ref = this.asRef().?;
+        return symbols.at(ref.inner_index).original_name;
+    }
+
+    pub fn hash(this: *const @This(), hasher: *std.hash.Wyhash) void {
+        if (this.isIdent()) {
+            hasher.update(this.asIdent().?.v);
+        } else {
+            const slice: [*]const u64 = @ptrCast(this);
+            const slice_u8: [*]align(8) const u8 = @ptrCast(@alignCast(slice));
+            hasher.update(slice_u8[0..2]);
+        }
+    }
+
+    pub fn eql(this: *const @This(), other: *const @This()) bool {
+        if (this.isIdent() and other.isIdent()) {
+            return bun.strings.eql(this.asIdent().?.v, other.asIdent().?.v);
+        } else if (this.isRef() and other.isRef()) {
+            const a = this.asRef().?;
+            const b = other.asRef().?;
+            return a.eql(b);
+        }
+        return false;
+    }
+
+    pub fn deepClone(this: *const @This(), _: std.mem.Allocator) @This() {
+        return this.*;
+    }
+};
+
 pub const CustomIdentFns = CustomIdent;
 pub const CustomIdent = struct {
     v: []const u8,
diff --git a/src/css/values/image.zig b/src/css/values/image.zig
index 2ed2c1df71d1ee..5c3ae53121b0cb 100644
--- a/src/css/values/image.zig
+++ b/src/css/values/image.zig
@@ -307,9 +307,10 @@ pub const ImageSetOption = struct {
         const start_position = input.input.tokenizer.getPosition();
         const loc = input.currentSourceLocation();
         const image = if (input.tryParse(css.Parser.expectUrlOrString, .{}).asValue()) |url| brk: {
-            const record_idx = switch (input.addImportRecordForUrl(
+            const record_idx = switch (input.addImportRecord(
                 url,
                 start_position,
+                .url,
             )) {
                 .result => |idx| idx,
                 .err => |e| return .{ .err = e },
diff --git a/src/css/values/url.zig b/src/css/values/url.zig
index 1d6808c939891c..aab52cb10b05c9 100644
--- a/src/css/values/url.zig
+++ b/src/css/values/url.zig
@@ -40,7 +40,7 @@ pub const Url = struct {
             .result => |vv| vv,
             .err => |e| return .{ .err = e },
         };
-        const import_record_idx = switch (input.addImportRecordForUrl(url, start_pos)) {
+        const import_record_idx = switch (input.addImportRecord(url, start_pos, .url)) {
             .result => |idx| idx,
             .err => |e| return .{ .err = e },
         };
diff --git a/src/import_record.zig b/src/import_record.zig
index efe095840fedf2..9404faaadfe162 100644
--- a/src/import_record.zig
+++ b/src/import_record.zig
@@ -25,8 +25,10 @@ pub const ImportKind = enum(u8) {
     at_conditional = 7,
     /// A CSS "url(...)" token
     url = 8,
+    /// A CSS "composes" property
+    composes = 9,
 
-    internal = 9,
+    internal = 10,
 
     pub const Label = std.EnumArray(ImportKind, []const u8);
     pub const all_labels: Label = brk: {
@@ -42,6 +44,7 @@ pub const ImportKind = enum(u8) {
         labels.set(ImportKind.require_resolve, "require-resolve");
         labels.set(ImportKind.at, "import-rule");
         labels.set(ImportKind.url, "url-token");
+        labels.set(ImportKind.composes, "composes");
         labels.set(ImportKind.internal, "internal");
         break :brk labels;
     };
@@ -57,6 +60,7 @@ pub const ImportKind = enum(u8) {
         labels.set(ImportKind.at, "@import");
         labels.set(ImportKind.url, "url()");
         labels.set(ImportKind.internal, "<bun internal>");
+        labels.set(ImportKind.composes, "composes");
         break :brk labels;
     };
 
@@ -80,7 +84,7 @@ pub const ImportKind = enum(u8) {
     }
 
     pub fn isFromCSS(k: ImportKind) bool {
-        return k == .at_conditional or k == .at or k == .url;
+        return k == .at_conditional or k == .at or k == .url or k == .composes;
     }
 
     pub fn toAPI(k: ImportKind) Api.ImportKind {
diff --git a/src/install/install.zig b/src/install/install.zig
index ffd9084ec8059d..3a7f569c18c532 100644
--- a/src/install/install.zig
+++ b/src/install/install.zig
@@ -11017,6 +11017,7 @@ pub const PackageManager = struct {
             &current_package_json.source,
             .{
                 .indent = current_package_json_indent,
+                .mangled_props = null,
             },
         ) catch |err| {
             Output.prettyErrorln("package.json failed to write due to error {s}", .{@errorName(err)});
@@ -11093,6 +11094,7 @@ pub const PackageManager = struct {
                     &root_package_json.source,
                     .{
                         .indent = root_package_json.indentation,
+                        .mangled_props = null,
                     },
                 ) catch |err| {
                     Output.prettyErrorln("package.json failed to write due to error {s}", .{@errorName(err)});
@@ -11156,6 +11158,7 @@ pub const PackageManager = struct {
                 &source,
                 .{
                     .indent = current_package_json_indent,
+                    .mangled_props = null,
                 },
             ) catch |err| {
                 Output.prettyErrorln("package.json failed to write due to error {s}", .{@errorName(err)});
diff --git a/src/js_ast.zig b/src/js_ast.zig
index 8745137c61cd61..a15ec947843f14 100644
--- a/src/js_ast.zig
+++ b/src/js_ast.zig
@@ -1226,6 +1226,9 @@ pub const Symbol = struct {
         /// Assigning to a "const" symbol will throw a TypeError at runtime
         constant,
 
+        // CSS identifiers that are renamed to be unique to the file they are in
+        local_css,
+
         /// This annotates all other symbols that don't have special behavior.
         other,
 
@@ -1372,6 +1375,11 @@ pub const Symbol = struct {
             return Map{ .symbols_for_source = symbols_for_source };
         }
 
+        pub fn initWithOneList(list: List) Map {
+            const baby_list = BabyList(List).init((&list)[0..1]);
+            return initList(baby_list);
+        }
+
         pub fn initList(list: NestedList) Map {
             return Map{ .symbols_for_source = list };
         }
@@ -1439,6 +1447,17 @@ pub const OptionalChain = enum(u1) {
 };
 
 pub const E = struct {
+    /// This represents an internal property name that can be mangled. The symbol
+    /// referenced by this expression should be a "SymbolMangledProp" symbol.
+    pub const NameOfSymbol = struct {
+        ref: Ref = Ref.None,
+
+        /// If true, a preceding comment contains "@__KEY__"
+        ///
+        /// Currently not used
+        has_property_key_comment: bool = false,
+    };
+
     pub const Array = struct {
         items: ExprNodeList = ExprNodeList{},
         comma_after_spread: ?logger.Loc = null,
@@ -4222,6 +4241,14 @@ pub const Expr = struct {
         Data.Store.assert();
 
         switch (Type) {
+            E.NameOfSymbol => {
+                return Expr{
+                    .loc = loc,
+                    .data = Data{
+                        .e_name_of_symbol = Data.Store.append(E.NameOfSymbol, st),
+                    },
+                };
+            },
             E.Array => {
                 return Expr{
                     .loc = loc,
@@ -4596,6 +4623,7 @@ pub const Expr = struct {
         e_require_main,
         e_special,
         e_inlined_enum,
+        e_name_of_symbol,
 
         // object, regex and array may have had side effects
         pub fn isPrimitiveLiteral(tag: Tag) bool {
@@ -5283,6 +5311,8 @@ pub const Expr = struct {
 
         e_inlined_enum: *E.InlinedEnum,
 
+        e_name_of_symbol: *E.NameOfSymbol,
+
         comptime {
             bun.assert_eql(@sizeOf(Data), 24); // Do not increase the size of Expr
         }
@@ -5621,6 +5651,10 @@ pub const Expr = struct {
         pub fn writeToHasher(this: Expr.Data, hasher: anytype, symbol_table: anytype) void {
             writeAnyToHasher(hasher, std.meta.activeTag(this));
             switch (this) {
+                .e_name_of_symbol => |e| {
+                    const symbol = e.ref.getSymbol(symbol_table);
+                    hasher.update(symbol.original_name);
+                },
                 .e_array => |e| {
                     writeAnyToHasher(hasher, .{
                         e.is_single_line,
@@ -6221,6 +6255,7 @@ pub const Expr = struct {
 
         pub const Store = struct {
             const StoreType = NewStore(&.{
+                E.NameOfSymbol,
                 E.Array,
                 E.Arrow,
                 E.Await,
diff --git a/src/js_parser.zig b/src/js_parser.zig
index 0b22819efc7bb3..e92e7182b72215 100644
--- a/src/js_parser.zig
+++ b/src/js_parser.zig
@@ -3050,9 +3050,11 @@ pub const Parser = struct {
         scan_pass.approximate_newline_count = p.lexer.approximate_newline_count;
     }
 
-    pub fn toLazyExportAST(this: *Parser, expr: Expr, comptime runtime_api_call: []const u8) !js_ast.Result {
+    pub fn toLazyExportAST(this: *Parser, expr: Expr, comptime runtime_api_call: []const u8, symbols: Symbol.List) !js_ast.Result {
         var p: JavaScriptParser = undefined;
         try JavaScriptParser.init(this.allocator, this.log, this.source, this.define, this.lexer, this.options, &p);
+        defer p.lexer.deinit();
+
         p.lexer.track_comments = this.options.features.minify_identifiers;
         // Instead of doing "should_fold_typescript_constant_expressions or features.minify_syntax"
         // Let's enable this flag file-wide
@@ -3062,9 +3064,11 @@ pub const Parser = struct {
             p.should_fold_typescript_constant_expressions = true;
         }
 
-        defer p.lexer.deinit();
-        const result: js_ast.Result = undefined;
-        _ = result;
+        // If we added to `p.symbols` it's going to fuck up all the indices
+        // in the `symbols` array.
+        bun.assert(p.symbols.items.len == 0);
+        p.symbols = symbols.listManaged(p.allocator);
+
         try p.prepareForVisitPass();
 
         var final_expr = expr;
@@ -24047,6 +24051,19 @@ pub fn newLazyExportAST(
     expr: Expr,
     source: *const logger.Source,
     comptime runtime_api_call: []const u8,
+) anyerror!?js_ast.Ast {
+    return newLazyExportASTImpl(allocator, define, opts, log_to_copy_into, expr, source, runtime_api_call, .{});
+}
+
+pub fn newLazyExportASTImpl(
+    allocator: std.mem.Allocator,
+    define: *Define,
+    opts: Parser.Options,
+    log_to_copy_into: *logger.Log,
+    expr: Expr,
+    source: *const logger.Source,
+    comptime runtime_api_call: []const u8,
+    symbols: Symbol.List,
 ) anyerror!?js_ast.Ast {
     var temp_log = logger.Log.init(allocator);
     const log = &temp_log;
@@ -24061,6 +24078,7 @@ pub fn newLazyExportAST(
     var result = parser.toLazyExportAST(
         expr,
         runtime_api_call,
+        symbols,
     ) catch |err| {
         if (temp_log.errors == 0) {
             log_to_copy_into.addRangeError(source, parser.lexer.range(), @errorName(err)) catch unreachable;
diff --git a/src/js_printer.zig b/src/js_printer.zig
index 142e76bb7bd376..dd7afce3109c55 100644
--- a/src/js_printer.zig
+++ b/src/js_printer.zig
@@ -486,6 +486,8 @@ pub const Options = struct {
     // us do binary search on to figure out what line a given AST node came from
     line_offset_tables: ?SourceMap.LineOffsetTable.List = null,
 
+    mangled_props: ?*const bun.bundle_v2.MangledProps,
+
     // Default indentation is 2 spaces
     pub const Indentation = struct {
         scalar: usize = 2,
@@ -696,6 +698,8 @@ fn NewPrinter(
 
         binary_expression_stack: std.ArrayList(BinaryExpressionVisitor) = undefined,
 
+        was_lazy_export: bool = false,
+
         const Printer = @This();
 
         /// When Printer is used as a io.Writer, this represents it's error type, aka nothing.
@@ -956,6 +960,15 @@ fn NewPrinter(
             }
         }
 
+        pub fn mangledPropName(p: *Printer, _ref: Ref) string {
+            const ref = p.symbols().follow(_ref);
+            // TODO: we don't support that
+            if (p.options.mangled_props != null) {
+                if (p.options.mangled_props.?.get(ref)) |name| return name;
+            }
+            return p.renamer.nameForSymbol(ref);
+        }
+
         pub inline fn printSpace(p: *Printer) void {
             if (!p.options.minify_whitespace)
                 p.print(" ");
@@ -1349,6 +1362,13 @@ fn NewPrinter(
             if (comptime !generate_source_map) {
                 return;
             }
+            // TODO: esbuild does this to make the source map more accurate with E.NameOfSymbol
+            // if (printer.symbols().get(printer.symbols().follow(ref))) |original_symbol| {
+            //     if (!bun.strings.eql( original_symbol.original_name, name)) {
+            //         printer.source_map_builder.addSourceMapping(location, originalName);
+            //         return;
+            //     }
+            // }
             printer.addSourceMapping(location);
         }
 
@@ -2759,6 +2779,60 @@ fn NewPrinter(
                     p.printStringLiteralEString(e, true);
                 },
                 .e_template => |e| {
+                    if (e.tag == null and (p.options.minify_syntax or p.was_lazy_export)) {
+                        var replaced = std.ArrayList(E.TemplatePart).init(p.options.allocator);
+                        for (e.parts, 0..) |_part, i| {
+                            var part = _part;
+                            const inlined_value: ?js_ast.Expr = switch (part.value.data) {
+                                .e_name_of_symbol => |e2| Expr.init(
+                                    E.String,
+                                    E.String.init(p.mangledPropName(e2.ref)),
+                                    part.value.loc,
+                                ),
+                                .e_dot => brk: {
+                                    // TODO: handle inlining of dot properties
+                                    break :brk null;
+                                },
+                                else => null,
+                            };
+
+                            if (inlined_value) |value| {
+                                if (replaced.items.len == 0) {
+                                    replaced.appendSlice(e.parts[0..i]) catch bun.outOfMemory();
+                                }
+                                part.value = value;
+                                replaced.append(part) catch bun.outOfMemory();
+                            } else if (replaced.items.len > 0) {
+                                replaced.append(part) catch bun.outOfMemory();
+                            }
+                        }
+
+                        if (replaced.items.len > 0) {
+                            var copy = e.*;
+                            copy.parts = replaced.items;
+                            const e2 = copy.fold(p.options.allocator, expr.loc);
+                            switch (e2.data) {
+                                .e_string => {
+                                    p.print('"');
+                                    p.printStringCharactersUTF8(e2.data.e_string.data, '"');
+                                    p.print('"');
+                                    return;
+                                },
+                                .e_template => {
+                                    e.* = e2.data.e_template.*;
+                                },
+                                else => {},
+                            }
+                        }
+
+                        // Convert no-substitution template literals into strings if it's smaller
+                        if (e.parts.len == 0) {
+                            p.addSourceMapping(expr.loc);
+                            p.printStringCharactersEString(&e.head.cooked, '`');
+                            return;
+                        }
+                    }
+
                     if (e.tag) |tag| {
                         p.addSourceMapping(expr.loc);
                         // Optional chains are forbidden in template tags
@@ -3056,6 +3130,18 @@ fn NewPrinter(
                         p.print(" */");
                     }
                 },
+                .e_name_of_symbol => |e| {
+                    const name = p.mangledPropName(e.ref);
+                    p.addSourceMappingForName(expr.loc, name, e.ref);
+
+                    if (!p.options.minify_whitespace and e.has_property_key_comment) {
+                        p.print(" /* @__KEY__ */");
+                    }
+
+                    p.print('"');
+                    p.printStringCharactersUTF8(name, '"');
+                    p.print('"');
+                },
 
                 .e_jsx_element,
                 .e_private_identifier,
@@ -5739,6 +5825,7 @@ pub fn printAst(
             printer.source_map_builder.line_offset_tables.deinit(opts.allocator);
         }
     }
+    printer.was_lazy_export = tree.has_lazy_export;
     var bin_stack_heap = std.heap.stackFallback(1024, bun.default_allocator);
     printer.binary_expression_stack = std.ArrayList(PrinterType.BinaryExpressionVisitor).init(bin_stack_heap.get());
     defer printer.binary_expression_stack.clearAndFree();
@@ -5931,6 +6018,7 @@ pub fn printWithWriterAndPlatform(
         renamer,
         getSourceMapBuilder(if (generate_source_maps) .eager else .disable, is_bun_platform, opts, source, &ast),
     );
+    printer.was_lazy_export = ast.has_lazy_export;
     var bin_stack_heap = std.heap.stackFallback(1024, bun.default_allocator);
     printer.binary_expression_stack = std.ArrayList(PrinterType.BinaryExpressionVisitor).init(bin_stack_heap.get());
     defer printer.binary_expression_stack.clearAndFree();
diff --git a/src/json_parser.zig b/src/json_parser.zig
index 63cd0bfecd1b25..d1f55606084e7b 100644
--- a/src/json_parser.zig
+++ b/src/json_parser.zig
@@ -1038,7 +1038,9 @@ fn expectPrintedJSON(_contents: string, expected: string) !void {
 
     const buffer_writer = try js_printer.BufferWriter.init(default_allocator);
     var writer = js_printer.BufferPrinter.init(buffer_writer);
-    const written = try js_printer.printJSON(@TypeOf(&writer), &writer, expr, &source, .{});
+    const written = try js_printer.printJSON(@TypeOf(&writer), &writer, expr, &source, .{
+        .mangled_props = null,
+    });
     var js = writer.ctx.buffer.list.items.ptr[0 .. written + 1];
 
     if (js.len > 1) {
diff --git a/src/logger.zig b/src/logger.zig
index 887911abfcc8b6..0f66ed8e1820d6 100644
--- a/src/logger.zig
+++ b/src/logger.zig
@@ -431,7 +431,7 @@ pub const Msg = struct {
         if (err.toError()) |value| {
             value.toZigException(globalObject, zig_exception_holder.zigException());
         } else {
-            zig_exception_holder.zig_exception.message = try err.toBunString(globalObject);
+            zig_exception_holder.zigException().message = try err.toBunString(globalObject);
         }
 
         return Msg{
@@ -883,7 +883,7 @@ pub const Log = struct {
         });
     }
 
-    inline fn allocPrint(allocator: std.mem.Allocator, comptime fmt: string, args: anytype) OOM!string {
+    pub inline fn allocPrint(allocator: std.mem.Allocator, comptime fmt: string, args: anytype) OOM!string {
         return switch (Output.enable_ansi_colors) {
             inline else => |enable_ansi_colors| std.fmt.allocPrint(allocator, Output.prettyFmt(fmt, enable_ansi_colors), args),
         };
@@ -1071,6 +1071,11 @@ pub const Log = struct {
     }
 
     pub fn addWarningFmtLineCol(log: *Log, filepath: []const u8, line: u32, col: u32, allocator: std.mem.Allocator, comptime text: string, args: anytype) OOM!void {
+        @branchHint(.cold);
+        return log.addWarningFmtLineColWithNotes(filepath, line, col, allocator, text, args, &[_]Data{});
+    }
+
+    pub fn addWarningFmtLineColWithNotes(log: *Log, filepath: []const u8, line: u32, col: u32, allocator: std.mem.Allocator, comptime text: string, args: anytype, notes: []Data) OOM!void {
         @branchHint(.cold);
         if (!Kind.shouldPrint(.warn, log.level)) return;
         log.warnings += 1;
@@ -1079,17 +1084,55 @@ pub const Log = struct {
 
         try log.addMsg(.{
             .kind = .warn,
-            .data = try Data.cloneLineText(Data{
-                .text = try allocPrint(allocator, text, args),
-                .location = Location{
-                    .file = filepath,
-                    .line = @intCast(line),
-                    .column = @intCast(col),
+            .data = try Data.cloneLineText(
+                Data{
+                    .text = try allocPrint(allocator, text, args),
+                    .location = Location{
+                        .file = filepath,
+                        .line = @intCast(line),
+                        .column = @intCast(col),
+                    },
                 },
-            }, log.clone_line_text, allocator),
+                log.clone_line_text,
+                allocator,
+            ),
+            .notes = notes,
         });
     }
 
+    // pub fn addWarningFmtLineColWithNote(log: *Log, filepath: []const u8, line: u32, col: u32, allocator: std.mem.Allocator, comptime text: string, args: anytype, comptime note_fmt: string, note_args: anytype, note_range: Range) OOM!void {
+    //     @branchHint(.cold);
+    //     if (!Kind.shouldPrint(.warn, log.level)) return;
+    //     log.warnings += 1;
+
+    //     var notes = try allocator.alloc(Data, 1);
+    //     notes[0] = Data{
+    //         .text = try allocPrint(allocator, note_fmt, note_args),
+    //         .lcoation = Location{
+    //             .file = filepath,
+    //             .line = @intCast(line),
+    //             .column = @intCast(col),
+    //         },
+    //     };
+
+    //     try log.addMsg(.{
+    //         .kind = .warn,
+    //         .data = try Data.cloneLineText(
+    //             Data{
+    //                 .text = try allocPrint(allocator, text, args),
+    //                 .location = Location{
+    //                     .file = filepath,
+    //                     .line = @intCast(line),
+    //                     .column = @intCast(col),
+    //                 },
+    //             },
+    //             log.clone_line_text,
+    //             allocator,
+    //         ),
+    //         .notes = notes,
+    //     });
+    // }
+
     pub fn addRangeWarningFmt(log: *Log, source: ?*const Source, r: Range, allocator: std.mem.Allocator, comptime text: string, args: anytype) OOM!void {
         @branchHint(.cold);
         if (!Kind.shouldPrint(.warn, log.level)) return;
diff --git a/src/options.zig b/src/options.zig
index a7d814f150b5ab..b32da59ac84f0f 100644
--- a/src/options.zig
+++ b/src/options.zig
@@ -647,6 +647,10 @@ pub const Loader = enum(u8) {
     sqlite_embedded,
     html,
 
+    pub fn isCSS(this: Loader) bool {
+        return this == .css;
+    }
+
     pub fn disableHTML(this: Loader) Loader {
         return switch (this) {
             .html => .file,
diff --git a/src/transpiler.zig b/src/transpiler.zig
index 118c6a7995f6e7..a371e14bc7576d 100644
--- a/src/transpiler.zig
+++ b/src/transpiler.zig
@@ -745,21 +745,43 @@ pub const Transpiler = struct {
                     transpiler.log.addErrorFmt(null, logger.Loc.Empty, transpiler.allocator, "{s} reading \"{s}\"", .{ @errorName(err), file_path.pretty }) catch {};
                     return null;
                 };
-                var sheet = switch (bun.css.StyleSheet(bun.css.DefaultAtRule).parse(alloc, entry.contents, bun.css.ParserOptions.default(alloc, transpiler.log), null)) {
+                var opts = bun.css.ParserOptions.default(alloc, transpiler.log);
+                const css_module_suffix = ".module.css";
+                const enable_css_modules = file_path.text.len > css_module_suffix.len and
+                    strings.eqlComptime(file_path.text[file_path.text.len - css_module_suffix.len ..], css_module_suffix);
+                if (enable_css_modules) {
+                    opts.filename = bun.path.basename(file_path.text);
+                    opts.css_modules = bun.css.CssModuleConfig{};
+                }
+                var sheet, var extra = switch (bun.css.StyleSheet(bun.css.DefaultAtRule).parse(
+                    alloc,
+                    entry.contents,
+                    opts,
+                    null,
+                    // TODO: DO WE EVEN HAVE SOURCE INDEX IN THIS TRANSPILER.ZIG file??
+                    bun.bundle_v2.Index.invalid,
+                )) {
                     .result => |v| v,
                     .err => |e| {
                         transpiler.log.addErrorFmt(null, logger.Loc.Empty, transpiler.allocator, "{} parsing", .{e}) catch unreachable;
                         return null;
                     },
                 };
-                if (sheet.minify(alloc, bun.css.MinifyOptions.default()).asErr()) |e| {
+                if (sheet.minify(alloc, bun.css.MinifyOptions.default(), &extra).asErr()) |e| {
                     transpiler.log.addErrorFmt(null, logger.Loc.Empty, transpiler.allocator, "{} while minifying", .{e.kind}) catch bun.outOfMemory();
                     return null;
                 }
-                const result = switch (sheet.toCss(alloc, bun.css.PrinterOptions{
-                    .targets = bun.css.Targets.forBundlerTarget(transpiler.options.target),
-                    .minify = transpiler.options.minify_whitespace,
-                }, null)) {
+                const symbols = bun.JSAst.Symbol.Map{};
+                const result = switch (sheet.toCss(
+                    alloc,
+                    bun.css.PrinterOptions{
+                        .targets = bun.css.Targets.forBundlerTarget(transpiler.options.target),
+                        .minify = transpiler.options.minify_whitespace,
+                    },
+                    null,
+                    null,
+                    &symbols,
+                )) {
                     .result => |v| v,
                     .err => |e| {
                         transpiler.log.addErrorFmt(null, logger.Loc.Empty, transpiler.allocator, "{} while printing", .{e}) catch bun.outOfMemory();
@@ -849,6 +871,7 @@ pub const Transpiler = struct {
                     .import_meta_ref = ast.import_meta_ref,
                     .runtime_transpiler_cache = runtime_transpiler_cache,
                     .print_dce_annotations = transpiler.options.emit_dce_annotations,
+                    .mangled_props = null,
                 },
                 enable_source_map,
             ),
@@ -883,6 +906,7 @@ pub const Transpiler = struct {
                         .runtime_transpiler_cache = runtime_transpiler_cache,
                         .target = transpiler.options.target,
                         .print_dce_annotations = transpiler.options.emit_dce_annotations,
+                        .mangled_props = null,
                     },
                     enable_source_map,
                 ),
diff --git a/test/bundler/esbuild/css.test.ts b/test/bundler/esbuild/css.test.ts
index a48cb597390fcf..942782b9a4fc2a 100644
--- a/test/bundler/esbuild/css.test.ts
+++ b/test/bundler/esbuild/css.test.ts
@@ -12,19 +12,19 @@ describe("bundler", () => {
   itBundled("css/CSSEntryPoint", {
     files: {
       "/entry.css": /* css */ `
-        body {
-          background: white;
-          color: black }
-      `,
+          body {
+            background: white;
+            color: black }
+        `,
     },
     outfile: "/out.js",
     onAfterBundle(api) {
       api.expectFile("/out.js").toEqualIgnoringWhitespace(`
-/* entry.css */
-body {
-        color: #000;
-        background: #fff;
-}`);
+  /* entry.css */
+  body {
+          color: #000;
+          background: #fff;
+  }`);
     },
   });
 
@@ -35,7 +35,7 @@ body {
     outfile: "/out.js",
     onAfterBundle(api) {
       api.expectFile("/out.js").toEqualIgnoringWhitespace(`
-/* entry.css */`);
+  /* entry.css */`);
     },
   });
 
@@ -43,22 +43,22 @@ body {
     target: "bun",
     files: {
       "/entry.css": /* css */ `
-body {
-	h1 {
-		color: white;
-	}
-}`,
+  body {
+  	h1 {
+  		color: white;
+  	}
+  }`,
     },
     outfile: "/out.js",
     onAfterBundle(api) {
       api.expectFile("/out.js").toEqualIgnoringWhitespace(`
-/* entry.css */
-body {
-	&h1 {
-		color: #fff;
-	}
-}
-`);
+  /* entry.css */
+  body {
+  	&h1 {
+  		color: #fff;
+  	}
+  }
+  `);
     },
   });
 
@@ -75,21 +75,21 @@ body {
     // GENERATED
     files: {
       "/entry.css": /* css */ `
-        @import "./internal.css";
-      `,
+          @import "./internal.css";
+        `,
       "/internal.css": /* css */ `
-        .before { color: red }
-      `,
+          .before { color: red }
+        `,
     },
     outfile: "/out.css",
     onAfterBundle(api) {
       api.expectFile("/out.css").toEqualIgnoringWhitespace(`
-/* internal.css */
-.before {
-  color: red;
-}
-/* entry.css */
-`);
+  /* internal.css */
+  .before {
+    color: red;
+  }
+  /* entry.css */
+  `);
     },
   });
 
@@ -97,84 +97,691 @@ body {
     // GENERATED
     files: {
       "/a.css": /* css */ `
-        @import "./b.css";
-        @import "./c.css";
-        .last { color: red }
-      `,
+          @import "./b.css";
+          @import "./c.css";
+          .last { color: red }
+        `,
       "/b.css": /* css */ `
-        @import "./d.css";
-        .first { color: red }
-      `,
+          @import "./d.css";
+          .first { color: red }
+        `,
       "/c.css": /* css */ `
-        @import "./d.css";
-        .third { color: red }
-      `,
+          @import "./d.css";
+          .third { color: red }
+        `,
       "/d.css": /* css */ `
-        .second { color: red }
-      `,
+          .second { color: red }
+        `,
     },
     outfile: "/out.css",
     onAfterBundle(api) {
       api.expectFile("/out.css").toEqualIgnoringWhitespace(`
-/* b.css */
-.first {
-  color: red;
-}
-/* d.css */
-.second {
-  color: red;
-}
-/* c.css */
-.third {
-  color: red;
-}
-/* a.css */
-.last {
-  color: red;
-}
-`);
+  /* b.css */
+  .first {
+    color: red;
+  }
+  /* d.css */
+  .second {
+    color: red;
+  }
+  /* c.css */
+  .third {
+    color: red;
+  }
+  /* a.css */
+  .last {
+    color: red;
+  }
+  `);
     },
   });
 
   itBundled("css/CSSAtImportCycle", {
     files: {
       "/a.css": /* css */ `
-        @import "./a.css";
-        .hehe { color: red }
-      `,
+          @import "./a.css";
+          .hehe { color: red }
+        `,
     },
     outfile: "/out.css",
     onAfterBundle(api) {
       api.expectFile("/out.css").toEqualIgnoringWhitespace(`
-/* a.css */
-.hehe {
-  color: red;
-}
-`);
+  /* a.css */
+  .hehe {
+    color: red;
+  }
+  `);
     },
   });
 
   itBundled("css/CSSUrlImport", {
     files: {
       "/a.css": /* css */ `
-        .hello {
-          background-image: url(./hi.svg)
+          .hello {
+            background-image: url(./hi.svg)
+          }
+        `,
+      "/hi.svg": /* svg */ `
+  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="50" cy="50" r="40" fill="blue" />
+  </svg>
+        `,
+    },
+    outdir: "/out",
+    onAfterBundle(api) {
+      api.expectFile("/out/a.css").toEqualIgnoringWhitespace(`
+  /* a.css */
+  .hello {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+");
+  }
+  `);
+    },
+  });
+
+  // TODO: re-enable these tests when we do minify local css identifiers
+  // itBundled("css/TestImportLocalCSSFromJSMinifyIdentifiersAvoidGlobalNames", {
+  //   files: {
+  //     "/entry.js": /* js */ `
+  //       import "./global.css";
+  //       import "./local.module.css";
+  //     `,
+  //     "/global.css": /* css */ `
+  //     :is(.a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .u, .v, .w, .x, .y, .z),
+  //     :is(.A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .U, .V, .W, .X, .Y, .Z),
+  //     ._ { color: red }
+  //   `,
+  //     "/local.module.css": /* css */ `
+  //     .rename-this { color: blue }
+  //   `,
+  //   },
+  //   entryPoints: ["/entry.js"],
+  //   outdir: "/out",
+  //   minifyIdentifiers: true,
+  // });
+
+  // // See: https://github.com/evanw/esbuild/issues/3295
+  // itBundled("css/ImportLocalCSSFromJSMinifyIdentifiersMultipleEntryPoints", {
+  //   files: {
+  //     "/a.js": /* js */ `
+  //       import { foo, bar } from "./a.module.css";
+  //       console.log(foo, bar);
+  //     `,
+  //     "/a.module.css": /* css */ `
+  //       .foo { color: #001; }
+  //       .bar { color: #002; }
+  //     `,
+  //     "/b.js": /* js */ `
+  //       import { foo, bar } from "./b.module.css";
+  //       console.log(foo, bar);
+  //     `,
+  //     "/b.module.css": /* css */ `
+  //       .foo { color: #003; }
+  //       .bar { color: #004; }
+  //     `,
+  //   },
+  //   entryPoints: ["/a.js", "/b.js"],
+  //   outdir: "/out",
+  //   minifyIdentifiers: true,
+  // });
+
+  // TODO: some classes are commented out bc we don't support :global or :local yet
+  itBundled("css/ImportCSSFromJSComposes", {
+    files: {
+      "/entry.js": /* js */ `
+          import styles from "./styles.module.css"
+          console.log(styles)
+        `,
+      "/global.css": /* css */ `
+          .GLOBAL1 {
+            color: black;
+          }
+        `,
+      "/styles.module.css": /* css */ `
+          @import "global.css";
+          /* .local0 {
+            composes: local1;
+            :global {
+              composes: GLOBAL1 GLOBAL2;
+            }
+          } */
+          .local0 {
+            composes: GLOBAL2 GLOBAL3 from global;
+            composes: local1 local2;
+            background: green;
+          }
+          /* .local0 :global {
+            composes: GLOBAL4;
+          } */
+          .local3 {
+            border: 1px solid black;
+            composes: local4;
+          }
+          .local4 {
+            opacity: 0.5;
+          }
+          .local1 {
+            color: red;
+            composes: local3;
+          }
+          .fromOtherFile {
+            composes: local0 from "other1.module.css";
+            composes: local0 from "other2.module.css";
+          }
+        `,
+      "/other1.module.css": /* css */ `
+          .local0 {
+            composes: base1 base2 from "base.module.css";
+            color: blue;
+          }
+        `,
+      "/other2.module.css": /* css */ `
+          .local0 {
+            composes: base1 base3 from "base.module.css";
+            background: purple;
+          }
+        `,
+      "/base.module.css": /* css */ `
+          .base1 {
+            cursor: pointer;
+          }
+          .base2 {
+            display: inline;
+          }
+          .base3 {
+            float: left;
+          }
+        `,
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleErrors: {
+      "/styles.module.css": [
+        'The name "local2" never appears in "styles.module.css" as a CSS modules locally scoped class name. Note that "composes" only works with single class selectors.',
+      ],
+    },
+    onAfterBundle(api) {
+      api.expectFile("/out/entry.js").toMatchInlineSnapshot(`
+          "// styles.module.css
+          var styles_module_default = {
+            local0: "GLOBAL2 GLOBAL3 local4_-MSaAA local3_-MSaAA local1_-MSaAA local0_-MSaAA",
+            local3: "local4_-MSaAA local3_-MSaAA",
+            local4: "local4_-MSaAA",
+            local1: "local4_-MSaAA local3_-MSaAA local1_-MSaAA",
+            fromOtherFile: "base1_1Cz41w base2_1Cz41w local0_qwJuwA base3_1Cz41w local0_AgBO5Q fromOtherFile_-MSaAA"
+          };
+
+          // entry.js
+          console.log(styles_module_default);
+          "
+        `);
+      api.expectFile("/out/entry.css").toMatchInlineSnapshot(`
+          "/* global.css */
+          .GLOBAL1 {
+            color: #000;
+          }
+
+          /* other1.module.css */
+          .local0_qwJuwA {
+            color: #00f;
+          }
+
+          /* base.module.css */
+          .base1_1Cz41w {
+            cursor: pointer;
+          }
+
+          .base2_1Cz41w {
+            display: inline;
+          }
+
+          .base3_1Cz41w {
+            float: left;
+          }
+
+          /* other2.module.css */
+          .local0_AgBO5Q {
+            background: purple;
+          }
+
+          /* styles.module.css */
+          .local0_-MSaAA {
+            background: green;
+          }
+
+          .local3_-MSaAA {
+            border: 1px solid #000;
+          }
+
+          .local4_-MSaAA {
+            opacity: .5;
+          }
+
+          .local1_-MSaAA {
+            color: red;
+          }
+
+          .fromOtherFile_-MSaAA {
+          }
+          "
+        `);
+    },
+  });
+
+  itBundled("css/ImportCSSFromJSComposesFromMissingImport", {
+    files: {
+      "/entry.js": `
+          import styles from "./styles.module.css"
+          console.log(styles)
+        `,
+      "/styles.module.css": `
+          .foo {
+            composes: x from "file.module.css";
+            composes: y from "file.module.css";
+            composes: z from "file.module.css";
+            composes: x from "file.css";
+          }
+        `,
+      "/file.module.css": `
+          .x {
+            color: red;
+          }
+          :global(.y) {
+            color: blue;
+          }
+        `,
+      "/file.css": `
+          .x {
+            color: red;
+          }
+        `,
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleErrors: {
+      "/styles.module.css": [
+        // TODO: renable when we support :local and :global
+        // 'Cannot use global name "y" with "composes"',
+        // 'Cannot use global name "x" with "composes"',
+      ],
+      "/file.module.css": ['The name "z" never appears in "file.module.css"'],
+      "/file.css": ['The name "x" never appears in "file.css"'],
+    },
+    bundleWarnings: {
+      "/styles.module.css": [
+        // TODO: renable when we support :local and :global
+        // 'The global name "y" is defined in file.module.css. Use the ":local" selector to change "y" into a local name.',
+        // 'The global name "x" is defined in file.css. Use the "local-css" loader for "file.css" to enable local names.',
+      ],
+    },
+  });
+
+  itBundled("css/ImportCSSFromJSComposesFromNotCSS", {
+    files: {
+      "/entry.js": `
+          import styles from "./styles.module.css"
+          console.log(styles)
+        `,
+      "/styles.module.css": `
+          .foo {
+            composes: bar from "file.txt";
+          }
+        `,
+      "/file.txt": `
+          .bar {
+            color: red;
+          }
+        `,
+    },
+    loader: {
+      ".txt": "text",
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleErrors: {
+      "/styles.module.css": ['Cannot use the "composes" property with the "file.txt" file (it is not a CSS file)'],
+    },
+  });
+
+  itBundled("css/ImportCSSFromJSComposesCircular", {
+    files: {
+      "/entry.js": `
+        import styles from "./styles.module.css"
+        console.log(styles)
+      `,
+      "/styles.module.css": `
+        .foo {
+          composes: bar;
+        }
+        .bar {
+          composes: foo;
+        }
+        .baz {
+          composes: baz;
         }
       `,
-      "/hi.svg": /* svg */ `
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="40" fill="blue" />
-</svg>
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+
+    onAfterBundle(api) {
+      api.expectFile("/out/entry.js").toMatchInlineSnapshot(`
+        "// styles.module.css
+        var styles_module_default = {
+          foo: "bar_-MSaAA foo_-MSaAA",
+          bar: "foo_-MSaAA bar_-MSaAA",
+          baz: "baz_-MSaAA"
+        };
+
+        // entry.js
+        console.log(styles_module_default);
+        "
+      `);
+      api.expectFile("/out/entry.css").toMatchInlineSnapshot(`
+        "/* styles.module.css */
+        .foo_-MSaAA {
+        }
+
+        .bar_-MSaAA {
+        }
+
+        .baz_-MSaAA {
+        }
+        "
+      `);
+    },
+  });
+
+  itBundled("css/ImportCSSFromJSComposesFromCircular", {
+    files: {
+      "/entry.js": `
+        import styles from "./styles.module.css"
+        console.log(styles)
+      `,
+      "/styles.module.css": `
+        .foo {
+          composes: bar from "other.module.css";
+        }
+        .bar {
+          composes: bar from "styles.module.css";
+        }
+      `,
+      "/other.module.css": `
+        .bar {
+          composes: foo from "styles.module.css";
+        }
       `,
     },
+    entryPoints: ["/entry.js"],
     outdir: "/out",
+
     onAfterBundle(api) {
-      api.expectFile("/out/a.css").toEqualIgnoringWhitespace(`
-/* a.css */
-.hello {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+");
-}
-`);
+      api.expectFile("/out/entry.js").toMatchInlineSnapshot(`
+        "// styles.module.css
+        var styles_module_default = {
+          foo: "bar_NlEjJA foo_-MSaAA",
+          bar: "bar_-MSaAA"
+        };
+
+        // entry.js
+        console.log(styles_module_default);
+        "
+      `);
+      api.expectFile("/out/entry.css").toMatchInlineSnapshot(`
+        "/* other.module.css */
+        .bar_NlEjJA {
+        }
+
+        /* styles.module.css */
+        .foo_-MSaAA {
+        }
+
+        .bar_-MSaAA {
+        }
+        "
+      `);
+    },
+  });
+
+  // Define all the invalid cases
+  const invalidComposesTests = [
+    {
+      name: "IDSelector",
+      cssContent: `
+        /* Invalid: ID selector */
+        .withId {
+          composes: #invalid;
+          color: red;
+        }
+      `,
+      expectedError: "Invalid declaration",
+    },
+    {
+      name: "ElementSelector",
+      cssContent: `
+        /* Invalid: Element selector */
+        .withElement {
+          composes: div;
+          color: blue;
+        }
+      `,
+      expectedError:
+        'The name "div" never appears in "styles.module.css" as a CSS modules locally scoped class name. Note that "composes" only works with single class selectors.',
+    },
+    {
+      name: "CompoundSelector",
+      cssContent: `
+        /* Invalid: Compound selector */
+        .withCompound {
+          composes: .valid.invalid;
+          color: green;
+        }
+      `,
+      expectedError: "Invalid declaration",
+    },
+    {
+      name: "ComplexSelector",
+      cssContent: `
+        /* Invalid: Complex selector */
+        .withComplex {
+          composes: .parent > .child;
+          color: purple;
+        }
+      `,
+      expectedError: "Invalid declaration",
+    },
+    {
+      name: "PseudoClass",
+      cssContent: `
+        /* Invalid: Pseudo-class */
+        .withPseudo {
+          composes: .valid:hover;
+          color: orange;
+        }
+      `,
+      expectedError: "Invalid declaration",
+    },
+    {
+      name: "AttributeSelector",
+      cssContent: `
+        /* Invalid: Attribute selector */
+        .withAttribute {
+          composes: [disabled];
+          color: yellow;
+        }
+      `,
+      expectedError: "Invalid declaration",
+    },
+    {
+      name: "ImportedNonClass",
+      cssContent: `
+        /* Invalid: Imported non-class */
+        .withImportedNonClass {
+          composes: element from "other.module.css";
+          color: magenta;
+        }
+      `,
+      expectedError:
+        'The name "element" never appears in "other.module.css" as a CSS modules locally scoped class name. Note that "composes" only works with single class selectors.',
+    },
+  ];
+
+  // Create a separate test for each invalid case
+  for (const testCase of invalidComposesTests) {
+    itBundled(`css/ImportCSSFromJSComposes${testCase.name}`, {
+      files: {
+        "/entry.js": /* js */ `
+          import styles from "./styles.module.css"
+          console.log(styles)
+        `,
+        "/styles.module.css": /* css */ testCase.cssContent,
+        "/other.module.css": /* css */ `
+          /* Non-class selectors in another file */
+          div {
+            color: brown;
+          }
+          
+          #id {
+            color: teal;
+          }
+          
+          .valid {
+            color: pink;
+          }
+          
+          element {
+            color: gray;
+          }
+        `,
+      },
+      entryPoints: ["/entry.js"],
+      outdir: "/out",
+      bundleErrors: testCase.expectedError
+        ? testCase.name === "ImportedNonClass"
+          ? { "/other.module.css": [testCase.expectedError] }
+          : { "/styles.module.css": [testCase.expectedError] }
+        : undefined,
+      bundleWarnings: testCase.expectedWarning ? { "/styles.module.css": [testCase.expectedWarning] } : undefined,
+      onAfterBundle(api) {
+        // Check that the output files were generated correctly
+        api.expectFile("/out/entry.js").toMatchSnapshot();
+        api.expectFile("/out/entry.css").toMatchSnapshot();
+      },
+    });
+  }
+
+  itBundled("css/ComposesWithSharedPropertiesError", {
+    files: {
+      "/entry.js": `
+      import styles from "./styles.module.css"
+      console.log(styles)
+    `,
+      "/styles.module.css": `
+      .button {
+        color: blue;
+        composes: otherButton from "./other.module.css";
+      }
+    `,
+      "/other.module.css": `
+      .otherButton {
+        color: red;
+        font-size: 16px;
+      }
+    `,
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleWarnings: true,
+    onAfterBundle(api) {
+      // Check that the output files were generated correctly
+      api.expectFile("/out/entry.js").toMatchSnapshot();
+      api.expectFile("/out/entry.css").toMatchSnapshot();
+    },
+  });
+
+  itBundled("css/ComposesSameFile", {
+    files: {
+      "/entry.js": `
+      import styles from "./styles.module.css"
+      console.log(styles)
+    `,
+      "/styles.module.css": `
+      .button {
+        color: blue;
+        composes: otherButton from "./styles.module.css";
+      }
+
+      .otherButton {
+        color: red;
+        font-size: 16px;
+      }
+    `,
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleWarnings: true,
+    onAfterBundle(api) {
+      // Check that the output files were generated correctly
+      api.expectFile("/out/entry.js").toMatchInlineSnapshot(`
+        "// styles.module.css
+        var styles_module_default = {
+          button: "otherButton_-MSaAA button_-MSaAA",
+          otherButton: "otherButton_-MSaAA"
+        };
+
+        // entry.js
+        console.log(styles_module_default);
+        "
+      `);
+      api.expectFile("/out/entry.css").toMatchInlineSnapshot(`
+        "/* styles.module.css */
+        .button_-MSaAA {
+          color: #00f;
+        }
+
+        .otherButton_-MSaAA {
+          color: red;
+          font-size: 16px;
+        }
+        "
+      `);
+    },
+  });
+
+  itBundled("css/ComposesSameFileSameClass", {
+    files: {
+      "/entry.js": `
+      import styles from "./styles.module.css"
+      console.log(styles)
+    `,
+      "/styles.module.css": `
+      .button {
+        color: blue;
+        composes: button from "./styles.module.css";
+      }
+    `,
+    },
+    entryPoints: ["/entry.js"],
+    outdir: "/out",
+    bundleWarnings: true,
+    onAfterBundle(api) {
+      // Check that the output files were generated correctly
+      api.expectFile("/out/entry.js").toMatchInlineSnapshot(`
+        "// styles.module.css
+        var styles_module_default = {
+          button: "button_-MSaAA"
+        };
+
+        // entry.js
+        console.log(styles_module_default);
+        "
+      `);
+      api.expectFile("/out/entry.css").toMatchInlineSnapshot(`
+        "/* styles.module.css */
+        .button_-MSaAA {
+          color: #00f;
+        }
+        "
+      `);
     },
   });
 });
@@ -247,13 +854,13 @@ describe("esbuild-bundler", () => {
 
 /* internal.css */
 .before {
-  color: red;
-}
+          color: red;
+        }
 
 /* charset1.css */
 .middle {
-  color: green;
-}
+          color: green;
+        }
 
 /* charset2.css */
 .after {
@@ -779,7 +1386,7 @@ c {
         @media (min-width: 768px) and (max-width: 1024px) {
           @layer layer-name {
             body {
-              color: red;
+          color: red;
             }
           }
         }
@@ -803,10 +1410,8 @@ c {
 
         /* empty-2.css */
 
-
         /* empty-3.css */
 
-
         /* foo.css */
         @layer outer {
           @layer inner {
@@ -830,7 +1435,6 @@ c {
 
         /* nested-layer.css */
 
-
         /* foo.css */
         @media (outer: true) {
           @layer inner {
@@ -842,7 +1446,6 @@ c {
 
         /* nested-layer.css */
 
-
         /* foo.css */
         @layer outer {
           @supports (inner: true) {
@@ -866,7 +1469,6 @@ c {
 
         /* nested-supports.css */
 
-
         /* foo.css */
         @media (outer: true) {
           @supports (inner: true) {
@@ -878,7 +1480,6 @@ c {
 
         /* nested-supports.css */
 
-
         /* foo.css */
         @layer outer {
           @media (inner: true) {
@@ -902,7 +1503,6 @@ c {
 
         /* nested-media.css */
 
-
         /* foo.css */
         @media (outer: true) {
           @media (inner: true) {
@@ -914,9 +1514,8 @@ c {
 
         /* nested-media.css */
 
-
         /* entry.css */
-        `);
+      `);
     },
   });