Libsass: يجب أن تتم طباعة محددات النوع دائمًا قبل فئات psuedo

تم إنشاؤها على ٣٠ يونيو ٢٠١٨  ·  3تعليقات  ·  مصدر: sass/libsass

عند تمديد عنصر نائب من محدد [type] ، إذا كان العنصر النائب يستخدم فئات زائفة ، فستتم طباعة المحددات بترتيب خاطئ.

المدخلات. 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/

حسنًا ، لقد كان لدي فكرة رائعة بالأمس ، المثال أدناه ليس خطأ في الواقع (أو على الأقل الترتيب لا يهم في هذه الحالة).
لكن الخطأ الأصلي لا يزال قائما.

لقد أجريت أيضًا بعض الاختبارات ، وهناك المزيد من الطرق لتوسيع الفصول بداخلها ، كما تتم طباعتها بترتيب خاطئ:
ليبساس:


%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;
}

كما ترون ... تتم طباعة hoverclass كالصف الأول.
في الواقع ، لقد وجدت أن المثال الخاص بي هو أيضًا خطأ في مكتبة sass العادية.

ال 3 كومينتر

هذا خطأ كبير جدًا ، اكتشفت نفسي للتو عند ترقية libsass إلى إصدار أحدث (الإصدارات القديمة لم يكن بها هذا الخطأ). هذا يمكن أن يكسر المواقع دون أن تلاحظ. يجب أن يتم إصلاح هذا في أسرع وقت ممكن. يمكنك التحقق بسرعة من المكتبات المختلفة هنا:
https://www.sassmeister.com/

حسنًا ، لقد كان لدي فكرة رائعة بالأمس ، المثال أدناه ليس خطأ في الواقع (أو على الأقل الترتيب لا يهم في هذه الحالة).
لكن الخطأ الأصلي لا يزال قائما.

لقد أجريت أيضًا بعض الاختبارات ، وهناك المزيد من الطرق لتوسيع الفصول بداخلها ، كما تتم طباعتها بترتيب خاطئ:
ليبساس:


%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;
}

كما ترون ... تتم طباعة hoverclass كالصف الأول.
في الواقع ، لقد وجدت أن المثال الخاص بي هو أيضًا خطأ في مكتبة sass العادية.

bskibinski أنا لا أمزح ، إنه عيد ميلادي حرفيًا اليوم وليس لديك أي فكرة عن مدى سعادتي لرؤية شخص ما يرد أخيرًا على هذا ، حتى لو كان ذلك فقط لأقول أنني لست وحدي! أفضل هدية عيد ميلاد غير مقصودة على الإطلاق. 🎂🎉

ashleykolodziej هاها كعكة سعيدة اليوم! يسعدني أن أجعله أفضل ؛)

أيضًا ، اكتشاف الخطأ الثاني الذي أجريته ليس في الواقع خطأ (يوم طويل) ولكن لا يزال اكتشافك كذلك!
دعونا نأمل أن يتم إصلاح هذا قريبا! :)

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات