The output selector is wrong

[yoanmalie]

Hi, I've found that the selector in the output is wrong.
We want to select blockquote who have a dir attribute set to rtl or ltr.
The selector given in the output say : We select blockquote who are child of element which have a dir attribute set to rtl or ltr.

Input:

blockquote:dir(rtl) {
  margin-right: 10px;
}

blockquote:dir(ltr) {
  margin-left: 10px;
}

Output:

[dir="rtl"] blockquote {
  margin-right: 10px;
}
[dir="ltr"] blockquote {
  margin-left: 10px;
}

Expected:

blockquote[dir="rtl"] {
  margin-right: 10px;
}
blockquote[dir="ltr"] {
  margin-left: 10px;
}

[jonathantneal]

The most accurate fallback is to place the [dir] attribute selector beforehand, as an ancestor. This is because :dir often inherits its direction from an ancestor.

This would be an issue if you had multiple [dir] attributes in a single tree.

Also, the plugin goes as far as to detect whether you are using :dir on a root-like element, in which case it attaches the output as you expect.