Js-beautify: newline_between_rules دعم Sass (تحسين)

وماذا تريد أن تبدو؟

مماثل لإصدار CSS https://github.com/beautify-web/js-beautify/pull/574
بشكل عام ، يكفي مستوى واحد من التعشيش.
هنا مثال:

// Icons
.icons {
  padding: 0;

  li {
    display: inline-block;
  }

  a {
    display: block;
    color: #000;
  }

  a:hover {
    color: #ccc;
  }
}

// Button
.button {
  &.primary {
    color: #4183c4;
  }

  &.primary:hover {
    color: lighten(#4183c4, 15%);
  }
}

مرحبا،
هل هذا العمل لقواعد scss.

.سعر قديم {
تضمين جيبسون ريجولار () ؛
تضمين حجم الخط (14) ؛
اللون: # 646464 ؛
الهامش الأيسر: 10 بكسل ؛
زخرفة النص: خط من خلال ؛

.promovalue {
  <strong i="15">@include</strong> GibsonRegular();
}

}

+1

+1

+1

+1

ربما يكون خيارًا مثل newline_between_nested_rules: true حيث يبدو أنه مشكلة على وجه التحديد مع التداخل؟

سيحتاج } و ; إلى مراعاة قاعدة الأسطر الجديدة المتداخلة

+1 أيضًا بسعر أقل

+1

+1

أستطيع أن أؤكد أن هذه مشكلة في الواقع تتعلق فقط بالقواعد المتداخلة. حاليًا مع newline_between_rules: true هذا:

body {
  background-color: #FFF;

  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

يصبح هذا:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

و newline_between_rules: false هذه هي النتيجة:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}
.container {
  color: blue;
}

لذلك ينبغي النظر في دعم الأسطر الجديدة بين القواعد المتداخلة.

+1

أي ETA على هذا الشيء؟

+1

+1

+1 :(

+1

+1 آخر

آسف على الضوضاء. لم أكن أعرف ما إذا كانت هناك طريقة أخرى للتصويت على هذا.

zimmerboy يوجد

الحل الخاص بي في beautify-css.js :

1. استبدال وظيفة newLine:

        print.newLine = function(keepWhitespace, keepNewLine) {
            if (output.length) {
                if (!keepWhitespace && output[output.length - 1] !== '\n') {
                    print.trim();
                    if (keepNewLine) { output.push('\n'); }
                }

                output.push('\n');

                if (basebaseIndentString) {
                    output.push(basebaseIndentString);
                }
            }
        };

1. غيّر الشروط وكشوف الحساب newline_between_rules إلى:

                    if (newline_between_rules) {
                        print.newLine(false, true);
                    }

ملاحظة: هذا لا يهتم إلا بالأسطر الجديدة بين القواعد ، وليس القواعد بعد الخصائص. أي شخص بعض الأفكار حول ذلك؟

sickboy - رائع ، ابدأ طلب سحب ، أضف بعض الاختبارات. لا تتردد في المضي قدما في هذا.

هل هذا قادم في أي وقت قريب؟ إنه مانع استخدامي الوحيد لـ Beautify for sass.

mrahhal - هذه المسألة عمرها ما يقرب من عامين. انها طبقات sickboy قد فعلت بعض العمل على هذا. شخص ما يحتاج فقط إلى تقديم طلب سحب مع الاختبارات.

ربما تريد أن تفعل هذا؟ انظر CONTRIBUTING.md .

bitwiseman للأسف ليس لدي خبرة في هذا النوع من المشاريع ولا الوقت. لكن سؤالي هو ، إذن هل يستخدم كل شخص css عاديًا أم أنه يتمسك فقط بكيفية عمل التنسيق الحالي؟ هذا غريب بالنسبة لمشكلة قديمة جدًا ولكن من السهل حلها.

sickboy هل أنت على هذا؟ ربما سأتناولها بعد كل شيء إذا لم يكن أحد نشطًا في هذا الأمر. بصرف النظر عن بعض السلوكيات الغريبة مع "max_preserve_newlines" ، فإن هذا هو الشيء الوحيد المفقود الذي يمنعني تمامًا من استخدام التجميل.

أتساءل عما إذا كان طلب السحب رقم 1117 ( إضافة خطوط

zimmerboy نعم يبدو أنه حل للمشكلة الحالية ، لكن أعتقد أنه من نوع مختلف.

هل سيتم دمج # 1117؟ يبدو أنه يعالج هذه المشكلة أيضًا.

jorgeramirez - فقط في انتظار إصلاحات التعليقات السابقة.

تضمين التغريدة

أي تحديثات؟

royduin - يرجى الاختبار باستخدام أحدث إصدار.

يبدو أنه يعمل بشكل جيد ولكن هناك مشكلة صغيرة في التعليقات. أعلم أن Bootstrap SCSS ليس مثالًا رائعًا ، لكنه لا يزال.

هذه هي الطريقة التي يتم بها تنسيق الكود في الريبو:

وهذا بعد التجميل:

يعمل كما هو متوقع ولكن التعليقات تتداخل مع الإعلان السابق ، ولكن إذا تم تنسيق التعليقات بشكل صحيح ، فإنها تعمل بشكل جيد:

مرة أخرى ، لا شيء مهم حقًا ، لكن Bootstrap يستخدم على نطاق واسع: confused:

تضمين التغريدة
الرجاء تقديم قضية جديدة.
أيضا ، يرجى تضمين النص وليس الصور.

bitwiseman حسنًا ، آسف. أردت فقط أن أشير إلى أنه لا يمثل مشكلة حقًا إذا كنت تحترم قواعد SCSS linter.

stgogm - رائع ، شكرًا على المعلومات. 😄

stgogm أثناء إعداده ، هل يمكنك اختبار مشكلة newline_between_rules المتداخلة؟ مع

newline_between_rules: true

هل

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    &+fieldset {
        margin-top: $padding-large;
    }
}

أصبح

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;

    &+fieldset {
        margin-top: $padding-large;
    }
}

؟

في الواقع ، لا فرق:

الكود كما هو مؤلف (بدون سطر جديد بينهما):

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  & + fieldset {
    margin-top: $padding-large;
  }
}

بعد التجميل بـ "newline_between_rules": false :

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

بعد التجميل بـ "newline_between_rules": true :

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

لقد أزال المسافة بين + .

js-beautify --version
1.6.12

stgogm شكرا! لذا كلا bitwiseman # 1146 لم يصلح هذا

مثال آخر حيث "newline_between_rules" لا يكفي لـ SCSS:

$variable: #333;
div {
  display: none;
}

لا يؤدي تنسيق SCSS هذا إلى إضافة سطر جديد بين المتغير ومحدد div.

هل من الواضح متى ستتوفر هذه الميزة؟

هل يوجد أي تقدم؟

تضمين التغريدة
هذه الميزة غير معيّنة. يحتاج إلى شخص لتنفيذه وإضافة الاختبارات.

+1

+1

+1

+1

+1

يرجى التصويت مع 👍 رد فعل على المنشور الأولي بدلاً من رسائل +1 - لن يرسل ذلك للمشتركين رسائل عشوائية. شكرا!