Properties order not maintained

[GrandSchtroumpf]

It seems that the order of properties are not maintained when bundle with lightning css.

With this input :

.item {
  animation: fade both;
  animation-timeline: scroll(root block);
}

I've got this output :

.item {
  animation-timeline: scroll(root block);
  animation: fade both;
}

The issue is that animation will override animation-timeline, so it'll not work.

I'm using vite with this config :

return {
    build: {
      cssMinify: 'lightningcss' as const,
    },
    css: {
      transformer: 'lightningcss' as const,
      lightningcss: {
        drafts: {
          nesting: true,
          customMedia: true
        }
      },
    }
}

[JiangWeixian]

@devongovett Meet simliar issue, use it with MiniCssExtractPlugin

with input:

.header {
  height: 60px;
  height: var(--header-height); // 68px;
}

with output

.header {
  height: var(--header-height); // 68px;
  height: 60px;
}

[JiangWeixian]

@devongovett Meet simliar issue, use it with MiniCssExtractPlugin

with input:

.header {
  height: 60px;
  height: var(--header-height); // 68px;
}

with output

.header {
  height: var(--header-height); // 68px;
  height: 60px;
}

downgrade to 1.19.0 works fine

[evanminto]

I ran into the same problem, documented here: https://github.com/parcel-bundler/lightningcss/issues/547

[chriscoyier]

This just bit me.

@media (prefers-reduced-motion: no-preference) {
  .site-footer {
    animation: spin linear both;
    animation-timeline: scroll();
  }
}

turns to

@media (prefers-reduced-motion: no-preference) {
  .site-footer {
    animation-timeline: scroll();
    animation: spin linear both;
  }
}

And thus the animation-timeline is overwritten and breaks.

[bakura10]

This is indeed problematic, I spent a few hours figuring out why my scroll-timeline experiments did not work. The animation-timeline order needs to be preserved :).

[devongovett]

That's because animation-timeline was added to the animation shorthand which we didn't support parsing yet. The above commit should handle that.

[bakura10]

Hi @devongovett . I have face a similar issue related to animation-range. In Chrome at least, Lightning CSS will ignore this:

.foo {
  animation: linear foo;
  animation-timeline: view();
  animation-range: entry-crossing 0% exit-crossing 100%;
}

Into this:

.foo {
  animation-range: entry-crossing 0% exit-crossing 100%;
  animation: linear foo;
  animation-timeline: view();
}

The issue is that re-ordered this way Chrome will ignore the animation-range. It has to be after the animation-timeline.

[JiangWeixian]

Still use 1.19.0 version, pending upgrade to latest version due to this issue...

[JiangWeixian]

@devongovett Meet simliar issue, use it with MiniCssExtractPlugin

with input:

.header {
  height: 60px;
  height: var(--header-height); // 68px;
}

with output

.header {
  height: var(--header-height); // 68px;
  height: 60px;
}

maybe we can minify into this way:

.header {
  height: var(--header-height, 60px);
}

[soluml]

Additional example: I ran into this issue progressively enhancing some details elements:

  details {
    &::details-content {
      display: block;
      block-size: 0;
      overflow: hidden;
      transition-behavior: allow-discrete;
      transition-duration: 0.25s;
      transition-property: block-size, content-visibility;
      transition-timing-function: ease-in-out;
    }

    &[open]::details-content {
      block-size: auto;
      /* This property gets put before the line above for some reason */
      block-size: calc-size(auto);
    }
  }

Splitting the above into two blocks avoided the issue:

/* Separated due to Lightning CSS bug */
&[open]::details-content {
    block-size: auto;
}

&[open]::details-content {
    block-size: calc-size(auto);
}