Libsass: タイプセレクターは常に疑似クラスの前に出力する必要があります

作成日 2018年06月30日  ·  3コメント  ·  ソース: sass/libsass

[type]セレクターからプレースホルダーを拡張するときに、プレースホルダーが疑似クラスを使用していると、セレクターが間違った順序で出力されます。

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

実績

libsass 3.5.4

[type="button"] {
  color: red;
}

:focus[type="button"] {
  color: blue;
}

期待される結果

ルビーサス3.5.6

[type="button"] {
  color: red;
}

[type="button"]:focus {
  color: blue;
}

バージョン情報:

$ node-sass --version
node-sass   4.9.0   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

また、 selector-unifyを使用していくつかのデバッグステートメントを実行し、順序に関係なく期待どおりに統合された要素セレクターを使用した場合、タイプセレクターはそうではなかったことに気付きました。

@debug(selector-unify('button', ':focus'));
// button:focus

@debug(selector-unify(':focus', 'button'));
// button:focus

@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus

@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]

私が提供できる情報が他にあるかどうか教えてください!

Bug - @extends Bug - Confirmed Dev - Test Written

最も参考になるコメント

これはかなり大きなバグであり、libsassを新しいバージョンにアップグレードするときに自分自身を発見しました(古いバージョンにはこのバグはありませんでした)。 これにより、気付かないうちにサイトが破損する可能性があります。 これは本当にできるだけ早く修正する必要があります。 ここでさまざまなライブラリをすばやく確認できます。
https://www.sassmeister.com/

昨日ブレインファートがありました。以下の例は実際にはバグではありません(または、少なくともその場合は順序は関係ありません)。
しかし、元のバグはまだ残っています。

また、いくつかのテストを行いましたが、クラス内のクラスを拡張する方法が他にもあり、間違った順序で出力されます。
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

出力:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

ご覧のとおり...ホバークラスはファーストクラスとして印刷されます。
実際、私の例は通常のsassライブラリのバグでもあることがわかりました。

全てのコメント3件

これはかなり大きなバグであり、libsassを新しいバージョンにアップグレードするときに自分自身を発見しました(古いバージョンにはこのバグはありませんでした)。 これにより、気付かないうちにサイトが破損する可能性があります。 これは本当にできるだけ早く修正する必要があります。 ここでさまざまなライブラリをすばやく確認できます。
https://www.sassmeister.com/

昨日ブレインファートがありました。以下の例は実際にはバグではありません(または、少なくともその場合は順序は関係ありません)。
しかし、元のバグはまだ残っています。

また、いくつかのテストを行いましたが、クラス内のクラスを拡張する方法が他にもあり、間違った順序で出力されます。
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

出力:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

ご覧のとおり...ホバークラスはファーストクラスとして印刷されます。
実際、私の例は通常のsassライブラリのバグでもあることがわかりました。

@bskibinski私はあなたを子供にしません、それは文字通り今日の私の誕生日です、そしてあなたは私が一人ではないと言っているだけでも、誰かが最終的にこれに返信するのを見るのがどれほど興奮していたかわかりません! 史上最高の意図しない誕生日プレゼント。 🎂🎉

@ashleykolodziejハハハッピーケーキデー! 私はそれをより良くすることができてうれしい;)

また、私の2番目のバグ発見は実際にはバグではありませんが(長い日)、あなたのバグはまだあります!
これがすぐに修正されることを願っています! :)

このページは役に立ちましたか?
0 / 5 - 0 評価