Libsass: टाइप चयनकर्ताओं को हमेशा छद्म-वर्गों से पहले प्रिंट करना चाहिए

को निर्मित 30 जून 2018 · 3टिप्पणियाँ · स्रोत: sass/libsass

[type] चयनकर्ता से प्लेसहोल्डर का विस्तार करते समय, यदि प्लेसहोल्डर छद्म-वर्गों का उपयोग करता है, तो चयनकर्ता गलत क्रम में मुद्रित होते हैं।

इनपुट.एससीएसएस

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

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

वास्तविक परिणाम

लिबसास 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

स्रोत

ashleykolodziej

👍6

सबसे उपयोगी टिप्पणी

यह एक बहुत बड़ी बग है , बस खुद को एक नए संस्करण में 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;
}

जैसा कि आप देख सकते हैं... होवरक्लास प्रथम श्रेणी के रूप में मुद्रित हो जाते हैं।
असल में, मैंने पाया है कि मेरा उदाहरण सामान्य एसएएस पुस्तकालय में भी एक बग है।

bskibinski 4 अक्तू॰ 2018

👍3

सभी 3 टिप्पणियाँ


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

bskibinski 4 अक्तू॰ 2018

👍3

@bskibinski मैं तुम्हें बच्चा नहीं, यह सचमुच आज मेरा जन्मदिन है और आपको पता नहीं है कि मैं किसी को आखिरकार इसका जवाब देने के लिए कितना उत्साहित था, भले ही यह कहने के लिए कि मैं अकेला नहीं हूं! अब तक का सबसे अच्छा अनपेक्षित जन्मदिन। 🎂🎉

ashleykolodziej 5 अक्तू॰ 2018

@ashleykolodziej हाहा हैप्पी केक डे! खुशी है कि मैं इसे बेहतर बना सकता हूं;)

साथ ही, मेरी दूसरी बग खोज वास्तव में एक बग (लंबा दिन) नहीं है लेकिन आपका अभी भी है!
आइए आशा करते हैं कि यह जल्द ही ठीक हो जाएगा! :)

bskibinski 5 अक्तू॰ 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स