postcss-logical : transition

[romainmenke]

We overlooked transition when refactoring postcss-logical.
I only noticed it now when revisiting all the downsides/benefits of the old plugin.

As far as I can tell we can only safely transform transition.
Changing transition-property is not possible because other transition-* longhands need to have matching indices.

.before {
  transition-property: margin-inline;
  transition-duration: 1s;
}

.after {
  transition-property: margin-left, margin-right;
  transition-duration: 1s; /* missing value for index "1" */
}

---

I am now using the same transform functions for real declarations and for transition.

For transition I am constructing a new Declaration with the property taken from transition so that it can be passed to the same functions.

[ehoogeveen-medweb]

As far as I can tell we can only safely transform transition. Changing transition-property is not possible because other transition-* longhands need to have matching indices.

.before {
  transition-property: margin-inline;
  transition-duration: 1s;
}

Is it (theoretically) possible to transform this example by realizing that the 1s from transition-duration corresponds to the margin-inline from transition-property and transforming both? I guess it wouldn't be possible to include the original transition-property at that point (for browsers that support margin-inline).

[romainmenke]

@ehoogeveen-medweb This is not possible because a longhand can be defined on multiple rules :

.foo {
  transition-property: margin-inline;
}

.bar {
  transition-duration: 1s;
}

Only with the shorthand are we sure that we have accurate information

[Antonio-Laguna]

LGTM!