Minification merges individual transform properties (`scale`, `rotate`, `translate`) into `transform`, breaking downstream overrides

[thomasbachem]

When minifying CSS that uses individual transform properties (like scale, rotate, or translate) alongside transform, Lightning CSS merges them into a single transform string.

Relevant Spec:
CSS Transforms Module Level 2: Individual Transforms

"The transform properties are applied in the order: first translate, then rotate, then scale, then transform."

By merging the individual properties into the transform property, Lightning CSS changes the specificity and cascade behavior, preventing downstream rules from overriding just the scale or rotate component.

Input CSS:

.menu {
  transform: translateX(-50%);
  scale: 0.8;
}

.menu.open {
  scale: 1;
}

Configuration:

import { transform } from 'lightningcss';

transform({
  filename: 'style.css',
  code: Buffer.from(source),
  minify: true, 
  // No specific 'targets' defined (defaults)
});

Actual Output:

.menu {
  /* Individual `scale` property gets merged into 'transform' */
  transform: translate(-50%)scale(.8);
}

.menu.open {
  /* Applies ON TOP of the values inside the transform property, */
  /* rather than replacing them. Element is still scaled to 0.8. */
  scale: 1;
}

Expected Behavior:
The minifier should detect that these properties are being overridden in related rules and preserve them as separate properties, OR it should avoid merging individual transform properties into transform when they are used in a cascading context.

Version:
v1.30.2