Libsass: Agregar opción para controlar el comportamiento de importación en línea de CSS

Creado en 28 oct. 2015  ·  11Comentarios  ·  Fuente: sass/libsass

Hemos agregado la capacidad de insertar parciales @import CSS en línea. Esto es significativamente diferente del comportamiento de Ruby Sass (que no permite esto en absoluto) y es comprensible que cause dolor .

Necesitamos una opción de contexto para habilitar / deshabilitar esta función. Debería estar deshabilitado por defecto.

Bug - Confirmed Dev - PR Ready Invalid - Not in Sass

Comentario más útil

Como dijo @xzyfer , pruebe con un importador personalizado, tuve un problema en el que teníamos archivos .scss y archivos .css en el mismo directorio, y aquí está el importador que hice para node-sass

importer: function(url, prev, done) {
    // Use this to import scss files, instead of css ones
    let updatedUrl = url;
    if (!url.endsWith('.scss') && !url.endsWith('.css')) { // Also don't change ones already explicitly set to .css
        updatedUrl += '.scss';
    }
    grunt.verbose.writeln(`Changed ${url} into ${updatedUrl}`);
    done({file: updatedUrl});
}

Probado con node-sass 4.5.2 libsass 3.5.0-beta2

Todos 11 comentarios

Creo que la redacción es un poco engañosa. Solo permitimos importaciones de css parciales (las cosas que terminan con .css se dejarán como una importación real en el código). Además, Ruby Sass no permite esto de forma predeterminada, pero algunas herramientas (también AFAIK compass) lo habilitan de forma predeterminada para Ruby Sass. Tampoco estoy seguro de si realmente queremos deshabilitarlo de forma predeterminada, ya que este sería otro cambio potencialmente importante.

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end
Sass::Plugin.options[:filesystem_importer] = CSSImporter

Divulgación completa Sigo pensando que esta característica debería eliminarse. Nuestra directiva es hacer lo que hace Ruby Sass. Cualquier desviación de su implementación rompe la portabilidad y es indistinguible de un error.

Además, Ruby Sass no permite esto de forma predeterminada, pero algunas herramientas (también AFAIK brújula) lo habilitan de forma predeterminada para Ruby Sass

Este no es nuestro trabajo. Esto pertenece al ámbito de herramientas como Wellington y anteojos.

Tampoco estoy seguro de si realmente queremos deshabilitarlo de forma predeterminada.

Creo vehementemente que debería.

este sería otro cambio potencialmente rompedor

El comportamiento actual está roto en lo que respecta a los usuarios de Sass.

Supongo que está claro que estoy a favor de tener esta función y solo quería señalar que la falla se debe principalmente a que implementé el mensaje de error para importaciones ambiguas para libsass 3.3.0. Además de eso, solo diferimos de forma predeterminada en la resolución parcial (que también incluye la extensión css), y yo diría que normalmente no genera o tiene un css con el mismo nombre al lado de una importación _parcial_. No estoy seguro de cuándo implementaré eso como una opción en la C-API. Contribuyentes bienvenidos;)

Creo que la situación ideal sería que ambos admitieran esta característica. La siguiente mejor opción sería lo que dice

Debería poder cambiar de libsass a ruby ​​sass en teoría sin que nada se rompa. Tener algo que a sabiendas evitaría que esto suceda es algo malo.

Debería poder cambiar de libsass a ruby ​​sass en teoría sin que nada se rompa

Exactamente.

La siguiente mejor opción sería como dice

Eso es lo que haremos.

Sass 4.0 traerá una forma de hacer esto correctamente.

¡Fantástico! No puedo esperar.

@mgreter He hablado con @chriseppstein y @ nex3 sobre este problema. Hemos decidido que, aunque las importaciones de CSS en línea rompen la compatibilidad con Ruby Sass en gran medida, es probable que eliminar esta función moleste a los usuarios. Esta ha sido una característica solicitada durante mucho tiempo en Ruby Sass que no fue posible debido a las limitaciones de ser un superconjunto CSS. Como resultado, casi ciertas personas dependen de este comportamiento.

En su lugar, apuntemos a eliminar esto en 4.0, ya que los usuarios aceptan más los cambios importantes en las versiones principales y porque tendremos una forma oficial de importar CSS en línea.

Recientemente cambiamos a la última versión de Node desde una versión mucho más antigua y tuvimos que actualizar una biblioteca de terceros que estamos usando para que sea compatible con la versión actual de Node. Ahora las cosas están rotas por todas partes debido a este error. Entiendo que este problema aún no se ha resuelto en libsass, así que estoy tratando de averiguar de forma recursiva a qué versiones de nuestras dependencias tendríamos que volver para deshacernos de este problema.

Entonces, algunas preguntas (disculpas, si me perdí esta información aquí, este hilo es un poco complicado):

  1. ¿En qué versión de libsass se introdujo este error?
  2. ¿En qué versión está entrando la corrección - 3.5? 4.0?
  3. ¿Cuándo está programado el lanzamiento de esa versión? (¿O quizás ya ha sido lanzado?)

¿En qué versión de libsass se introdujo este error?

No puedo estar seguro. Creo que fue alrededor de 3.3.0 que está en [email protected].

¿En qué versión está entrando la corrección - 3.5? 4.0?

Esto se solucionará en 4.0 una vez que llegue @use . Permitirá a las personas optar explícitamente por las importaciones de CSS.

¿Cuándo está programado el lanzamiento de esa versión?

Imposible decirlo por desgracia. No es probable que sea este año.


Como acotación al margen, si está utilizando node-sass, puede escribir un importador personalizado para las importaciones de noop para archivos .css.

Como dijo @xzyfer , pruebe con un importador personalizado, tuve un problema en el que teníamos archivos .scss y archivos .css en el mismo directorio, y aquí está el importador que hice para node-sass

importer: function(url, prev, done) {
    // Use this to import scss files, instead of css ones
    let updatedUrl = url;
    if (!url.endsWith('.scss') && !url.endsWith('.css')) { // Also don't change ones already explicitly set to .css
        updatedUrl += '.scss';
    }
    grunt.verbose.writeln(`Changed ${url} into ${updatedUrl}`);
    done({file: updatedUrl});
}

Probado con node-sass 4.5.2 libsass 3.5.0-beta2

¿Fue útil esta página
0 / 5 - 0 calificaciones