How is Garfish's style isolation mechanism implemented, and what are the common style isolation solutions?

Garfish's style isolation mechanism ensures that styles of different sub-applications do not interfere with each other, which is an important component of the micro-frontend architecture.

Style Isolation Solutions

1. CSS Scoping

• Principle: Add unique prefixes or suffixes to styles of each sub-application
• Implementation:
  • Use PostCSS plugins to automatically add scoping
  • Implement local scoping through CSS Modules
  • Use CSS-in-JS solutions (e.g., styled-components)
• Advantages: Simple to use, good compatibility
• Disadvantages: Requires additional build configuration
• Example:

javascript
// PostCSS configuration
module.exports = {
  plugins: [
    require('postcss-selector-prefix')({
      prefix: '[data-garfish-app="app1"]'
    })
  ]
};

2. Shadow DOM

• Principle: Use browser's native Shadow DOM technology to isolate styles
• Implementation:
  • Mount sub-applications to Shadow DOM containers
  • Styles only take effect within Shadow DOM
  • Automatically isolate global styles
• Advantages: Complete isolation, native browser support
• Disadvantages: Some browser compatibility issues, complex event bubbling handling
• Example:

javascript
// Create Shadow DOM container
const shadowRoot = container.attachShadow({ mode: 'open' });
// Mount sub-application to Shadow DOM
shadowRoot.appendChild(appElement);

3. Dynamic Stylesheet Management

• Principle: Load styles when sub-application mounts, remove when unmounts
• Implementation:
  • Dynamically create and delete <style> tags
  • Manage stylesheet loading and unloading
  • Avoid style residue
• Advantages: Flexible control, good performance
• Disadvantages: Requires manual management of style lifecycle
• Example:

javascript
// Dynamically load styles
function loadStylesheet(url) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
  return link;
}

// Remove styles when unloading
function unloadStylesheet(link) {
  document.head.removeChild(link);
}

4. CSS Naming Conventions

• Principle: Avoid style conflicts through naming conventions
• Implementation:
  • Use BEM naming convention
  • Set unique class name prefixes for each sub-application
  • Follow unified naming conventions
• Advantages: No additional tools needed, easy to understand
• Disadvantages: Relies on developer discipline, prone to errors
• Example:

css
/* Styles for sub-application app1 */
.app1__header { }
.app1__button { }
.app1__button--primary { }

Style Isolation Configuration

Garfish Configuration Example

javascript
Garfish.run({
  apps: [
    {
      name: 'app1',
      entry: '//localhost:3001',
      sandbox: {
        strictIsolation: true,
        styleIsolation: 'shadow-dom' // or 'scoped-css'
      }
    }
  ]
});

Best Practices

1. Choose Appropriate Isolation Solution

• Simple Projects: CSS scoping or naming conventions
• Complex Projects: Shadow DOM
• Mixed Scenarios: Combine multiple solutions

2. Global Style Handling

• Main application provides global base styles
• Sub-applications avoid using global selectors
• Use CSS variables for theme management

3. Third-Party Library Styles

• Use scoped versions
• Manually modify third-party library styles
• Consider using style isolation solutions

4. Performance Optimization

• Avoid duplicate style loading
• Use style compression
• Reasonably use CSS caching

5. Development Experience

• Provide style isolation debugging tools
• Support hot reloading
• Provide style conflict detection

Common Problem Solutions

1. Styles Not Taking Effect

• Check style isolation configuration
• Confirm style loading order
• Check selector specificity

2. Style Conflicts

• Use more specific selectors
• Adjust style isolation solution
• Check global style impact

3. Performance Issues

• Reduce style file size
• Optimize style loading strategy
• Use style caching

Through reasonable configuration of style isolation mechanisms, you can ensure style independence and maintainability of micro-frontend applications.