Background

CSS Modules has been a crucial technology in the web development ecosystem since its creation 8 years ago by @markdalgleish. Over the years, the landscape of web development has evolved, bringing in new CSS browser features like CSS anchor positioning (maybe), container queries (2022), native CSS nesting (2023), css variables (2011),
grid, and more.

@devongovett, the creator of Lightning CSS, has been actively extending CSS Modules through his work on Lightning CSS, demonstrating a deep understanding and commitment to the advancement of modular and reusable CSS.

Mark Dalgleish expressed his thoughts on this:

Part of me thinks Devon Govett should take it on due to his work on Lightning CSS. He’s already extending CSS Modules there, more than anyone else I’ve seen.

Proposal

I propose that we officially hand over the lead of CSS Modules to Devon Govett. This transition would bring together the expertise and advancements made in Lightning CSS, aligning CSS Modules with the latest features in web development.

Reasons for the Handover

1. Evolution of Web Standards: With new CSS features such as container queries, CSS nesting, and others becoming mainstream, CSS Modules needs to adapt to stay relevant.
2. Consistency with Lightning CSS: Devon Govett's work on Lightning CSS already addresses many of the latest CSS features. Bringing these changes into the CSS Modules standard would ensure a unified approach across the ecosystem.
3. Support for CSS Variables, Grid, and More: As web development embraces features like CSS variables, grid layouts, and other modern practices, integrating Lightning CSS advancements into CSS Modules would provide a comprehensive solution.

Code Example

.demo {
    color: var(--demo-color);
}

.grid {
    grid-template-areas: "nav main";
}

@keyframes flip {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

import styles from "./demo.module.css";
console.log(styles);

Which will log the following for the webpack css-modules implementation:

{
  "demo": "EHQSqIdfzBiE12D40zpg",
  "grid": "FZuKxiXBWfaMqgxLojyr",
  "flip": "_xdAw9d7eDsKrgx8T652"
}

Where lightning-css will log:

{
  "--demo-color": "--_8ChAUa_demo-color",
  "demo": "_8ChAUa_demo",
  "flip": "_8ChAUa_flip",
  "grid": "_8ChAUa_grid",
  "main": "_8ChAUa_main",
  "nav": "_8ChAUa_nav"
}