feat(storybook): modularize CSS module support as pluggable preset config

[Hotell]

NOTE: all changes are consolidated in c56b5d1

Summary

Makes the CSS module "Show code" support from #36073 pluggable and zero-boilerplate — story authors just import a CSS module and everything works.

Before this change, every story file in #36073 required manual ?raw imports and a withCssModuleSource() call to register its CSS into the docs panel. Now the babel plugin has opt-in configuration to enable auto-detection of *.module.css imports at build time, and all configuration lives in a single PresetConfig object passed to the sandbox addon.

Architecture

flowchart TB
  subgraph "Consumer — stories/.storybook/main.js"
    MC["PresetConfig\n{ importMappings, cssModules: { tokensFilePath } }"]
  end

  subgraph "Addon — react-storybook-addon-export-to-sandbox"
    WP["webpack.ts\ncreates babel-loader rule"]
  end

  subgraph "Babel Plugin — babel-preset-storybook-full-source"
    FP["fullsource.ts\nAST walk → detects *.module.css imports"]
    MI["modifyImports.ts\nrewrites paths to ./styles/<basename>"]
  end

  subgraph "Output — Story Parameters (injected per-story)"
    P1["parameters.fullSource"]
    P2["parameters.cssModuleSources\n{ cssModules: [{name, source}], tokensSource }"]
  end

  subgraph "Runtime — HeadlessSourcePanel"
    HP["Reads parameters → renders tabbed code view"]
  end

  MC -->|"options"| WP
  WP -->|"[plugin, { importMappings, cssModules }]"| FP
  FP --> MI
  FP -->|"reads .module.css from disk"| P2
  FP -->|"injects cleaned source"| P1
  P1 --> HP
  P2 --> HP

Loading

flowchart LR
  subgraph "DRY Config (re-export pattern)"
    SP["stories/.storybook/main.js\n(source of truth)"]
    DP["apps/docsite/.storybook/main.js\n(extends stories config)"]
    SPV["stories/.storybook/preview.js\n(tokens, decorators, docs page)"]
    DPV["apps/docsite/.storybook/preview.js\n(extends stories preview)"]
  end

  DP --> SP
  DPV --> SPV

Loading

What changed (vs #36073)

Pluggable preset config

PresetConfig now accepts a cssModules option that flows through the addon's webpack preset into the babel plugin:

// stories/.storybook/main.js
loadWorkspaceAddon('@fluentui/react-storybook-addon-export-to-sandbox', {
  options: {
    importMappings: getImportMappingsForExportToSandboxAddon(),
    cssModules: { tokensFilePath: path.resolve(__dirname, 'tokens.css') },
  },
});

Auto-detection replaces manual wiring (opt in behind config flag)

The babel plugin walks each *.stories.tsx AST, finds *.module.css imports, reads them from disk, and injects parameters.cssModuleSources per-story.

✅ Result: 30 story files lost their boilerplate.

Before (each story file):

import { withCssModuleSource } from '../_helpers/withCssModuleSource';
import rawCss from './accordion.module.css?raw';

export default {
  ...withCssModuleSource({ rawCss, name: 'accordion.module.css' }),
};

After:

import classes from './accordion.module.css';

export default {
  title: 'Headless Components/Accordion',
  component: Accordion,
};

DRY storybook configs

The docsite app (apps/public-docsite-v9-headless) no longer duplicates webpack/preview setup — it re-exports from the stories package config and only adds deployment-specific overrides (stories paths, staticDirs, build.previewUrl, storySort).

Co-located storybook infrastructure

Moved into stories/.storybook/ (source of truth):

• tokens.css — design tokens (was theme/tokens.css)
• HeadlessDocsPage.tsx — custom docs page (was in app)
• HeadlessSourcePanel.tsx — tabbed code panel (was in app)
• headless-docs-page.css — docs page chrome (was in app)
• theme.js — Storybook theme (was in app)

The preview-stories package re-exports these for app consumption.

Removed dead code

Deleted	Reason
withCssModuleSource.ts + raw.d.ts	Replaced by auto-detection
cleanSource.ts	Inlined into fullsource plugin
rawQueryPlugin (esbuild)	No more ?raw imports in stories
?raw resourceQuery webpack guards	Unnecessary after Storybook 8 asset handling

Renamed parameter namespace

parameters.theme → parameters.cssModuleSources

• avoids collision with VR testing's parameters.theme (which carries Fluent theme objects like webDarkTheme)
• provides domain boundary related to css modules enablement

Test coverage

• 17 babel plugin fixture tests (new: css-module-auto-detect, css-module-with-tokens)
• 33 sandbox addon tests (updated for new cssModuleSources shape)
• SSR esbuild plugin unit tests (simplified after rawQueryPlugin removal)

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL