As part of View Transitions there's now a new type of "class" defined on the the element using view-transition-class either through CSS or using inline styles.

https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class

Ideally these would be supported to be namespaced by CSS modules when used inside a .module.css files and then exported by name to JS so that it can be referred to in JS like any other class.

If I specify either ::view-transition-group(...), ::view-transition-image-pair(...), ::view-transition-old(...) or ::view-transition-new(...) with a class selector in the parenthesis, that should become a generated name and then exported to JS.

// my.module.css
::view-transition-group(.slideIn) {
  ...
}

import { slideIn } from './my.module.css';

<div style={{ viewTransitionClass: slideIn }} />

Turns into:

::view-transition-group(.xyz) {
  ...
}

const slideIn = 'xyz';

<div style={{ viewTransitionClass: slideIn }} />

This becomes key to make reusable animations that can be applied to components without worrying about global namespaces and ensuring they're only included in the CSS if used.

This works as expected with CSS Modules in the old Webpack loaders but errors with lightningcss (which affects both Parcel and Turbopack). Due to the parsing failing on the class names.

@parcel/transformer-css: Unexpected token Delim('.')
  4 | 
> 5 | ::view-transition-new(.foo) {
>   |                       ^
  6 |   animation-duration: 1s;
  7 | }

Related to #859 but a different problem.