Less.js: Seletor ausente ao usar mapas de origem, plug-ins e compilar arquivos Less em paralelo

@TopGrd Isso realmente não é suficiente para continuar, especialmente quando é um erro em um pacote que Less não mantém. Você pode fazer um repositório de teste com um caso de teste mínimo? Além disso, esse erro ocorre ao usar apenas lessc para compilar seu código Less?

Tendo um problema semelhante com v3.13.0 - 3.12.2 funcionando para mim também.

É um projeto enorme, então quase impossível encontrar onde no menos arquivo isso aconteceu.

@endbay @TopGrd

Não tenho certeza do que é esperado aqui. Sem nenhum exemplo reproduzível e com o erro não lançado no próprio Less, não há esperança de uma solução. Alguém precisará definir um ponto de interrupção nesse erro e ver qual seletor era esperado e por que ele não está presente.

@TopGrd

Uma dica, este código Less é inválido:

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

@root-name: business-bundle está sem ponto e vírgula. Portanto, pode ser que você tenha alguma biblioteca sobreposta a Less que está esperando um erro, não encontra um e tenta prosseguir e analisar a saída de Less, mas falha com esse erro de "seletor ausente". Isso é apenas um palpite, já que não tenho repositório para examinar.

Estou enfrentando um problema semelhante no 3.13.0. (Ainda tentando descobrir uma reprodução mínima.)

O código relacionado é semelhante a:

// 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 é compilado como:

{
  color: red;
}

:hover {
  color: blue;
}

É estranho que nenhum erro de compilação tenha ocorrido.

@ matthew-dean É um projeto muito grande onde ocorreu um erro. Estou tentando reproduzi-lo em uma demonstração

@TopGrd

Uma dica, este código Less é inválido:

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

@root-name: business-bundle está sem ponto e vírgula. Portanto, pode ser que você tenha alguma biblioteca sobreposta a Less que está esperando um erro, não encontra um e tenta prosseguir e analisar a saída de Less, mas falha com esse erro de "seletor ausente". Isso é apenas um palpite, já que não tenho repositório para examinar.

@ nome-raiz: pacote comercial; Desculpe, este é o meu código. Tem um ponto e vírgula.

Estou enfrentando um problema semelhante no 3.13.0. (Ainda tentando descobrir uma reprodução mínima.)

O código relacionado é semelhante a:

// 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 é compilado como:

{
  color: red;
}

:hover {
  color: blue;
}

É estranho que nenhum erro de compilação tenha ocorrido.

Eu uso style-resources-loader para injetar algumas variáveis ​​globais também. Talvez tenha algo a ver com isso?

{
  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',
          },
    },
  ],
},

Meu código:

depurador less.render output: sem seletor

A variável @{bundle-root-class} é settingBundle . Parece que as variáveis ​​da primeira linha não foram compiladas?

Ainda não consigo encontrar uma reprodução simples. É muito estranho quando a substituição de módulo a quente é acionada e a saída compilada do arquivo alterado parece estar correta. E o problema só ocorre com a interpolação do seletor:

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

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

Compila para:

{
  val: foo;
}

(Observe que todo o seletor está faltando, não apenas a parte interpolada.)

@Justineo

a saída compilada do arquivo alterado parece estar correta

Você pode expandir um pouco mais? A saída compilada de Less parece estar correta, mas não está sendo substituída corretamente?

É muito estranho quando a substituição de módulo a quente é acionada e a saída compilada do arquivo alterado parece estar correta.

@Justineo Esta é uma pista útil. Provavelmente está relacionado à resolução disso: https://github.com/less/less.js/issues/3434

Resumindo, o cache da árvore foi removido do Less por um tempo, mas parecia ter um impacto muito negativo no desempenho em alguns cenários, então eu o coloquei de volta. Pode ser que o Less não esteja redefinindo algum estado das árvores de importação , que SOMENTE causa um problema em um ambiente "ativo", onde less.parse é chamado várias vezes. Hmm, eu me pergunto se posso testar essa teoria em uma reprodução.

@Justineo @TopGrd @endbay

Infelizmente, ainda não consigo reproduzir esse problema, então ele não pode ser depurado. ☹️ Se alguém puder fazer um repositório onde seja facilmente reproduzível, eu poderia examiná-lo.

Estou enfrentando um problema semelhante no 3.13.0. (Ainda tentando descobrir uma reprodução mínima.)
O código relacionado é semelhante a:

// 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 é compilado como:

{
  color: red;
}

:hover {
  color: blue;
}

É estranho que nenhum erro de compilação tenha ocorrido.

Eu uso style-resources-loader para injetar algumas variáveis ​​globais também. Talvez tenha algo a ver com isso?

{
  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 Você pode criar um exemplo reproduzível em um repositório clonável?

+1

Acho que o problema é causado por esse código. O nó da árvore tem fileInfo errado No caso de paralelo, o que faz com que o inputSource seja indefinido.

+1

Acho que o problema é causado por esse código. O nó da árvore tem fileInfo errado No caso de paralelo, o que faz com que o inputSource seja indefinido.

@matthew-dean Espere um minuto, criamos um mini repo. Localizamos esta linha de código, esperamos ajudá-lo a resolvê-lo rapidamente ...

+1

Acho que o problema é causado por esse código. O nó da árvore tem fileInfo errado No caso de paralelo, o que faz com que o inputSource seja indefinido.

Esta linha de código apareceu desde 3.10.0

@PengJiyuan Você pode criar um exemplo reproduzível em um repositório clonável?

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

Este repo pode reproduzir o problema. Você pode executar com 'npm run build', então ver os resultados na pasta dist.

@PengJiyuan Você pode criar um exemplo reproduzível em um repositório clonável?

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

Este repo pode reproduzir o problema. Você pode executar com 'npm run build', então ver os resultados na pasta dist.

@ matthew-dean

@ matthew-dean Usamos @plugin e isso afeta todos os nossos projetos, ajude-nos 🙏

@PengJiyuan Você está certo, o código em questão não deve falhar na saída do trecho se a construção do mapa de origem não funcionar. Deve ser assim:

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

Essa seria uma correção de curto prazo, com a correção de longo prazo sendo descobrir por que um dos arquivos tem um mapeamento de importação incorreto. (Provavelmente está sendo reutilizado quando compilado em paralelo.)

Assim, posso fazer a solução temporária do band-aid em breve e descobrir a causa depois.

@PengJiyuan @kirazxyun @Justineo etc, tente testar com [email protected]

Problema resolvido com [email protected]. Obrigado Matt!

@ matthew-dean Funciona, obrigado 🙏

@ matthew-dean confirma que o problema foi resolvido com [email protected] , esperando por um lançamento oficial em breve

Ele é resolvido com [email protected].

3.13.1 publicado

4.0.0 também é publicado, que contém essa correção.