add webpack-resources and fix runtime error

microsoft · Nov 23, 2022 · 59a06af · 59a06af
1 parent 6a609e9
commit 59a06af
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "@types/stylis": "4.0.2",
     "@types/tmp": "0.2.3",
     "@types/webpack-env": "^1.17.0",
+    "@types/webpack-sources": "3.2.0",
     "@types/yargs": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "~5.3.0",
     "@typescript-eslint/parser": "~5.3.0",

diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json
@@ -17,6 +17,7 @@
   },
   "peerDependencies": {
     "@griffel/core": "^1.8.1",
-    "webpack": "^4.44.2 || ^5"
+    "webpack": "^4.44.2 || ^5",
+    "webpack-sources": "3.2.3"
   }
 }
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts
@@ -1,6 +1,7 @@
 import { defaultCompareMediaQueries, GriffelRenderer } from '@griffel/core';
 import { Compilation } from 'webpack';
 import type { Compiler, sources } from 'webpack';
+import { RawSource } from 'webpack-sources';
 
 import { sortCSSRules } from './sortCSSRules';
 
@@ -48,30 +49,29 @@ export class GriffelCSSExtractionPlugin {
     forceCSSIntoOneStyleSheet(compiler);
 
     compiler.hooks.compilation.tap('GriffelExtractPlugin', compilation => {
-      if (compilation.hooks.optimizeAssets) {
-        compilation.hooks.optimizeAssets.tap('GriffelExtractPlugin', assets =>
-          updateGriffelCSS(assets, compiler, compilation, this.compareMediaQueries),
-        );
-      } else {
+      if (compilation.hooks.processAssets) {
         compilation.hooks.processAssets.tap(
           {
             name: 'GriffelExtractPlugin',
             stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
           },
-          assets => updateGriffelCSS(assets, compiler, compilation, this.compareMediaQueries),
+          assets => updateGriffelCSS(compiler, compilation, this.compareMediaQueries),
+        );
+      } else {
+        compilation.hooks.optimizeAssets.tap('GriffelExtractPlugin', assets =>
+          updateGriffelCSS(compiler, compilation, this.compareMediaQueries),
         );
       }
     });
   }
 }
 
 const updateGriffelCSS = (
-  assets: Compilation['assets'],
   compiler: Compiler,
   compilation: Compilation,
   compareMediaQueries: GriffelRenderer['compareMediaQueries'],
 ) => {
-  const griffelAsset = Object.entries(assets).find(
+  const griffelAsset = Object.entries(compilation.assets).find(
     ([assetName]) => assetName.includes('griffel') && assetName.endsWith('.css'),
   );
 
@@ -82,8 +82,7 @@ const updateGriffelCSS = (
   const [assetName, assetSource] = griffelAsset;
   const unsortedCSSRules = getAssetSourceContents(assetSource);
   const sortedCSSRules = sortCSSRules(unsortedCSSRules, compareMediaQueries);
+  const { RawSource } = compiler.webpack.sources || require('webpack-sources');
 
-  const webpack = compiler.webpack ? compiler.webpack : require('webpack');
-
-  compilation.updateAsset(assetName, new webpack.sources.RawSource(sortedCSSRules));
+  compilation.updateAsset(assetName, new RawSource(sortedCSSRules));
 };
diff --git a/yarn.lock b/yarn.lock
@@ -6805,7 +6805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack-sources@npm:*":
+"@types/webpack-sources@npm:*, @types/webpack-sources@npm:3.2.0":
   version: 3.2.0
   resolution: "@types/webpack-sources@npm:3.2.0"
   dependencies:
@@ -14564,6 +14564,7 @@ __metadata:
     "@types/stylis": 4.0.2
     "@types/tmp": 0.2.3
     "@types/webpack-env": ^1.17.0
+    "@types/webpack-sources": 3.2.0
     "@types/yargs": ^17.0.10
     "@typescript-eslint/eslint-plugin": ~5.3.0
     "@typescript-eslint/parser": ~5.3.0
@@ -14620,6 +14621,7 @@ __metadata:
     tslib: ^2.1.0
     typescript: ~4.5.2
     url-loader: ^3.0.0
+    webpack-sources: 3.2.3
     yargs: ^17.5.1
   languageName: unknown
   linkType: soft
@@ -25720,6 +25722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-sources@npm:3.2.3, webpack-sources@npm:^3.0.2, webpack-sources@npm:^3.2.2, webpack-sources@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "webpack-sources@npm:3.2.3"
+  checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
+  languageName: node
+  linkType: hard
+
 "webpack-sources@npm:^1.2.0, webpack-sources@npm:^1.3.0, webpack-sources@npm:^1.4.0, webpack-sources@npm:^1.4.1, webpack-sources@npm:^1.4.3":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
@@ -25730,13 +25739,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^3.0.2, webpack-sources@npm:^3.2.2, webpack-sources@npm:^3.2.3":
-  version: 3.2.3
-  resolution: "webpack-sources@npm:3.2.3"
-  checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
-  languageName: node
-  linkType: hard
-
 "webpack-subresource-integrity@npm:^1.5.2":
   version: 1.5.2
   resolution: "webpack-subresource-integrity@npm:1.5.2"