feature: add support for adding prefix to CSS to scope down the styling about griffel

[layershifter]

This problem exists when there is an app with enabled CSS extraction and another app that uses runtime insertion on the same page (example: https://stackblitz.com/edit/stackblitz-starters-6gpxe7), i.e. multi bundle scenario.

Basically:

• App1 (runtime insertion) + App2 (runtime insertion) = 😐 (both bundles will insert rules, but rules will not collide)
• App1 (runtime insertion) + App2 (CSS extraction) = 💣 (blows up due order of CSS)

---

Workaround time

This is tricky, there are two ways:

• Change classes prefix Not an option as Fluent compiles styles, classes can't be changed in runtime
• Increase specificity on a renderer that does runtime insertion

The second option is more realistic as we just need to modify CSS rules. This can be done with createEnhancedRenderer() available below.

createEnhancedRenderer()

import { createDOMRenderer } from '@griffel/core';
import type { CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
import { serialize, compile, stringify } from 'stylis';

const ENHANCE_CACHE: Record<string, string> = {};

export function enhanceCSSRule(className: string, cssRule: string) {
  if (!ENHANCE_CACHE[className + cssRule]) {
    ENHANCE_CACHE[className + cssRule] = serialize(compile(`.${className} {${cssRule} }`), stringify);
  }

  return ENHANCE_CACHE[className + cssRule];
}

export const createEnhancedRenderer = (
  document: Document | undefined,
  options: CreateDOMRendererOptions & { specificityClassName: string },
): GriffelRenderer => {
  const { specificityClassName } = options;
  const originalRenderer = createDOMRenderer(document, options);

  return {
    ...originalRenderer,
    insertCSSRules(cssRules) {
      const rules = Object.fromEntries(
        Object.entries(cssRules).map(([bucketName, cssRulesInBucket]) => {
          return [
            bucketName,
            cssRulesInBucket.map(cssEntry => {
              if (typeof cssEntry === 'string') {
                return enhanceCSSRule(specificityClassName, cssEntry);
              }

              return [enhanceCSSRule(specificityClassName, cssEntry[0]), cssEntry[1]];
            }),
          ];
        }),
      );

      originalRenderer.insertCSSRules(rules);
    },
  };
};

Then it could be used like that:

 const renderer = createEnhancedRenderer(document, {
  specificityClassName: 'foo',
  // ❗ This is mandatory, runtime styles should be inserted before CSS stylesheet
  insertionPoint: document.head.firstChild,
});

<RendererProvider renderer={renderer}>
  <div className="foo">{/* children */}</div>
</RendererProvider>

All together: https://stackblitz.com/edit/vitejs-vite-d11ccd

Proper solution

We should stop compiling styles on library styles i.e. Fluent should ship not optimized styles, so we can process them in runtime/build time. This requires wider discussion as then by default, Fluent will become slower and will require AOT processing.

After that, we can implement the option mentioned in this feature request & consider API for processors/plugins.

[ling1726]

With the addition of shorthand support in #531 - This problem grows since we can no longer assume that one CSS class overrides one property at a time

Repro: https://stackblitz.com/edit/vitejs-vite-6f8fj5?file=src%2FApp.tsx,src%2FApp.css,package.json,src%2Fmain.tsx&terminal=dev

<style>
/* extracted-bundle-1.css */
.shorthand {
  margin: 1px;
}
.longhand {
  margin-left: 2px
}
/* extracted-bundle-2.css */
.shorthand {
  margin: 1px
}

</style>

<!-- from bundle-1.js 
<!-- ⚠️ you would expect "margin-left: 2px" to be applied but it's not -->
<div class="longhand shorthand"></div>