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

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",
@@ -131,7 +132,8 @@
     "schema-utils": "^3.1.1",
     "source-map-js": "1.0.2",
     "stylis": "^4.0.13",
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "webpack-sources": "3.2.3"
   },
   "resolutions": {
     "@nrwl/web": "patch:@nrwl/web@npm:13.4.5#.yarn/patches/@nrwl-web-npm-13.4.5-d7e9ea40d2",

packages/webpack-extraction-plugin/package.json

@@ -13,10 +13,11 @@
     "loader-utils": "^2.0.0",
     "schema-utils": "^3.1.1",
     "stylis": "^4.0.13",
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "webpack-sources": "3.2.3"
   },
   "peerDependencies": {
     "@griffel/core": "^1.8.1",
-    "webpack": "^5"
+    "webpack": "^4.44.2 || ^5"
   }
 }

packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts

@@ -48,26 +48,40 @@ 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.processAssets) {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'GriffelExtractPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
+          },
+          assets => updateGriffelCSS(compiler, compilation, this.compareMediaQueries),
+        );
+      } else {
+        compilation.hooks.optimizeAssets.tap('GriffelExtractPlugin', assets =>
+          updateGriffelCSS(compiler, compilation, this.compareMediaQueries),
+        );
+      }
     });
   }
 }
+
+const updateGriffelCSS = (
+  compiler: Compiler,
+  compilation: Compilation,
+  compareMediaQueries: GriffelRenderer['compareMediaQueries'],
+) => {
+  const griffelAsset = Object.entries(compilation.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 { RawSource } = compiler.webpack.sources || require('webpack-sources');
+
+  compilation.updateAsset(assetName, new RawSource(sortedCSSRules));
+};

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;

packages/webpack-loader/package.json

@@ -17,6 +17,6 @@
   },
   "peerDependencies": {
     "@griffel/react": "^1.4.2",
-    "webpack": "^5"
+    "webpack": "^4.44.2 || ^5"
   }
 }

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"