This is the second day of my participation in the August Text Challenge.More challenges in August

In the process of using the Qiankun framework to do micro front-end development, I encountered many difficulties, such as route redirection, conflict between variable name and event name, mount derealization mechanism and life cycle, keep-alive, etc. The most difficult problem I encountered at present may be CSS style pollution. This time out of a few days of time to study, then summed up this article

Issue an overview

After loading sub-applications, pollution would occur between styles of the master sub-applications. Common CSS style pollution is as follows:

  • Style isolation or not: The style of the master application contaminates the child application (cause: the style of the master application is added)! importantAttributes, or>>>Penetration properties)
  • Not style isolated: The styles of the child app pollute the main app (cause: the styles have the same name, and the post-loading has higher priority)
  • Handled style isolation: Child app popovers, drawers, popovers, and other DOM elements that need to be inserted into the body of the main app are missing or applied to the main project (reason: When the sandbox is turned on, the child’s style scope is only in the child, but as described, the child’s DOM is inserted into the body of the main application.)

The CSS sandbox in Qiankun

Personal understanding, the mechanism of loading sub-project CSS style is basically as follows: when mounting sub-application, the SUB-application CSS style will be inserted in the form of style label and made a snapshot, and when uninstalling sub-application, the style style in the snapshot will be deleted. Therefore, if the CSS sandbox isolation is not enabled during the loading of sub-applications, the styles loaded later may have an impact on the style of the whole system. For this, Qiankun provided two CSS sandbox functions to cover sub-application styles inside the sandbox container to achieve the purpose of style isolation. The general code is as follows:

this.microApp = loadMicroApp(
  { apps infos ... },
  {
    sandbox: {
      strictStyleIsolation: true // Strict sandbox
      experimentalStyleIsolation: true // Experimental sandbox}})Copy the code

1. Strict sandbox

When loading subapplications, add strictStyleIsolation: True attribute, which is implemented in the form of embedding the entire subapplication in Shadow DOM, completely isolating the master subapplication

Disadvantages:

  • Popovers, drawers, and popovers of child apps will be lost if the body of the main app is not found, or will be completely off-screen (the author didn’t go into detail on the reasons).
  • It’s not easy for the master app to modify the styles of its children

2. Experimental sandbox

In load application, add experimentalStyleIsolation: The true attribute is implemented in a form similar to the scoped attribute in the Style TAB in Vue, which automatically adds suffix tags to all styles of sub-applications such as div[data-Qiankun-Microname].

Disadvantages:

  • The child’s popovers, drawers, and popovers are inserted into the body of the main application, so the styles are lost or the main application styles are applied

Final solution

Having said so much about the CSS sandbox isolation in Qiankun, they all have their own disadvantages. In addition, for the implementation of the system, the scope of influence is still relatively serious, and the scope of code modification is also relatively large. In the author’s project, the master application is vUE project, and all use the style of Element home and each magic change, so we don’t open the CSS sandbox, to each project class global add a namespace, can own the project name, such as: MyVue body, myVue el-form-Info__label, myVue customClass, etc.

Code implementation

  1. Add the dependent
→ NPM I postcss-plugin-namespace -dCopy the code
  1. Configuration postcss

Create the postcss.config.js file in the project root directory and copy the following:

// console.log('=> => => postcss.config.js start => => =>')
module.exports = (ctx) = > {
  return {
    plugins: [
      require('postcss-plugin-namespace') ('#lee_project', {
        ignore: [
          'html'./body/.'span'.'el-form-item']}),]}}// console.log('=> => => postcss.config.js end => => =>')
Copy the code

The plugin prefixes all classes globally and filters out labels from ignore. Ignore can write strings and regular expressions. However, it will run before compiling, so it may increase the compilation time. Therefore, you can change the file name to something else in daily development environment. Remember to change the file name before debugging (if you directly hide the code, as long as you have the file postcss.config.js, Webpack will automatically execute it for you. And it will tell you that your postCSS is not doing anything, which means that the script is passed every time.

Note: The /body/ regex will filter out all classes with body, such as el-drawer__body, el-dialog__body, etc.

No Bug ~ wish you