Js-beautify: suporte newline_between_rules para Sass (aprimoramento)

E como você quer que seja?

Semelhante à versão CSS https://github.com/beautify-web/js-beautify/pull/574
Em geral, um nível de aninhamento é suficiente.
Aqui um exemplo:

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

Oi,
Este é o trabalho para regras scss.

.preço antigo {
@include GibsonRegular();
@include tamanho da fonte(14);
cor: #646464;
margem esquerda: 10px;
decoração de texto: linha;

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

}

+1

+1

+1

+1

talvez uma opção como newline_between_nested_rules: true , pois parece ser especificamente um problema com o aninhado?

} e ; precisariam considerar a regra para novas linhas aninhadas

+1, também por menos

+1

+1

Posso confirmar que isso é realmente um problema apenas com as regras aninhadas. Atual com newline_between_rules: true isto:

body {
  background-color: #FFF;

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

.container {
  color: blue;
}

Torna-se isto:

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

.container {
  color: blue;
}

E newline_between_rules: false este é o resultado:

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

Portanto, o suporte para novas linhas entre regras aninhadas deve ser considerado.

+1

Algum ETA sobre isso?

+1

+1

+1 :(

+1

Outro +1

Desculpe o barulho. Eu não sabia se outra maneira de upvote isso.

@zimmerboy há um botão "Adicionar sua reação" no canto superior direito de cada comentário, que contém a reação +1 (:+1:).

Minha solução alternativa em beautify-css.js :

1. Substitua a função 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. Altere as condições e instruções newline_between_rules para:

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

Nota: Isso apenas cuida de novas linhas entre as regras, não as regras após as propriedades. Alguém alguma idéia sobre isso?

@sickboy - Legal, inicie um pull request, adicione alguns testes. Por favor, sinta-se à vontade para avançar.

Isso está chegando em breve? É o meu único bloqueador para usar beautify por atrevimento.

@mrahhal - O problema tem quase dois anos. Parece que @sickboy fez algum trabalho nisso. Alguém só precisa fazer um pull request com testes.

Talvez você gostaria de fazer isso? Consulte CONTRIBUINDO.md .

@bitwiseman infelizmente não tenho experiência com esse tipo de projeto nem tempo. Mas minha pergunta é, então todo mundo está usando CSS simples ou apenas seguindo como a formatação atual funciona? Isso é estranho para um problema muito antigo, mas fácil de resolver.

@sickboy você está nisso? Talvez eu resolva isso, afinal, se ninguém estiver ativo nisso. Além de algum comportamento estranho com "max_preserve_newlines", esta é realmente a única coisa que está me impedindo completamente de usar beautify.

Gostaria de saber se o pull request #1117 ( adicionado preserve_newlines para css ) ajudará com isso.

@zimmerboy sim, isso parece ser uma correção para o problema atual, mas acho que é um tipo diferente.

O nº 1117 será mesclado? Parece resolver esse problema também.

@jorgeramirez - Apenas aguardando correções no feedback anterior.

@bitwiseman ótimo!

Alguma atualização?

@royduin - teste com a versão mais recente.

Parece funcionar bem, mas há um pequeno problema com comentários. Eu sei que o Bootstrap SCSS não é um grande exemplo, mas ainda assim.

É assim que o código é formatado no repositório:

E isso depois de embelezar:

Funciona como esperado, mas os comentários se sobrepõem à declaração anterior, mas se os comentários forem formatados corretamente, funcionará bem:

Novamente, não é nada realmente importante, mas o Bootstrap é amplamente usado :confused:

@stgogm
Por favor, registre um novo problema.
Além disso, inclua texto, não imagens.

@bitwiseman Ok, desculpe. Só queria observar isso, pois não é realmente um problema se você respeitar as regras do linter SCSS.

@stgogm - Legal, obrigado pela informação. 😄

@stgogm enquanto você o configura, você poderia testar o problema newline_between_rules aninhado? Com

newline_between_rules: true

faz o seu

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

vir a ser

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

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

?

Na verdade, não faz diferença:

Código conforme criado (sem nova linha entre):

form {
  display: block;
}

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

Depois de embelezar com "newline_between_rules": false :

form {
  display: block;
}

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

Depois de embelezar com "newline_between_rules": true :

form {
  display: block;
}

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

Apenas removeu o espaço entre o + .

js-beautify --version
1.6.12

Obrigado @stgogm! Então não @bitwiseman #1146 não corrigiu isso

Outro exemplo em que "newline_between_rules" não é suficiente para SCSS:

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

Formatar este SCSS não adiciona uma nova linha entre a variável e o seletor div.

Está claro quando esse recurso estará disponível?

Tem algum progresso?

@dehghani-mehdi @whxaxes
Este recurso não está atribuído. Ele precisa de alguém para implementá-lo e adicionar testes.

+1

+1

+1

+1

+1

Por favor, vote com uma reação 👍 à postagem inicial em vez de mensagens com +1 - isso não enviará spam aos assinantes. Obrigado!