Js-beautify: Поддержка newline_between_rules для Sass (улучшение)

Созданный на 19 мар. 2015  ·  49Комментарии  ·  Источник: beautify-web/js-beautify

Теперь опция newline_between_rules в версии 1.5.5 поддерживается только для CSS https://github.com/beautify-web/js-beautify/pull/574.
Итак, в Sass для вложенности не работает.

Вот мой файл test.js :

var fs = require('fs');
var beautify_css = require('js-beautify').css;

fs.readFile('test.scss', 'utf8', function(err, data) {
  if (err) {
    throw err;
  }

  console.log(beautify_css(data, {
    indent_size: 2,
    newline_between_rules: true
  }));
});

Вывод:

$ node test.js

.icons {
  padding: 0;
  li {
    display: inline-block;
  }
  a {
    display: block;
    color: #000;
  }
  a:hover {
    color: #ccc;
  }
}

Я надеюсь добавить newline_between_rules поддержку Sass .
С Уважением.

good first issue css templating enhancement

Самый полезный комментарий

Пожалуйста, проголосуйте с реакцией 👍 на первоначальный пост, а не с сообщениями +1 - это не будет спамить подписчиков. Спасибо!

Все 49 Комментарий

И как вы хотите, чтобы это выглядело?

Аналогично версии 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.

.старая цена {
@include GibsonRegular();
@include размер шрифта (14);
цвет: #646464;
поле слева: 10px;
оформление текста: сквозное;

.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 для sass.

@mrahhal - проблеме почти два года. Похоже, что @sickboy поработал над этим. Кому-то просто нужно сделать pull request с тестами.

Может быть, вы хотели бы сделать это? См. CONTRIBUTING.md .

@bitwiseman, к сожалению, у меня нет ни опыта работы с такого рода проектами, ни времени. Но мой вопрос в том, все ли используют простой CSS или просто придерживаются того, как работает текущее форматирование? Это странно для очень старой, но легко решаемой проблемы.

@sickboy ты в этом? Может быть, я займусь этим в конце концов, если никто не активен в этом. Помимо некоторого странного поведения с «max_preserve_newlines», это действительно единственное, чего не хватает, что полностью мешает мне использовать beautify.

Интересно, поможет ли в этом пулл-реквест #1117 ( добавлено preve_newlines для css ).

@zimmerboy да, это похоже на решение текущей проблемы, но я думаю, что это другое.

Будет ли #1117 объединен? Кажется, это тоже решает эту проблему.

@jorgeramirez - Просто жду исправлений предыдущих отзывов.

@bitwiseman здорово!

Любые обновления?

@royduin - пожалуйста, проверьте последнюю версию.

Вроде работает нормально, но есть небольшая проблема с комментариями. Я знаю, что Bootstrap SCSS не лучший пример, но все же.

Вот как код отформатирован в репо:
image

А это после покраски:
image

Он работает, как и ожидалось, но комментарии перекрываются с предыдущим объявлением, но если комментарии отформатированы правильно, все работает нормально:
image

Опять же, ничего особенно важного, но 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.

Понятно, когда эта функция будет доступна?

Есть ли прогресс?

@dehghani-mehdi @whxaxes
Эта функция не назначена. Нужен кто-то, кто это реализует и добавит тесты.

+1

+1

+1

+1

+1

Пожалуйста, проголосуйте с реакцией 👍 на первоначальный пост, а не с сообщениями +1 - это не будет спамить подписчиков. Спасибо!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги