Isolieren von CSS in Mikro-Frontends bei zweimaliger Verwendung derselben Bibliothek

Question

Ich habe mehrere Micro-Frontend-Reaktionsanwendungen. Alle Anwendungen sind technologieunabhängig. Dies bedeutet, dass jede Anwendung eine beliebige Bibliothek als Abhängigkeit haben kann. Sie verwenden das Webpack-Modul-Union-Plugin. Wenn andere Micro-Frontend-Anwendungen dieselbe Version haben, wird die Abhängigkeit geteilt.

Mikro-Frontend-Anwendungen sind in mehrere Gruppen unterteilt: Haupt-Mikro-Frontend-Anwendungen und Sub-Mikro-Frontend-Anwendungen. Die Hauptanwendung ist ein Container für andere Unteranwendungen. Es kann jeweils nur eine Unteranwendung ausgeführt werden.

Unser Unternehmen verfügt über ein UI-Kit mit Reaktionskomponenten. Die Bibliothek umfasst CSS-Variablen und globale Selektoren (* {/* CSS-Regeln */}).

Unteranwendungen können unser UI-Kit als Abhängigkeit haben. Wenn die Versionen von UI-Kit unterschiedlich sind, wendet eine der Unteranwendungen möglicherweise die falschen Stile an. Arbeitsablauf (Funktionsweise): Ich öffne die Haupt-App im Browser und Webpack lädt alle Ressourcen (JS, CSS, Schriftarten) für die erste Seite der Haupt-App. Danach öffne ich die Seite mit Sub-App 1, Webpack lädt die Ressourcen von Sub-App 1 und fügt sie in das Dokument ein (die CSS-Stile werden in den Kopf des Dokuments eingefügt). Unser UI-Kit verfügt über CSS-Module, dies reicht jedoch nicht aus, da die Namen der Klassen nicht auf der Grundlage des Inhalts von CSS-Regeln erstellt werden. Darüber hinaus können sich CSS-Variablen in einer der Versionen ändern. Darüber hinaus verwendet die Unteranwendung möglicherweise nicht unser UI-Kit, aber alle * CSS-Regeln im UI-Kit gelten für die Unteranwendung. Darüber hinaus können zwei Unteranwendungen unterschiedliche Versionen derselben Bibliothek verwenden, und die Bibliothek kann globales oder Modul-CSS verwenden.

Ich muss für jede Micro-Frontend-Anwendung eine vollständige CSS-Isolation anwenden.

Das letzte Mal habe ich versucht, Shadow-DOM anzuwenden, das die vollständige CSS-Isolation unterstützt. Aber eine der Bibliotheken (cytoscapejs oder sein Plugin) ruft die Methode document.getElementById auf. Es gibt null zurück, da sich das gesuchte Element bereits im Schattenstamm befindet. Ich untersuche den Fall.

Vorher habe ich darüber nachgedacht, am Ende der CSS-Modulklasse von UI-Kit eine Version hinzuzufügen. Die Namen von CSS-Variablen werden dadurch jedoch nicht eindeutig. Außerdem glaube ich nicht, dass ich die CSS-Klassen einer externen Bibliothek innerhalb meines Micro-Frontend-App-Builds umbenennen kann.

Außerdem weiß ich, dass Style-Loader das Hinzufügen und Entfernen von Style-Tags mithilfe der Methoden „use“ und „unuse“ ermöglichen können. Damit kann ich verhindern, dass die Stile von zwei Unteranwendungen überschrieben werden. Das Mini-CSS-Extract-Plugin verfügt jedoch nicht über diese Funktion.

Ich könnte versuchen, :has- und :not-Selektoren zu verwenden, aber ich möchte mich nicht mit vielen verschiedenen CSS-Situationen auseinandersetzen (* Selektoren, CSS-Variablen usw.). Ich denke, das ist ein falscher Ansatz.

Answer 1

签出 PostCss Prefix Wrap 插件，它将选择器添加到 CSS 前面样式有助于防止 CSS 从一个微前端泄漏到另一个微前端。

为了使用该插件，请安装它并扩展您的 webpack.config，如下所示：

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

请遵守 #mfe_id_ 命名并将相同的 ID 添加到 MFE 中最顶部的元素。

优点

• 易于实现，并且也适用于嵌套 CSS 规则。
• 无需担心根（即 html、body）元素的前缀问题 由 prefixRootTags 参数负责。默认情况下，该选项是 设置为 false，表示根元素不会加前缀， 但将替换为提供的#mfe_id_。

缺点

• 需要使用 PostCSS。