Produces invalid CSS when directional properties are used in @keyframes

[querkmachine]

When running postcss-logical on @keyframes at-rule blocks, the resulting CSS isn't valid.

For example, I have this CSS that produces a basic loading bar-like effect (a div starts at 0% fixed on the "left", grows to 100% width, then reduces back to 0% whilst fixed on the "right"). This is achieved using the left-right directional properties inset-inline-start and inset-inline-end.

@keyframes busy {
  0%,
  100% {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: 0;
  }
  33% {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: 100%;
  }
  33.01% {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: 100%;
  }
  66% {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: 0;
  }
}

Running it though postcss-logical on the default configuration produces this invalid CSS, where each timing step has been prefixed with a [dir] attribute selector:

@keyframes busy {
  [dir="ltr"] 0%,[dir="ltr"]  100% {
    left: 0;
  }
  [dir="rtl"] 0%,[dir="rtl"]  100% {
    right: 0;
  }
  [dir="ltr"] 0%,[dir="ltr"]  100% {
    right: auto;
  }
  [dir="rtl"] 0%,[dir="rtl"]  100% {
    left: auto;
  }
  0%, 100% {
    width: 0;
  }
  [dir="ltr"] 33% {
    left: 0;
  }
  [dir="rtl"] 33% {
    right: 0;
  }
  [dir="ltr"] 33% {
    right: auto;
  }
  [dir="rtl"] 33% {
    left: auto;
  }
  33% {
    width: 100%;
  }
  [dir="ltr"] 33.01% {
    left: auto;
  }
  [dir="rtl"] 33.01% {
    right: auto;
  }
  [dir="ltr"] 33.01% {
    right: 0;
  }
  [dir="rtl"] 33.01% {
    left: 0;
  }
  33.01% {
    width: 100%;
  }
  [dir="ltr"] 66% {
    left: auto;
  }
  [dir="rtl"] 66% {
    right: auto;
  }
  [dir="ltr"] 66% {
    right: 0;
  }
  [dir="rtl"] 66% {
    left: 0;
  }
  66% {
    width: 0;
  }
}

This issue does not occur if the dir configuration option is set, as it doesn't prepend [dir] attribute selectors in that situation.

I'm not sure how the desired result can actually be achieved in an automated fashion due to the inability to nest selectors within @keyframes. It would seemingly be required to have multiple @keyframes definitions and to swap which one is used based on the directionality of the calling selector.

Regardless of how to achieve that, postcss-logical adding these selectors within a @keyframes at-rule block currently creates invalid CSS, and the tool should probably ignore any CSS properties that would create such selectors.

[romainmenke]

@querkmachine This issue has been resolved in the latest release.

At the moment the plugin will leave any CSS inside @keyframes untouched.
This is preferable to generating broken CSS and leaves the author the possibility of manually writing fallbacks.

This repo has been moved to @csstools/postcss-plugins. If you have any further questions or issues we are happy to assist there!