You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 21, 2023. It is now read-only.
It isn't immediately clear what the ordering of this will be from looking at it, but the output will produced will be something like.
.rule { padding:5px5px; }
@media a {
.rule { padding:10px5px; }
}
@media b {
.rule { padding:5px10px; }
}
Current implementation
At the moment there is no way explicitly define an ordering for them, it'll just output them in the order that it is processed. Since it processes properties from left to right, it encounters the $verticalPadding first which defines "a", next it encounters $horizontalPadding which defines "b", and as it's processing them it builds up the output for each case in a map, and javascript maps retains insert ordering on iteration.
When this isn't an issue
This works fine when there is only one value in a declaration value or two values with the exact same cases with the exact same ordering, however it's not unreasonable to assume that this isn't always the case. However if the rules are defined in a way that they clearly outline a minimum & maximum with no overlap this won't be an issue. So it isn't completely the wild west and the output is deterministic, but yeah... It could be better.
The text was updated successfully, but these errors were encountered:
Problem outline
Currently ordering is handled pretty well, except there are a few cases where it can fall apart. Take this sample for example using module values.
It isn't immediately clear what the ordering of this will be from looking at it, but the output will produced will be something like.
Current implementation
At the moment there is no way explicitly define an ordering for them, it'll just output them in the order that it is processed. Since it processes properties from left to right, it encounters the
$verticalPadding
first which defines"a"
, next it encounters$horizontalPadding
which defines"b"
, and as it's processing them it builds up the output for each case in a map, and javascript maps retains insert ordering on iteration.When this isn't an issue
This works fine when there is only one value in a declaration value or two values with the exact same cases with the exact same ordering, however it's not unreasonable to assume that this isn't always the case. However if the rules are defined in a way that they clearly outline a minimum & maximum with no overlap this won't be an issue. So it isn't completely the wild west and the output is deterministic, but yeah... It could be better.
The text was updated successfully, but these errors were encountered: