The :has() selector and CSS nesting are now widely available

A dirt path curving through a tunnel of twisted tea trees on the Victorian coast

The June Baseline digest on web.dev lists sixteen features that crossed into Baseline Widely available, meaning every major browser has shipped them for at least thirty months and a team can use them without a fallback. Two of them matter more than the rest for anyone maintaining a design system: the :has() pseudo-class, which styles an element based on what is inside it or after it, and the ampersand nesting selector, which anchors nested rules to their parent the way preprocessors have done for fifteen years. The digest also moves the mask shorthand, the pow() function, URL.canParse(), and lazy loading for iframes across the same line, and field-sizing to Newly available.

I think this is the month the case for a CSS preprocessor in a design system got weak enough to question out loud. Nesting was the reason most teams adopted Sass. Variables went native years ago. Mixins and functions are mostly covered by custom properties and calc(), and the remaining cases are usually a sign the system is doing something in CSS it should be doing in a component. What is left is habit, a build step, and a dialect that new engineers have to learn alongside the real thing.

My view is that a design system team should put a date on it. Not rip Sass out next sprint, but decide when new styles are written in plain CSS and when the old ones get converted, and stop carrying the preprocessor as an assumption nobody has revisited.

When did your team last ask why the preprocessor is still there?

Photo source: https://photos.robertstowe.com/victoria