Js-beautify: soporte newline_ between_rules para Sass (mejora)

¿Y cómo quieres que se vea?

Similar a la versión CSS https://github.com/beautify-web/js-beautify/pull/574
En general, un nivel de anidamiento es suficiente.
Aquí un ejemplo:

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

Hola,
¿Esto funciona para las reglas scss?

.precio anterior {
@include GibsonRegular ();
@incluir tamaño de fuente(14);
color: #646464;
margen izquierdo: 10px;
decoración de texto: línea directa;

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

}

+1

+1

+1

+1

¿tal vez una opción como newline_between_nested_rules: true ya que parece ser específicamente un problema con anidado?

} y ; necesitarían considerar la regla para nuevas líneas anidadas

+1, también por menos

+1

+1

Puedo confirmar que esto es realmente un problema solo con las reglas anidadas. Actual con newline_between_rules: true esto:

body {
  background-color: #FFF;

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

.container {
  color: blue;
}

Se convierte en esto:

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

.container {
  color: blue;
}

Y newline_between_rules: false este es el resultado:

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

Por lo tanto, se debe considerar el soporte para líneas nuevas entre reglas anidadas.

+1

Cualquier ETA en esta cosa?

+1

+1

+1 :(

+1

Otro +1

Lo siento por el ruido. No sabía si otra forma de votar esto.

@zimmerboy hay un botón "Agrega tu reacción" en la parte superior derecha de cada comentario, que contiene la reacción +1 (:+1:).

Mi solución en beautify-css.js :

1. Reemplace la función 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. Cambie las condiciones y declaraciones de newline_between_rules a:

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

Nota: Esto solo se ocupa de las líneas nuevas entre las reglas, no de las reglas después de las propiedades. Cualquiera algunas ideas sobre eso?

@sickboy - Genial, inicia una solicitud de extracción, agrega algunas pruebas. Por favor, siéntase libre de hacer avanzar esto.

¿Viene esto pronto? Es mi único bloqueador para usar beautify para sass.

@mrahhal : el problema tiene casi dos años. Parece que @sickboy ha trabajado un poco en esto. Alguien solo necesita hacer una solicitud de extracción con pruebas.

¿Quizás te gustaría hacer esto? Ver CONTRIBUCIÓN.md .

@bitwiseman desafortunadamente no tengo la experiencia con este tipo de proyectos ni el tiempo. Pero mi pregunta es, ¿todos usan css simple o simplemente se apegan a cómo funciona el formato actual? Eso es extraño para un problema muy antiguo pero fácil de resolver.

@sickboy ¿estás en esto? Quizás lo aborde después de todo si nadie está activo en esto. Aparte de un comportamiento extraño con "max_preserve_newlines", esto es realmente lo único que falta que me impide usar beautify.

Me pregunto si la solicitud de extracción # 1117 ( agregada preserve_newlines para css ) ayudará con esto.

@zimmerboy sí, eso parece ser una solución para el problema actual, pero creo que es diferente.

¿Se fusionará #1117? Parece que también aborda este problema.

@jorgeramirez : solo

@bitwiseman genial!

¿Alguna actualización?

@royduin : pruebe con la última versión.

Parece funcionar bien, pero hay un pequeño problema con los comentarios. Sé que Bootstrap SCSS no es un gran ejemplo, pero aun así.

Así es como se formatea el código en el repositorio:

Y esto es después de embellecer:

Funciona como se esperaba, pero los comentarios se superponen con la declaración anterior, pero si los comentarios tienen el formato correcto, funciona bien:

Nuevamente, no es nada realmente importante, pero Bootstrap se usa ampliamente: confundido:

@stgogm
Por favor presente un nuevo problema.
Además, incluya texto, no imágenes.

@bitwiseman Está bien, lo siento. Solo quería señalar que no es realmente un problema si respeta las reglas de linter de SCSS.

@stgogm - Genial, gracias por la información. 😄

@stgogm mientras lo tiene configurado, ¿podría probar el problema anidado de newline_between_rules ? Con

newline_between_rules: true

Tu

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

convertirse en

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

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

?

En realidad, no hace ninguna diferencia:

Código como autor (sin nueva línea en el medio):

form {
  display: block;
}

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

Después de embellecer con "newline_between_rules": false :

form {
  display: block;
}

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

Después de embellecer con "newline_between_rules": true :

form {
  display: block;
}

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

Simplemente eliminó el espacio entre los + .

js-beautify --version
1.6.12

¡Gracias @stgogm! Así que no, @bitwiseman #1146 no arregló esto

Otro ejemplo en el que "nueva línea_entre_reglas" no es suficiente para SCSS:

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

Formatear este SCSS no agrega una nueva línea entre la variable y el selector div.

¿Está claro cuándo estará disponible esta función?

¿Tiene algún avance?

@dehghani-mehdi @whxaxes
Esta función no está asignada. Necesita que alguien lo implemente y agregue pruebas.

+1

+1

+1

+1

+1

Vota con una reacción de 👍 a la publicación inicial en lugar de mensajes de +1; eso no enviará spam a los suscriptores. ¡Gracias!