make webpack-extraction-plugin and webpack-loader support webpack v4

microsoft · Nov 22, 2022 · 6a609e9 · 6a609e9
1 parent 1162f14
commit 6a609e9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 29 deletions.
diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json
@@ -17,6 +17,6 @@
   },
   "peerDependencies": {
     "@griffel/core": "^1.8.1",
-    "webpack": "^5"
+    "webpack": "^4.44.2 || ^5"
   }
 }
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts
@@ -48,26 +48,42 @@ export class GriffelCSSExtractionPlugin {
     forceCSSIntoOneStyleSheet(compiler);
 
     compiler.hooks.compilation.tap('GriffelExtractPlugin', compilation => {
-      compilation.hooks.processAssets.tap(
-        {
-          name: 'GriffelExtractPlugin',
-          stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
-        },
-        assets => {
-          const griffelAsset = Object.entries(assets).find(([assetName]) => assetName.includes('griffel'));
-
-          if (!griffelAsset) {
-            return;
-          }
-
-          const [assetName, assetSource] = griffelAsset;
-
-          const unsortedCSSRules = getAssetSourceContents(assetSource);
-          const sortedCSSRules = sortCSSRules(unsortedCSSRules, this.compareMediaQueries);
-
-          compilation.updateAsset(assetName, new compiler.webpack.sources.RawSource(sortedCSSRules));
-        },
-      );
+      if (compilation.hooks.optimizeAssets) {
+        compilation.hooks.optimizeAssets.tap('GriffelExtractPlugin', assets =>
+          updateGriffelCSS(assets, compiler, compilation, this.compareMediaQueries),
+        );
+      } else {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'GriffelExtractPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
+          },
+          assets => updateGriffelCSS(assets, compiler, compilation, this.compareMediaQueries),
+        );
+      }
     });
   }
 }
+
+const updateGriffelCSS = (
+  assets: Compilation['assets'],
+  compiler: Compiler,
+  compilation: Compilation,
+  compareMediaQueries: GriffelRenderer['compareMediaQueries'],
+) => {
+  const griffelAsset = Object.entries(assets).find(
+    ([assetName]) => assetName.includes('griffel') && assetName.endsWith('.css'),
+  );
+
+  if (!griffelAsset) {
+    return;
+  }
+
+  const [assetName, assetSource] = griffelAsset;
+  const unsortedCSSRules = getAssetSourceContents(assetSource);
+  const sortedCSSRules = sortCSSRules(unsortedCSSRules, compareMediaQueries);
+
+  const webpack = compiler.webpack ? compiler.webpack : require('webpack');
+
+  compilation.updateAsset(assetName, new webpack.sources.RawSource(sortedCSSRules));
+};
diff --git a/packages/webpack-extraction-plugin/src/webpackLoader.ts b/packages/webpack-extraction-plugin/src/webpackLoader.ts
@@ -1,4 +1,4 @@
-import { getOptions } from 'loader-utils';
+import { getOptions, stringifyRequest } from 'loader-utils';
 import * as path from 'path';
 import { validate } from 'schema-utils';
 import * as webpack from 'webpack';
@@ -79,12 +79,20 @@ function webpackLoader(
 
   if (result) {
     if (result.cssRules) {
-      const request = `import ${JSON.stringify(
-        this.utils.contextify(
-          this.context || this.rootContext,
-          `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(result.cssRules.join('\n'))}`,
-        ),
-      )};`;
+      const request = this.utils
+        ? // webpack 5
+          `import ${JSON.stringify(
+            this.utils.contextify(
+              this.context || this.rootContext,
+              `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(result.cssRules.join('\n'))}`,
+            ),
+          )};`
+        : `import ${JSON.stringify(
+            stringifyRequest(
+              this.context || this.rootContext,
+              `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(result.cssRules.join('\n'))}`,
+            ),
+          )};`.replace(/\\"/gi, '');
 
       this.callback(null, `${result.code}\n\n${request};`, result.sourceMap);
       return;

diff --git a/packages/webpack-loader/package.json b/packages/webpack-loader/package.json
@@ -17,6 +17,6 @@
   },
   "peerDependencies": {
     "@griffel/react": "^1.4.2",
-    "webpack": "^5"
+    "webpack": "^4.44.2 || ^5"
   }
 }