Repository: microsoft/griffel
Pull request #428 (2023-08-31 07:57:32)

chore: remove experimental_resetModuleIndexes
This PR removes `experimental_resetModuleIndexes` from `@griffel/webpack-extraction-plugin`. The suggestion is to use `ignoreOrder` with `mini-css-extract-plugin`, https://griffel.js.org/react/css-extraction/with-webpack#ignoreorder-option

github-actions[bot]: ## 📊 Bundle size report

<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/f693589081a01f31682571cd368da37765e49ac3'>f693589081a01f31682571cd368da37765e49ac3</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-webpack-extraction-plugin-f0a3ecf3-b091-4925-89ba-f47328169994.json b/change/@griffel-webpack-extraction-plugin-f0a3ecf3-b091-4925-89ba-f47328169994.json
new file mode 100644
index 0000000..3f24620
--- /dev/null
+++ b/change/@griffel-webpack-extraction-plugin-f0a3ecf3-b091-4925-89ba-f47328169994.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove experimental_resetModuleIndexes",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentA.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentA.ts
deleted file mode 100644
index d3e28e0..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentA.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useBarClasses } from './useBarStyles';
-import { useBazClasses } from './useBazStyles';
-
-export function ComponentA() {
-  return [useBazClasses(), useBarClasses()];
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentB.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentB.ts
deleted file mode 100644
index a28d05c..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/ComponentB.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useBarClasses } from './useBarStyles';
-import { useQuxClasses } from './useQuxStyles';
-
-export function ComponentB() {
-  return [useQuxClasses(), useBarClasses()];
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk1.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk1.ts
deleted file mode 100644
index 027577b..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk1.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ComponentA } from './ComponentA';
-import { ComponentB } from './ComponentB';
-
-export function App() {
-  return [ComponentA(), ComponentB()];
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk2.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk2.ts
deleted file mode 100644
index 4556acb..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/chunk2.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ComponentB } from './ComponentB';
-import { ComponentA } from './ComponentA';
-
-export function App() {
-  return [ComponentA(), ComponentB()];
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/code.ts
deleted file mode 100644
index fe07c45..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/code.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export async function lazy() {
-  const styles1 = await import(/* webpackChunkName: "chunk1" */ './chunk1');
-  const styles2 = await import(/* webpackChunkName: "chunk2" */ './chunk2');
-
-  return [styles1, styles2];
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/fs.json
deleted file mode 100644
index 73744c9..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/fs.json
+++ /dev/null
@@ -1,1 +0,0 @@
-["bundle.js", "chunk1.js", "chunk2.js", "griffel.css"]
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/output.css
deleted file mode 100644
index f1412ed..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/output.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/** griffel.css **/
-.fe3e8s9 {
-  color: red;
-}
-.fycuoez {
-  padding-left: 4px;
-}
-.f8wuabp {
-  padding-right: 4px;
-}
-.fcnqdeg {
-  background-color: green;
-}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBarStyles.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBarStyles.ts
deleted file mode 100644
index 78296ce..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBarStyles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { __styles } from '@griffel/react';
-
-export const useBarClasses = __styles(
-  {
-    root: { sj55zd: 'fe3e8s9' },
-  },
-  { d: ['.fe3e8s9{color:red;}'] },
-);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBazStyles.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBazStyles.ts
deleted file mode 100644
index c776c15..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useBazStyles.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { __styles } from '@griffel/react';
-
-export const useBazClasses = __styles(
-  {
-    root: {
-      uwmqm3: ['fycuoez', 'f8wuabp'],
-    },
-  },
-  {
-    d: ['.fycuoez{padding-left:4px;}', '.f8wuabp{padding-right:4px;}'],
-  },
-);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useQuxStyles.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useQuxStyles.ts
deleted file mode 100644
index 35f13b5..0000000
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks-order/useQuxStyles.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { __styles } from '@griffel/react';
-
-export const useQuxClasses = __styles(
-  {
-    root: {
-      De3pzq: 'fcnqdeg',
-    },
-  },
-  {
-    d: ['.fcnqdeg{background-color:green;}'],
-  },
-);
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts
index 4fccaf2..0a8dffe 100644
--- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts
+++ b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts
@@ -12,7 +12,6 @@ const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10;
 
 export type GriffelCSSExtractionPluginOptions = {
   compareMediaQueries?: GriffelRenderer['compareMediaQueries'];
-  experimental_resetModuleIndexes?: boolean;
   unstable_attachToMainEntryPoint?: boolean;
 };
 
@@ -93,50 +92,16 @@ function moveCSSModulesToGriffelChunk(compilation: Compilation) {
   }
 }
 
-/**
- * Updates indexes on chunk groups to follow module order. This makes order of CSS modules in chunks consistent in
- * chunk groups and prevents warnings in mini-css-extract-plugin.
- */
-function updateCSSModulePostIndexes(compilation: Compilation): void {
-  const griffelChunk = compilation.namedChunks.get('griffel');
-
-  if (typeof griffelChunk === 'undefined') {
-    return;
-  }
-
-  // https://github.com/webpack-contrib/mini-css-extract-plugin/blob/26334462e419026086856787d672b052cd916c62/src/index.js#L693-L697
-  const cssModules = compilation.chunkGraph.getChunkModulesIterableBySourceType(griffelChunk, 'css/mini-extract');
-
-  if (typeof cssModules === 'undefined') {
-    return;
-  }
-
-  for (const cssModule of cssModules) {
-    if (!isCSSModule(cssModule)) {
-      continue;
-    }
-
-    for (const group of griffelChunk.groupsIterable) {
-      group.setModulePostOrderIndex(cssModule, compilation.moduleGraph.getPostOrderIndex(cssModule));
-    }
-  }
-}
-
 export class GriffelCSSExtractionPlugin {
   static loader = require.resolve('./webpackLoader');
 
   private readonly attachToMainEntryPoint: NonNullable<
     GriffelCSSExtractionPluginOptions['unstable_attachToMainEntryPoint']
   >;
-  private readonly resetModuleIndexes: NonNullable<
-    GriffelCSSExtractionPluginOptions['experimental_resetModuleIndexes']
-  >;
   private readonly compareMediaQueries: NonNullable<GriffelCSSExtractionPluginOptions['compareMediaQueries']>;
 
   constructor(options?: GriffelCSSExtractionPluginOptions) {
     this.attachToMainEntryPoint = options?.unstable_attachToMainEntryPoint ?? false;
-    this.resetModuleIndexes = options?.experimental_resetModuleIndexes ?? false;
-
     this.compareMediaQueries = options?.compareMediaQueries ?? defaultCompareMediaQueries;
   }
 
@@ -220,10 +185,6 @@ export class GriffelCSSExtractionPlugin {
             attachGriffelChunkToMainEntryPoint(compilation, griffelChunk);
           }
         }
-
-        if (this.resetModuleIndexes) {
-          updateCSSModulePostIndexes(compilation);
-        }
       });
 
       // WHAT?


Test patch:
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
index eacf513..3cd61de 100644
--- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
+++ b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
@@ -293,11 +293,6 @@ describe('webpackLoader', () => {
   // --------------------
   testFixture('with-chunks');
 
-  // A fixture that creates a different modules order in different chunks groups
-  testFixture('with-chunks-order', {
-    pluginOptions: { experimental_resetModuleIndexes: true },
-  });
-
   // Unstable
   // --------------------
   testFixture('unstable-attach-to-main', {