Js-beautify: Formatação de linha única CSS

Duplicata de #330. Mas, dada a idade desse pedido, estou mantendo este em aberto.

o visual studio tem um recurso compacto para arquivos *.css, exatamente como @Alex360hd desejava.

o código do visual studio com plugins de extensão do js-beauty ainda não possui esse recurso.

O recurso compacto torna seu código 1000 linhas (compacto) versus 5000 linhas (formatação antiga), você pode controlar seu arquivo *.css com God Perspective.

de odiador de código sass/menos longo.

Sim, +1 para isso. Eu realmente gosto de formatação de linha única css, cada seletor está próximo um do outro e dá uma visão de perspectiva muito boa.

Eu esperaria usar um minifier para transformar estilos de várias linhas em uma única linha e um embelezador para transformar uma linha em várias linhas.

Seguindo a opinião #330 de @evocateur ("O trabalho de um embelezador não é minificar o código, mas reformatá-lo para consistência e legibilidade"): o cssmin mencionado foi preterido em favor de clean-css (veja também Como usar clean-css com ferramentas de compilação? ). "Formatação de linha única" é fácil de obter com clean-css - as configurações mais simples são

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

Isso vira

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

em

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

A partir daí, ajuste as opções spaces

todos os jovens desenvolvedores dos meus colegas escrevem cada linha com muito, muito, muito, menos, e cumprem em todos os lugares.

perdoe meu código de pool -_-!!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

saída:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

apenas compacte o código entre{}, o arquivo .scss&.less é excluído.
eu quero saber se existe um option.css. compact para formatar o *.css . :)

@evocateur

O trabalho de um embelezador não é reduzir o código, mas reformatá-lo para consistência e legibilidade

Isso não é minificação, a formatação de linha única mantém alguns espaços e algum retorno de linha para várias regras de seletor.

Para mim, e para muitos desenvolvedores web, isso:

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

É muito mais legível do que isso:

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

Não.

Em 22 de março de 2017, às 01:08, Alex360hd [email protected] escreveu:

@evocateur

O trabalho de um embelezador não é reduzir o código, mas reformatá-lo para consistência e legibilidade

Para mim, e para muitos desenvolvedores web, isso:

.btn { borda: 1px preto sólido; fundo:#ff; raio da borda:5px color:#000; }
. btn:hover { background:#000; cor:#ff; }
É muito mais legível do que isso:

.btn {
borda: 1px preto sólido;
fundo:#ff;
raio da borda: 5px;
cor:#000;
}

. btn:hover {
fundo:#000;
cor:#ff;
}
—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou silencie a conversa.

Linda argumentação...

Pessoalmente, gosto de ter uma ótima visão geral do meu seletor CSS e, usando a sintaxe "regular", dificilmente vejo mais de 3 ou 4 seletores na minha viewport.

Usando a formatação de linha única, posso ver 20 ou 30 seletores (pelo menos) e posso facilmente ter uma visão geral de um grupo de elementos.

E quando você conhece bem CSS, usa herança e seletor de forma inteligente, raramente tem mais de 5 ou 6 regras para um seletor, e com a tela que temos hoje, (bem grande), consigo ver todas as minhas regras sem barra de rolagem horizontal. (e se for o caso, meu IDE tem muitas opções para retorno automático de linha).

Se você pesquisar por formatador de css online, verá que muitos deles têm opções de linha única, provavelmente porque interessa a algumas pessoas...

@evocateur - 🌟 Estrela dourada na sua imitação do Grumpy Cat. 🌟 😃

@Alex360hd @jsonchou - seus pontos foram bem aproveitados. Isso fica em algum lugar entre minificação e embelezamento e é por isso que esse problema permanece em aberto e listado como um aprimoramento.

Esta é uma solicitação razoável, mas é de menor prioridade para mim e para os outros principais contribuidores deste projeto (como @evocateur). Se alguém optar por enviar um PR com implementações de javascript e python e uma gama suficiente de testes, ele será aceito. Mas temos outras tarefas que consideramos prioritárias para o projeto como um todo.

@olets
Obrigado por apontar a ferramenta css alternativa e alternativa!

@jsonchou-
Desculpe, sempre há uma expressão regular que funcionará para a maioria das entradas, ou pelo menos todas as entradas que você ou eu tentaríamos. No entanto, eles nunca realmente funcionam para todas as entradas e, em última análise, são insustentáveis ​​e propensos a erros - foi assim que o código CSS-beautifier ficou tão difícil de manter quanto é hoje. Obrigado por fornecer uma solução alternativa que as pessoas podem invadir se optarem por arriscar, mas espero que usem a solução @olets . 😄

@jsonchou cuidado com //inline comments em LESS e Sass

@Alex360hd @Zmove

Eu escrevi um plugin compacto css para VSCode.

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

Excelente, vou tentar isso.

Ei @jsonchou - acho que se você levasse seu plugin para o mundo sass/scss, muitas pessoas o usariam. Fico impressionado ao pensar por que, hoje em dia, com monitores de 3.000 pixels de largura, as pessoas gravitaram em torno do uso de 5% do espaço da tela em CSS!

Eu levaria seu plugin até o ponto de permitir que as pessoas especifiquem o ORDER em que as propriedades precisam ir. Coisas como posição e exibição devem aparecer no início da lista e, em seguida, margem, preenchimento, etc., e depois cores, fontes etc.

Para mim, isso é extremamente poderoso quando em uma equipe com muitas pessoas escrevendo SCSS.

Desculpe pessoal, alguém me dá uma boa razão para ter vals de chave de propriedade em linhas separadas? Escrevendo CSS em um dispositivo móvel?

Steven

@ tateman74 Talvez eu tente fazer o arquivo .scss ser de linha única, mas acho que as propriedades ORDER devem ser feitas pela terceira solução, como csscomb.

Ai interessante. CSSComb é certamente o que eu estaria procurando para encomendar. Tenho que fazer uma extensão VSCode para isso, eu acho.

O SCSS pode ser um pouco desafiador, pois as novas linhas realmente significam algo. Para melhor legibilidade, é sempre assim que formato as coisas:

• sempre uma nova linha antes de uma regra aninhada ou não
• sempre encaracolados em suas próprias linhas

Há muito tempo (nos meus dias de emprego no MySpace :)), alguns amigos css e eu raciocinamos que os prefixos de fornecedores deveriam começar em uma nova linha, pois são basicamente propriedades (ignoradas). Ou seja, eles significam algo, mas estão lá apenas para compatibilidade. Eu acho que nos dias de hoje, deveríamos estar usando PostCSS de qualquer maneira, para que esses prefixos de fornecedores nunca existissem.

Obrigado novamente e deixe-me saber se eu puder ajudar. Aqui está um arquivo SCSS bastante típico que eu prefiro.
Alguém me diga que não é legível! :)

Steven

Algum de vocês que achar esse recurso útil estaria disposto a implementar o recurso para o embelezador css? Provavelmente não seria tão difícil.

Isso exigirá pelo menos tokenização css para que funcione (#545). Mesmo uma vez feito, será necessário algum trabalho para que isso aconteça.