Js-beautify: prise en charge de newline_between_rules pour Sass (amélioration)

Et à quoi voulez-vous qu'il ressemble ?

Similaire à la version CSS https://github.com/beautify-web/js-beautify/pull/574
En général, un niveau d'imbrication suffit.
Ici un exemple :

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

Salut,
Est-ce que cela fonctionne pour les règles scss.

.ancien prix {
@include GibsonRegular();
@include font-size(14);
couleur : #646464 ;
marge gauche : 10 px ;
texte-décoration : ligne à travers ;

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

}

+1

+1

+1

+1

peut-être une option comme newline_between_nested_rules: true car cela semble être spécifiquement un problème avec l'imbrication ?

} et ; devraient tenir compte de la règle pour les nouvelles lignes imbriquées

+1, aussi pour moins cher

+1

+1

Je peux confirmer qu'il s'agit bien d'un problème uniquement avec les règles imbriquées. Actuel avec newline_between_rules: true ceci :

body {
  background-color: #FFF;

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

.container {
  color: blue;
}

Devient ceci :

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

.container {
  color: blue;
}

Et newline_between_rules: false voici le résultat :

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

La prise en charge des sauts de ligne entre les règles imbriquées doit donc être envisagée.

+1

Un ETA sur ce truc ?

+1

+1

+1 :(

+1

Un autre +1

Désolé pour le bruit. Je ne savais pas s'il y avait une autre façon de voter pour cela.

@zimmerboy, il y a un bouton "Ajouter votre réaction" en haut à droite de chaque commentaire, qui contient la réaction +1 (:+1:).

Ma solution de contournement dans beautify-css.js :

1. Remplacez la fonction 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. Remplacez les conditions et les instructions newline_between_rules par :

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

Remarque : Cela ne prend en compte que les retours à la ligne entre les règles, pas les règles après les propriétés. Quelqu'un a des idées là dessus ?

@sickboy - Cool, lancez une pull request, ajoutez des tests. N'hésitez pas à faire avancer ce dossier.

Cela arrive-t-il bientôt? C'est mon seul bloqueur pour utiliser beautify pour insolent.

@mrahhal - Le problème date de près de deux ans. Il semble que @sickboy ait travaillé là-dessus. Quelqu'un a juste besoin de faire une pull request avec des tests.

Peut-être aimeriez-vous faire cela? Voir CONTRIBUTION.md .

@bitwiseman malheureusement, je n'ai pas l'expérience de ce genre de projets ni le temps. Mais ma question est la suivante : est-ce que tout le monde utilise du css simple ou s'en tient-il simplement au fonctionnement du formatage actuel ? C'est bizarre pour un problème très ancien mais facile à résoudre.

@sickboy êtes-vous là-dessus ? Peut-être que je vais m'y attaquer après tout si personne n'est actif là-dessus. Mis à part un comportement étrange avec "max_preserve_newlines", c'est vraiment la seule chose qui manque qui m'empêche complètement d'utiliser beautify.

Je me demande si la pull request #1117 ( ajout de preserve_newlines pour css ) va aider avec ça.

@zimmerboy oui, cela semble être une solution au problème actuel, mais d'un type différent, je pense.

Le #1117 va-t-il être fusionné ? Il semble également répondre à ce problème.

@jorgeramirez -

@bitwiseman super !

Les mises à jour?

@royduin - veuillez tester avec la dernière version.

Cela semble bien fonctionner mais il y a un petit problème avec les commentaires. Je sais que Bootstrap SCSS n'est pas un bon exemple, mais quand même.

Voici comment le code est formaté sur le dépôt :

Et c'est après l'embellissement :

Cela fonctionne comme prévu mais les commentaires se chevauchent avec la déclaration précédente, mais si les commentaires sont correctement formatés, cela fonctionne bien :

Encore une fois, ce n'est pas vraiment important, mais Bootstrap est largement utilisé :confused:

@stgogm
Veuillez déposer un nouveau problème.
Veuillez également inclure du texte et non des images.

@bitwiseman D'accord, désolé. Je voulais juste noter que ce n'est pas vraiment un problème si vous respectez les règles de linter SCSS.

@stgogm - Cool, merci pour l'info. ??

@stgogm pendant que vous l'avez configuré, pourriez-vous tester le problème newline_between_rules imbriqué ? Avec

newline_between_rules: true

Est-ce que ton

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

devenir

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

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

?

En fait, ça ne change rien :

Code tel qu'il a été créé (sans nouvelle ligne entre les deux) :

form {
  display: block;
}

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

Après embellir avec "newline_between_rules": false :

form {
  display: block;
}

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

Après embellir avec "newline_between_rules": true :

form {
  display: block;
}

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

Il vient de supprimer l'espace entre les + .

js-beautify --version
1.6.12

Merci @stgogm ! Donc non @bitwiseman #1146 n'a pas

Un autre exemple où "newline_between_rules" n'est pas suffisant pour SCSS :

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

Le formatage de ce SCSS n'ajoute pas de nouvelle ligne entre la variable et le sélecteur div.

Est-ce clair quand cette fonctionnalité sera disponible ?

A-t-il des progrès ?

@dehghani-mehdi @whxaxes
Cette fonction n'est pas attribuée. Il a besoin de quelqu'un pour l'implémenter et ajouter des tests.

+1

+1

+1

+1

+1

Veuillez voter avec une réaction 👍 au message initial plutôt que des messages +1 - cela ne spammera pas les abonnés. Merci!