Less.js: Sélecteur manquant lors de l'utilisation de sourcemaps, de plugins et de la compilation de moins de fichiers en parallèle

@TopGrd Ce n'est vraiment pas suffisant pour continuer, surtout quand il s'agit d'une erreur dans un paquet que Less ne maintient pas. Pouvez-vous créer un dépôt de test avec un scénario de test minimal? De plus, cette erreur se produit-elle lorsque vous utilisez simplement lessc pour compiler votre code Less?

Avoir un problème similaire avec v3.13.0 - 3.12.2 fonctionne également pour moi.

C'est un projet énorme, donc presque impossible de trouver où cela s'est produit dans le moins de fichiers.

@endbay @TopGrd

Je ne suis pas sûr de ce qui est attendu ici. Sans exemple reproductible, et avec l'erreur non lancée dans Less lui-même, il n'y a aucun espoir dans une résolution. Quelqu'un devra définir un point d'arrêt à cette erreur et voir quel sélecteur était attendu et pourquoi il n'est pas présent.

@TopGrd

Un indice, ce code Less est invalide:

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

@root-name: business-bundle manque un point-virgule. Il se peut donc que vous ayez une bibliothèque superposée à Less qui attend une erreur, n'en trouve pas et essaie de continuer et d'analyser la sortie de Less, mais échoue avec cette erreur de "sélecteur manquant". C'est juste une supposition, puisque je n'ai aucun repo à regarder.

Je rencontre un problème similaire dans la version 3.13.0. (J'essaie toujours de trouver une reproduction minimale.)

Le code associé ressemble à ceci:

// 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

Qui est compilé comme:

{
  color: red;
}

:hover {
  color: blue;
}

C'est bizarre qu'aucune erreur de compilation ne se soit produite.

@ matthew-dean C'est un très gros projet où une erreur s'est produite. J'essaye de le reproduire dans une démo

@TopGrd

Un indice, ce code Less est invalide:

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

@root-name: business-bundle manque un point-virgule. Il se peut donc que vous ayez une bibliothèque superposée à Less qui attend une erreur, n'en trouve pas et essaie de continuer et d'analyser la sortie de Less, mais échoue avec cette erreur de "sélecteur manquant". C'est juste une supposition, puisque je n'ai aucun repo à regarder.

@ nom-racine: bundle-entreprise; Désolé, c'est mon code. Il a un point-virgule.

Je rencontre un problème similaire dans la version 3.13.0. (J'essaie toujours de trouver une reproduction minimale.)

Le code associé ressemble à ceci:

// 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

Qui est compilé comme:

{
  color: red;
}

:hover {
  color: blue;
}

C'est bizarre qu'aucune erreur de compilation ne se soit produite.

J'utilise style-resources-loader pour injecter également des variables globales. Peut-être que cela a quelque chose à voir avec ça?

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

Mon code:

débogueur less.render sortie: pas de sélecteur

La variable @{bundle-root-class} est settingBundle . Il semble que les variables de la première ligne ne sont pas compilées?

Je n'arrive toujours pas à trouver une simple reproduction. Il est très étrange que lorsque le remplacement du module à chaud est déclenché et que la sortie compilée du fichier modifié semble être correcte. Et le problème ne se produit que pour l'interpolation du sélecteur:

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

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

Compile vers:

{
  val: foo;
}

(Notez que tout le sélecteur est manquant, pas seulement la partie interpolée.)

@Justineo

la sortie compilée du fichier modifié semble être correcte

Pouvez-vous développer un peu plus cela? La sortie compilée de Less semble être correcte, mais elle n'est pas remplacée correctement?

Il est très étrange que lorsque le remplacement du module à chaud est déclenché et que la sortie compilée du fichier modifié semble être correcte.

@ Justineo C'est un indice utile. C'est probablement lié à la résolution de ceci: https://github.com/less/less.js/issues/3434

En bref, la mise en cache de l'arborescence a été supprimée de Less pendant un certain temps, mais elle semblait avoir trop d'impact négatif sur les performances dans certains scénarios, alors je l'ai remise en place. Il se peut que Less ne réinitialise pas certains états des arborescences d'importation , ce qui provoque UNIQUEMENT un problème dans un environnement "live" où less.parse est appelé plusieurs fois. Hmm, je me demande si je peux tester cette théorie dans une reproduction.

@Justineo @TopGrd @endbay

Malheureusement, je ne peux toujours pas reproduire ce problème, il n'est donc pas déboguable. ☹️ Si quelqu'un peut faire un repo où il est facilement reproductible, je pourrais le parcourir.

Je rencontre un problème similaire dans la version 3.13.0. (J'essaie toujours de trouver une reproduction minimale.)
Le code associé ressemble à ceci:

// 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

Qui est compilé comme:

{
  color: red;
}

:hover {
  color: blue;
}

C'est bizarre qu'aucune erreur de compilation ne se soit produite.

J'utilise style-resources-loader pour injecter également des variables globales. Peut-être que cela a quelque chose à voir avec ça?

{
  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

Moins de @plugin + sourcemap causera ce problème

@ matthew-dean 🙏

@PengJiyuan Pouvez-vous créer un exemple reproductible dans un dépôt clonable?

+1

Je pense que le problème est causé par ce code. Le nœud de l'arborescence a un fileInfo incorrect Dans le cas de parallel, ce qui fait que inputSource n'est pas défini.

+1

Je pense que le problème est causé par ce code. Le nœud de l'arborescence a un fileInfo incorrect Dans le cas de parallel, ce qui fait que inputSource n'est pas défini.

@ matthew-dean Attendez une minute, nous créons un mini repo. Nous avons localisé cette ligne de code, espérons vous aider à la résoudre rapidement ...

+1

Je pense que le problème est causé par ce code. Le nœud de l'arborescence a un fileInfo incorrect Dans le cas de parallel, ce qui fait que inputSource n'est pas défini.

Cette ligne de code est apparue depuis la 3.10.0

@PengJiyuan Pouvez-vous créer un exemple reproductible dans un dépôt clonable?

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

Ce dépôt peut reproduire le problème. Vous pouvez exécuter avec 'npm run build' ， puis afficher les résultats dans le dossier dist.

@PengJiyuan Pouvez-vous créer un exemple reproductible dans un dépôt clonable?

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

Ce dépôt peut reproduire le problème. Vous pouvez exécuter avec 'npm run build' ， puis afficher les résultats dans le dossier dist.

@ matthew-doyen

@ matthew-dean Nous utilisons @plugin et cela affecte tous nos projets, aidez-nous s'il vous plaît 🙏

@PengJiyuan Vous avez raison, le code en question ne devrait pas échouer dans la sortie du morceau si la création de la carte source ne fonctionne pas. Cela devrait ressembler à:

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

Ce serait une solution à court terme, la solution à plus long terme étant de déterminer pourquoi l'un des fichiers a un mappage d'importation incorrect. (Il est probablement réutilisé lorsqu'il est compilé en parallèle.)

Je peux donc bientôt faire la solution temporaire de pansement et en déterminer la cause par la suite.

@PengJiyuan @kirazxyun @Justineo etc s'il vous plaît essayez de tester avec [email protected]

Problème résolu avec [email protected]. Merci Matt!

@ matthew-dean Cela fonctionne, merci 🙏

@ matthew-dean confirme que le problème est résolu avec [email protected] , dans l'espoir d'une sortie officielle bientôt

Il est résolu avec [email protected].

3.13.1 publié

4.0.0 est également publié, qui contient ce correctif.