UnprocessedStyles

import { Meta, Source } from '@storybook/addon-docs/blocks';

Unprocessed Styles (Raw Modules)

Overview

Fluent UI v9 components now ship with raw module alternatives to solve CSS style conflicts in multi-bundle applications. This feature addresses critical issues where Griffel-processed styles clash when multiple application bundles are loaded simultaneously.

The Problem: Style Clashes in Multi-Bundle Apps

Modern applications often split code into multiple bundles (main app bundle, CDN bundles, micro-frontends, etc.). When each bundle contains pre-processed Griffel styles, CSS class conflicts can occur:

<!-- Main bundle styles -->
<style>
  .order0 {
    padding: 10px;
  }
  .order1 {
    padding-left: 5px;
  }
</style>

<!-- CDN bundle styles (loaded later) -->
<style>
  .order0 {
    padding: 10px;
  } /* Overrides main bundle! */
</style>

<!-- Result: Expected padding-left: 5px, but got padding: 10px -->
<div className="order0 order1"></div>

The Solution: Raw Modules with Style Prefixing

Raw modules contain unprocessed Griffel styles that can be configured with unique prefixes at build time, preventing CSS conflicts:

<!-- With prefixed styles -->
<style>
  .main-order0 {
    padding: 10px;
  }
  .main-order1 {
    padding-left: 5px;
  }
</style>

<style>
  .cdn-order0 {
    padding: 10px;
  } /* No conflict! */
</style>

How to Use Raw Modules

Configure your bundler to prioritize .raw.js extension resolution:

Webpack Configuration:

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.raw.js', '...'],
  },
};

Vite Configuration:

// vite.config.js
export default {
  resolve: {
    extensions: ['.raw.js', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },
};

Package Support Status

Benefits

• ✅ Backward Compatible: Existing apps continue to work without changes
• ✅ Zero Breaking Changes: Raw modules are opt-in via bundler configuration
• ✅ Performance: Avoids CSS specificity hacks and runtime overhead
• ✅ Future-Proof: Enables style prefixing and better multi-bundle support

Learn More

• 📖 RFC: Stop pre-processing styles with Griffel
• 🐛 Griffel Issue #453
• 🐛 Griffel Issue #526