Property order matters

[chrisjshull]

One of the examples in the readme actually demonstrates a bug:

/*  Edge case (cancelling LTR/RTL values) */
.class {
  border-left: 10px;
  border: none; /*  Notice this doesn't change LTR-RTL */
}

/*  converts to: */
html[dir] .class {
  border: none;
}
html[dir='ltr'] .class {
  border-left: 10px;
}
html[dir='rtl'] .class {
  border-right: 10px;
}

The resulting CSS doesn't have the same effect as the original CSS. Demo: https://github.com/jakob101/postcss-inline-rtl

The resulting CSS should be:

html[dir='ltr'] .class {
  border-left: 10px;
}
html[dir='rtl'] .class {
  border-right: 10px;
}
html[dir] .class {
  border: none;
}

[jakob101]

Good catch, I'll fix it :) thanks!!

On Fri, Jul 8, 2016 at 11:03 AM +0200, "chrisjshull" [email protected] wrote:

One of the examples in the readme actually demonstrates a bug:

/* Edge case (cancelling LTR/RTL values) / .class { border-left: 10px; border: none; / Notice this doesn't change LTR-RTL */ }

/* converts to: */ html[dir] .class { border: none; } html[dir='ltr'] .class { border-left: 10px; } html[dir='rtl'] .class { border-right: 10px; }

The resulting CSS doesn't have the same effect as the original CSS.

Demo: https://github.com/jakob101/postcss-inline-rtl

The resulting CSS should be

html[dir='ltr'] .class { border-left: 10px; } html[dir='rtl'] .class { border-right: 10px; } html[dir] .class { border: none; }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.