Mengasingkan CSS dalam bahagian hadapan mikro apabila menggunakan perpustakaan yang sama dua kali

Question

Saya mempunyai beberapa aplikasi tindak balas bahagian hadapan mikro. Semua aplikasi adalah agnostik teknologi. Ini bermakna mana-mana aplikasi boleh mempunyai mana-mana perpustakaan sebagai kebergantungan. Mereka menggunakan pemalam kesatuan modul webpack. Jika aplikasi micro frontend lain mempunyai versi yang sama, kebergantungan akan dikongsi.

Aplikasi bahagian hadapan mikro dibahagikan kepada beberapa kumpulan: aplikasi bahagian hadapan mikro utama dan aplikasi bahagian hadapan sub mikro. Aplikasi utama adalah bekas untuk sub-aplikasi lain. Hanya satu subaplikasi boleh dijalankan pada satu masa.

Syarikat kami mempunyai UI-Kit dengan komponen tindak balas. Pustaka termasuk pembolehubah CSS, pemilih global (* {/* peraturan CSS */}).

Sub-aplikasi boleh menjadikan UI-Kit kami sebagai pergantungan. Jika versi UI-Kit berbeza, salah satu subaplikasi mungkin menggunakan gaya yang salah. Aliran Kerja (cara ia berfungsi): Saya membuka apl utama dalam penyemak imbas dan pek web memuatkan semua sumber (JS, CSS, fon) untuk halaman pertama apl utama. Selepas itu, saya membuka halaman menggunakan Sub app 1, webpack memuatkan sumber Sub app 1 dan memasukkannya ke dalam dokumen (gaya CSS akan dimasukkan ke dalam kepala dokumen). Kit UI kami mempunyai modul CSS, tetapi ini tidak mencukupi kerana nama kelas tidak dibuat berdasarkan kandungan peraturan CSS. Selain itu, pembolehubah CSS mungkin berubah dalam salah satu versi. Selain itu, sub-aplikasi mungkin tidak menggunakan UI-Kit kami, tetapi semua * peraturan CSS dalam UI-Kit akan digunakan pada sub-aplikasi. Selain itu, dua sub-aplikasi boleh menggunakan versi yang berbeza bagi perpustakaan yang sama dan perpustakaan boleh menggunakan CSS global atau modul.

Saya perlu menggunakan pengasingan CSS penuh untuk setiap aplikasi bahagian hadapan mikro.

Kali terakhir saya cuba menggunakan DOM bayangan yang menyokong pengasingan CSS penuh. Tetapi salah satu perpustakaan (cytoscapejs atau pemalamnya) memanggil kaedah document.getElementById. Ia mengembalikan null kerana elemen yang dicarinya sudah berada dalam akar bayang. Saya sedang menyiasat kes itu.

Sebelum ini, saya mempertimbangkan untuk menambah versi pada penghujung kelas modul CSS UI-Kit. Tetapi ia tidak menjadikan nama pembolehubah CSS unik. Selain itu, saya rasa saya tidak boleh menamakan semula kelas CSS perpustakaan luaran dari dalam binaan apl bahagian hadapan mikro saya.

Selain itu, saya tahu bahawa pemuat gaya boleh membenarkan menambah dan mengalih keluar teg gaya menggunakan kaedah "guna" dan "tidak digunakan". Saya boleh menggunakan ini untuk mengelakkan menimpa gaya dua sub-aplikasi. Tetapi mini-css-extract-plugin tidak mempunyai fungsi ini.

Saya boleh cuba menggunakan :has dan :not selectors, tetapi saya tidak mahu berurusan dengan banyak situasi CSS yang berbeza (* pemilih, pembolehubah css, dll.). Saya fikir ini adalah pendekatan yang salah.

Answer 1

Lihat pemalam PostCss Prefix Wrap, yang menambahkan pemilih pada gaya awalan CSS untuk membantu mengelakkan CSS daripada bocor dari satu bahagian hadapan mikro ke yang lain.

Untuk menggunakan pemalam, pasang dan panjangkan webpack.config anda seperti berikut:

const PrefixWrap = require('postcss-prefixwrap')
...
...
{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    postcssOptions: {
      plugins: [
        PrefixWrap('#mfe_id_<appname>', {
          nested: '&',
        })],
    },
  },
}

Sila patuhi penamaan #mfe_id_ dan tambahkan ID yang sama pada elemen paling atas dalam MFE.

Kelebihan

• Mudah untuk dilaksanakan dan berfungsi dengan peraturan CSS bersarang juga.
• Tidak perlu risau tentang awalan unsur akar (iaitu html, badan) Bertanggungjawab untuk ini oleh parameter prefixRootTags. Secara lalai, pilihan ini ialah Tetapkan kepada palsu, menunjukkan bahawa unsur akar tidak akan diawali. Tetapi akan digantikan dengan #mfe_id_ yang disediakan.

Keburukan

• Memerlukan PostCSS.