Less.js: Falta el selector al usar mapas de origen, complementos y compilar archivos Less en paralelo

@TopGrd Eso realmente no es suficiente para continuar, especialmente cuando es un error en un paquete que Less no mantiene. ¿Puedes hacer un repositorio de prueba con un caso de prueba mínimo? Además, ¿se produce este error cuando solo usa lessc para compilar su código Less?

Tener un problema similar con v3.13.0 - 3.12.2 también funciona para mí.

Es un proyecto enorme, por lo que es casi imposible encontrar en qué parte del archivo menos sucedió esto.

@endbay @TopGrd

No estoy seguro de lo que se espera aquí. Sin un ejemplo reproducible, y con el error no incluido en Less, no hay esperanza en una resolución. Alguien deberá establecer un punto de interrupción en ese error y ver qué selector se esperaba y por qué no está presente.

@TopGrd

Una pista, este código Less no es válido:

    @root-name: business-bundle
    /* other file */
    .@{root-name} .wrapper{
        /* css... */
    }

@root-name: business-bundle le falta un punto y coma. Por lo tanto, podría ser que tenga una biblioteca en capas sobre Less que espera un error, no encuentra uno e intenta seguir adelante y analizar la salida de Less, pero falla con este error de "selector faltante". Eso es solo una suposición, ya que no tengo ningún repositorio para mirar.

Estoy experimentando un problema similar en 3.13.0. (Todavía estoy tratando de encontrar una reproducción mínima).

El código relacionado se ve así:

// button.less
<strong i="7">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="10">@import</strong> "./vars"; // where <strong i="11">@prefix</strong> is defined

Que se compila como:

{
  color: red;
}

:hover {
  color: blue;
}

Es extraño que no haya ocurrido ningún error de compilación.

@ matthew-dean Es un proyecto muy grande en el que se produjo un error. Estoy intentando reproducirlo en una demostración.

@TopGrd

Una pista, este código Less no es válido:

  @root-name: business-bundle
    /* other file */
  .@{root-name} .wrapper{
      /* css... */
  }

@root-name: business-bundle le falta un punto y coma. Por lo tanto, podría ser que tenga una biblioteca en capas sobre Less que espera un error, no encuentra uno e intenta seguir adelante y analizar la salida de Less, pero falla con este error de "selector faltante". Eso es solo una suposición, ya que no tengo ningún repositorio para mirar.

@ nombre-raíz: paquete-empresa; Lo siento, este es mi código. Tiene un punto y coma.

Estoy experimentando un problema similar en 3.13.0. (Todavía estoy tratando de encontrar una reproducción mínima).

El código relacionado se ve así:

// button.less
<strong i="8">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="11">@plugin</strong> "~some-less-plugin"; // where <strong i="12">@prefix</strong> is injected which preprocessing plugins

Que se compila como:

{
  color: red;
}

:hover {
  color: blue;
}

Es extraño que no haya ocurrido ningún error de compilación.

También uso style-resources-loader para inyectar algunas variables globales. ¿Quizás tenga algo que ver con eso?

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

Mi código:

depurador less.render salida: sin selector

La variable @{bundle-root-class} es settingBundle . ¿Parece que las variables de la primera línea no están compiladas?

Todavía no puedo encontrar una reproducción simple. Es muy extraño que cuando se activa el reemplazo del módulo en caliente y la salida compilada del archivo cambiado parece ser correcta. Y el problema solo ocurre para la interpolación del selector:

<strong i="6">@import</strong> "./lib.less";

.@{prefix}-button {
  val: @prefix;
}

Compila para:

{
  val: foo;
}

(Tenga en cuenta que falta todo el selector, no solo la parte interpolada).

@Justineo

la salida compilada del archivo modificado parece ser correcta

¿Puedes ampliar esto un poco más? La salida compilada de Less parece ser correcta, pero ¿no se reemplaza correctamente?

Es muy extraño que cuando se activa el reemplazo del módulo en caliente y la salida compilada del archivo cambiado parece ser correcta.

@Justineo Esta es una pista útil. Es probable que esté relacionado con la resolución de esto: https://github.com/less/less.js/issues/3434

En resumen, el almacenamiento en caché de árboles se eliminó de Less durante un tiempo, pero parecía tener demasiado impacto negativo en el rendimiento en algunos escenarios, así que lo volví a colocar. Podría ser que Less, por lo tanto, no restablezca algún estado de los árboles de importación. , que SOLO causa un problema en un entorno "en vivo" donde se llama a less.parse varias veces. Mmm, me pregunto si puedo probar esa teoría en una reproducción.

@Justineo @TopGrd @endbay

Desafortunadamente, todavía no puedo reproducir este problema, por lo que no se puede depurar. ☹️ Si alguien puede hacer un repositorio donde sea fácilmente reproducible, podría revisarlo.

Estoy experimentando un problema similar en 3.13.0. (Todavía estoy tratando de encontrar una reproducción mínima).
El código relacionado se ve así:

// button.less
<strong i="9">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="12">@plugin</strong> "~some-less-plugin"; // where <strong i="13">@prefix</strong> is injected which preprocessing plugins

Que se compila como:

{
  color: red;
}

:hover {
  color: blue;
}

Es extraño que no haya ocurrido ningún error de compilación.

También uso style-resources-loader para inyectar algunas variables globales. ¿Quizás tenga algo que ver con eso?

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

+1

Menos @plugin + sourcemap causará este problema

@ matthew-dean 🙏

@PengJiyuan ¿Puedes crear un ejemplo reproducible en un repositorio clonable?

+1

Creo que el problema es causado por este código. El nodo del árbol tiene fileInfo incorrecto En el caso de paralelo, lo que hace que inputSource no esté definido.

+1

Creo que el problema es causado por este código. El nodo del árbol tiene fileInfo incorrecto En el caso de paralelo, lo que hace que inputSource no esté definido.

@ matthew-dean Espera un minuto, creamos un mini repositorio. Hemos localizado esta línea de código, esperamos poder ayudarlo a resolverlo rápidamente ...

+1

Creo que el problema es causado por este código. El nodo del árbol tiene fileInfo incorrecto En el caso de paralelo, lo que hace que inputSource no esté definido.

Esta línea de código ha aparecido desde 3.10.0

@PengJiyuan ¿Puedes crear un ejemplo reproducible en un repositorio clonable?

https://github.com/kirazxyun/less-question

Este repositorio puede reproducir el problema. Puede ejecutar con 'npm run build', luego ver los resultados en la carpeta dist.

@PengJiyuan ¿Puedes crear un ejemplo reproducible en un repositorio clonable?

https://github.com/kirazxyun/less-question

Este repositorio puede reproducir el problema. Puede ejecutar con 'npm run build', luego ver los resultados en la carpeta dist.

@ matthew-dean

@ matthew-dean Usamos @plugin y afecta a todos nuestros proyectos, por favor ayúdenos 🙏

@PengJiyuan Tienes razón, el código en cuestión no debería fallar al generar el fragmento si la construcción del mapa fuente no funciona. Debería ser como:

                if (inputSource === undefined) {
                    this._css.push(chunk);
                    return;
                }

Esa sería una solución a corto plazo, y la solución a más largo plazo sería averiguar por qué uno de los archivos tiene una asignación de importación incorrecta. (Probablemente se esté reutilizando cuando se compila en paralelo).

Entonces puedo hacer la solución temporal de curita pronto y descubrir la causa después.

@PengJiyuan @kirazxyun @Justineo, etc., intente probar con [email protected]

Problema resuelto con [email protected]. ¡Gracias Matt!

@ matthew-dean Funciona, gracias 🙏

@ matthew-dean confirman que el problema se resuelve con [email protected] , esperando un lanzamiento oficial pronto

Se resuelve con [email protected].

3.13.1 publicado

También se publica 4.0.0, que contiene esta corrección.