Isoler CSS dans les micro-frontends lors de l'utilisation deux fois de la même bibliothèque

Question

J'ai plusieurs applications micro frontend React. Toutes les applications sont indépendantes de la technologie. Cela signifie que n’importe quelle application peut avoir n’importe quelle bibliothèque comme dépendance. Ils utilisent le plugin union du module webpack. Si d'autres applications micro frontend ont la même version, la dépendance sera partagée.

Les applications micro frontend sont divisées en plusieurs groupes : les principales applications micro frontend et les sous-applications micro frontend. L'application principale est un conteneur pour d'autres sous-applications. Une seule sous-application peut être exécutée à la fois.

Notre société dispose d'un UI-Kit avec des composants de réaction. La bibliothèque comprend des variables CSS, des sélecteurs globaux (* {/* règles CSS */}).

Les sous-applications peuvent avoir notre UI-Kit comme dépendance. Si les versions d'UI-Kit sont différentes, l'une des sous-applications peut appliquer les mauvais styles. Workflow (comment ça marche) : j'ouvre l'application principale dans le navigateur et webpack charge toutes les ressources (JS, CSS, polices) pour la première page de l'application principale. Après cela, j'ouvre la page en utilisant la sous-application 1, webpack charge les ressources de la sous-application 1 et les insère dans le document (les styles CSS seront insérés dans l'en-tête du document). Notre UI-kit dispose de modules CSS, mais cela ne suffit pas car les noms des classes ne sont pas créés en fonction du contenu des règles CSS. De plus, les variables CSS peuvent changer dans l'une des versions. De plus, la sous-application ne peut pas utiliser notre UI-Kit, mais toutes les règles * CSS de UI-Kit s'appliqueront à la sous-application. De plus, deux sous-applications peuvent utiliser différentes versions de la même bibliothèque, et la bibliothèque peut utiliser du CSS global ou de module.

Je dois appliquer une isolation CSS complète pour chaque application micro frontend.

La dernière fois, j'ai essayé d'appliquer le shadow DOM qui prend en charge l'isolation CSS complète. Mais l'une des bibliothèques (cytoscapejs ou son plugin) appelle la méthode document.getElementById. Il renvoie null car l'élément qu'il recherche se trouve déjà dans la racine fantôme. J'enquête sur l'affaire.

Avant cela, j'avais envisagé d'ajouter une version à la fin de la classe du module CSS d'UI-Kit. Mais cela ne rend pas les noms des variables CSS uniques. De plus, je ne pense pas pouvoir renommer les classes CSS d'une bibliothèque externe à partir de la version de ma micro-application frontend.

De plus, je sais que les chargeurs de style peuvent permettre d'ajouter et de supprimer des balises de style en utilisant les méthodes "use" et "unuse". Je peux l'utiliser pour éviter d'écraser les styles de deux sous-applications. Mais mini-css-extract-plugin n'a pas cette fonction.

Je pourrais essayer d'utiliser les sélecteurs :has et :not, mais je ne veux pas gérer beaucoup de situations CSS différentes (* sélecteurs, variables CSS, etc.). Je pense que c'est une mauvaise approche.

Answer 1

Découvrez le PostCss Prefix Wrap plugin, qui ajoute des sélecteurs aux styles de préfixes CSS pour aider à empêcher les CSS de fuir d'une micro-interface à une autre.

Pour utiliser le plugin, installez-le et étendez votre webpack.config comme suit :

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

Veuillez respecter le nom #mfe_id_ et ajouter le même identifiant à l'élément le plus haut du MFE.

Avantages

• Facile à mettre en œuvre et fonctionne également avec des règles CSS imbriquées.
• Pas besoin de vous soucier du préfixe de l'élément racine (c'est-à-dire html, body) Responsable de cela par le paramètre prefixRootTags. Par défaut, cette option est Défini sur false, indiquant que l'élément racine ne sera pas préfixé. Mais sera remplacé par le #mfe_id_ fourni.

Inconvénients

• Nécessite PostCSS.