Less.js: Selektor hilang saat menggunakan peta sumber, plugin, dan mengompilasi lebih sedikit file secara paralel

@TopGrd Itu benar-benar tidak cukup untuk melanjutkan, terutama ketika itu adalah kesalahan dalam paket yang tidak dipelihara oleh Less. Bisakah Anda membuat repo tes dengan kasus uji minimal? Juga, apakah kesalahan ini terjadi ketika hanya menggunakan lessc untuk mengkompilasi kode Less Anda?

Mengalami masalah serupa dengan v3.13.0 - 3.12.2 juga berfungsi untuk saya.

Ini adalah proyek yang sangat besar, jadi hampir tidak mungkin untuk menemukan di mana dalam file yang lebih sedikit ini terjadi.

@endbay @TopGrd

Saya tidak yakin apa yang diharapkan di sini. Tanpa contoh yang dapat direproduksi, dan dengan kesalahan yang tidak muncul di Less itu sendiri, tidak ada harapan dalam resolusi. Seseorang perlu menyetel breakpoint pada kesalahan itu dan melihat pemilih apa yang diharapkan dan mengapa tidak ada.

@Top

Satu petunjuk, kode Less ini tidak valid:

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

@root-name: business-bundle tidak memiliki titik koma. Jadi bisa jadi Anda memiliki beberapa pustaka berlapis di atas Less yang mengharapkan kesalahan, tidak menemukannya, dan mencoba untuk melanjutkan dan mengurai keluaran Less, tetapi gagal dengan kesalahan "pemilih hilang" ini. Itu hanya tebakan, karena saya tidak punya repo untuk dilihat.

Saya mengalami masalah serupa di 3.13.0. (Masih mencoba mencari reproduksi minimal.)

Kode terkait terlihat seperti:

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

Yang dikompilasi sebagai:

{
  color: red;
}

:hover {
  color: blue;
}

Aneh kalau tidak terjadi kesalahan kompilasi.

@ matthew-dean Ini adalah proyek yang sangat besar di mana kesalahan terjadi. Saya mencoba mereproduksinya dalam demo

@Top

Satu petunjuk, kode Less ini tidak valid:

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

@root-name: business-bundle tidak memiliki titik koma. Jadi bisa jadi Anda memiliki beberapa pustaka berlapis di atas Less yang mengharapkan kesalahan, tidak menemukannya, dan mencoba untuk melanjutkan dan mengurai keluaran Less, tetapi gagal dengan kesalahan "pemilih hilang" ini. Itu hanya tebakan, karena saya tidak punya repo untuk dilihat.

@ root-name: business-bundle; Maaf, ini kode saya. Ini memiliki titik koma.

Saya mengalami masalah serupa di 3.13.0. (Masih mencoba mencari reproduksi minimal.)

Kode terkait terlihat seperti:

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

Yang dikompilasi sebagai:

{
  color: red;
}

:hover {
  color: blue;
}

Aneh kalau tidak terjadi kesalahan kompilasi.

Saya menggunakan style-resources-loader untuk memasukkan beberapa variabel global juga. Mungkin ada hubungannya dengan itu?

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

Kode saya:

debugger less.render output: tanpa selektor

Variabel @{bundle-root-class} adalah settingBundle . Sepertinya variabel di baris pertama tidak dikompilasi?

Masih belum bisa menemukan reproduksi sederhana. Sangat aneh bahwa ketika penggantian modul panas dipicu dan output yang dikompilasi dari file yang diubah tampaknya benar. Dan masalahnya hanya terjadi pada interpolasi pemilih:

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

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

Dikompilasi ke:

{
  val: foo;
}

(Perhatikan bahwa seluruh pemilih hilang, tidak hanya bagian yang diinterpolasi.)

@JAV_banget

output yang dikompilasi dari file yang diubah tampaknya benar

Dapatkah Anda mengembangkannya sedikit lagi? Keluaran yang dikompilasi dari Less tampaknya benar, tetapi tidak diganti dengan benar?

Sangat aneh bahwa ketika penggantian modul panas dipicu dan output yang dikompilasi dari file yang diubah tampaknya benar.

@Justineo Ini adalah petunjuk yang berguna. Kemungkinan terkait dengan resolusi ini: https://github.com/less/less.js/issues/3434

Singkatnya, cache pohon telah dihapus dari Less untuk sementara waktu, tetapi tampaknya memiliki terlalu banyak dampak kinerja negatif dalam beberapa skenario, jadi saya memasukkannya kembali. Bisa jadi Less karena itu tidak mengatur ulang beberapa status pohon impor , yang HANYA menyebabkan masalah dalam lingkungan "langsung" di mana less.parse dipanggil beberapa kali. Hmm, saya ingin tahu apakah saya bisa menguji teori itu dalam reproduksi.

@Dimas_dimas @dimas_depok @dimas_depok @dimas_depok @dimas_depok

Sayangnya, saya masih tidak dapat mereproduksi masalah ini, jadi masalah ini tidak dapat di-debug. ☹️ Jika seseorang dapat membuat repo yang mudah direproduksi, saya bisa melangkah melewatinya.

Saya mengalami masalah serupa di 3.13.0. (Masih mencoba mencari reproduksi minimal.)
Kode terkait terlihat seperti:

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

Yang dikompilasi sebagai:

{
  color: red;
}

:hover {
  color: blue;
}

Aneh kalau tidak terjadi kesalahan kompilasi.

Saya menggunakan style-resources-loader untuk memasukkan beberapa variabel global juga. Mungkin ada hubungannya dengan itu?

{
  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

Lebih sedikit @plugin + source akan menyebabkan masalah ini

@dekan_hakim

@PengJiyuan Dapatkah Anda membuat contoh yang dapat direproduksi dalam repo yang dapat digandakan?

+1

Saya pikir masalahnya disebabkan oleh kode ini. Node pohon memiliki fileInfo yang salah Dalam kasus paralel, yang menyebabkan inputSource tidak ditentukan.

+1

Saya pikir masalahnya disebabkan oleh kode ini. Node pohon memiliki fileInfo yang salah Dalam kasus paralel, yang menyebabkan inputSource tidak ditentukan.

@ matthew-dean Tunggu sebentar, kita buat repo mini. Kami telah menemukan baris kode ini, berharap dapat membantu Anda menyelesaikannya dengan cepat ...

+1

Saya pikir masalahnya disebabkan oleh kode ini. Node pohon memiliki fileInfo yang salah Dalam kasus paralel, yang menyebabkan inputSource tidak ditentukan.

Baris kode ini sudah muncul sejak 3.10.0

@PengJiyuan Dapatkah Anda membuat contoh yang dapat direproduksi dalam repo yang dapat digandakan?

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

Repo ini dapat mereproduksi masalah. Anda dapat menjalankan dengan 'npm run build', lalu lihat hasilnya di folder dist.

@PengJiyuan Dapatkah Anda membuat contoh yang dapat direproduksi dalam repo yang dapat digandakan?

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

Repo ini dapat mereproduksi masalah. Anda dapat menjalankan dengan 'npm run build', lalu lihat hasilnya di folder dist.

@ dekan

@ matthew-dean Kami menggunakan @plugin dan itu mempengaruhi semua proyek kami, tolong bantu kami 🙏

@PengJiyuan Anda benar, kode yang dimaksud seharusnya tidak gagal mengeluarkan potongan jika pembuatan peta sumber tidak berfungsi. Ini harus seperti:

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

Itu akan menjadi perbaikan jangka pendek, dengan perbaikan jangka panjang yang mencari tahu mengapa salah satu file memiliki pemetaan impor yang salah. (Ini mungkin digunakan kembali saat dikompilasi secara paralel.)

Jadi saya bisa melakukan solusi bantuan pita sementara segera, dan mencari tahu penyebabnya setelahnya.

@PengJiyuan @kirazxyun @Justineo dll silakan coba pengujian dengan [email protected]

Masalah diselesaikan dengan [email protected]. Terima kasih Matt!

@ matthew-dean Berhasil, terima kasih 🙏

@ matthew-dean mengonfirmasi bahwa masalah diselesaikan dengan [email protected] , berharap untuk rilis resmi segera

Ini diselesaikan dengan [email protected].

3.13.1 diterbitkan

4.0.0 juga diterbitkan, yang berisi perbaikan ini.