fix: disabled fiber on node >= 16

webpack-contrib · May 13, 2021 · e97ba71 · e97ba71
1 parent 5ec86a5
commit e97ba71
Show file tree

Hide file tree

Showing 13 changed files with 2,595 additions and 2,468 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,9 @@
 module.exports = {
   root: true,
   extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
+  parser: "@babel/eslint-parser",
+  parserOptions: {
+    sourceType: "module",
+    allowImportExportEverywhere: true,
+  },
 };
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -55,7 +55,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [10.x, 12.x, 14.x, 16.x]
         webpack-version: [latest]
 
     runs-on: ${{ matrix.os }}

diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   testEnvironment: "node",
+  clearMocks: true,
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.0",
+    "@babel/eslint-parser": "^7.14.2",
     "@babel/preset-env": "^7.14.1",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
@@ -84,7 +85,7 @@
     "lint-staged": "^11.0.0",
     "material-components-web": "^8.0.0",
     "memfs": "^3.2.2",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.0",

diff --git a/src/utils.js b/src/utils.js
@@ -88,6 +88,12 @@ function proxyCustomImporters(importers, loaderContext) {
   );
 }
 
+function isSupportedFibers() {
+  const [nodeVersion] = process.versions.node.split(".");
+
+  return Number(nodeVersion) < 16;
+}
+
 /**
  * Derives the sass options from the loader context and normalizes its values with sane defaults.
  *
@@ -115,7 +121,7 @@ async function getSassOptions(
 
   const isDartSass = implementation.info.includes("dart-sass");
 
-  if (isDartSass) {
+  if (isDartSass && isSupportedFibers()) {
     const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
 
     if (shouldTryToResolveFibers) {
@@ -569,4 +575,5 @@ export {
   getWebpackImporter,
   getRenderFunctionFromSassImplementation,
   normalizeSourceMap,
+  isSupportedFibers,
 };
diff --git a/test/additionalData-option.test.js b/test/additionalData-option.test.js
@@ -1,6 +1,7 @@
 import nodeSass from "node-sass";
 import dartSass from "sass";
-import Fiber from "fibers";
+
+import { isSupportedFibers } from "../src/utils";
 
 import {
   compile,
@@ -13,109 +14,121 @@ import {
   getWarnings,
 } from "./helpers";
 
-const implementations = [nodeSass, dartSass];
-const syntaxStyles = ["scss", "sass"];
+(async () => {
+  let Fiber;
+  const implementations = [nodeSass, dartSass];
+  const syntaxStyles = ["scss", "sass"];
 
-describe("additionalData option", () => {
-  beforeEach(() => {
-    // The `sass` (`Dart Sass`) package modify the `Function` prototype, but the `jest` lose a prototype
-    Object.setPrototypeOf(Fiber, Function.prototype);
-  });
+  describe("additionalData option", () => {
+    beforeAll(async () => {
+      if (isSupportedFibers()) {
+        const { default: fibers } = await import("fibers");
+        Fiber = fibers;
+      }
+    });
 
-  implementations.forEach((implementation) => {
-    const [implementationName] = implementation.info.split("\t");
-
-    syntaxStyles.forEach((syntax) => {
-      it(`should work as a string (${implementationName}) (${syntax})`, async () => {
-        const testId = getTestId("prepending-data", syntax);
-        const options = {
-          implementation: getImplementationByName(implementationName),
-          additionalData: `$prepended-data: hotpink${
-            syntax === "sass" ? "\n" : ";"
-          }`,
-        };
-        const compiler = getCompiler(testId, { loader: { options } });
-        const stats = await compile(compiler);
-        const codeFromBundle = getCodeFromBundle(stats, compiler);
-        const codeFromSass = getCodeFromSass(testId, options);
-
-        expect(codeFromBundle.css).toBe(codeFromSass.css);
-        expect(codeFromBundle.css).toMatchSnapshot("css");
-        expect(getWarnings(stats)).toMatchSnapshot("warnings");
-        expect(getErrors(stats)).toMatchSnapshot("errors");
-      });
+    beforeEach(() => {
+      if (isSupportedFibers()) {
+        // The `sass` (`Dart Sass`) package modify the `Function` prototype, but the `jest` lose a prototype
+        Object.setPrototypeOf(Fiber, Function.prototype);
+      }
+    });
 
-      it(`should work as a function (${implementationName}) (${syntax})`, async () => {
-        const testId = getTestId("prepending-data", syntax);
-        const options = {
-          implementation: getImplementationByName(implementationName),
-          additionalData: (content, loaderContext) => {
-            expect(loaderContext).toBeDefined();
-            expect(content).toBeDefined();
-
-            return `$prepended-data: hotpink${
-              syntax === "sass" ? "\n" : ";\n"
-            }${content}`;
-          },
-        };
-        const compiler = getCompiler(testId, { loader: { options } });
-        const stats = await compile(compiler);
-        const codeFromBundle = getCodeFromBundle(stats, compiler);
-        const codeFromSass = getCodeFromSass(testId, options);
-
-        expect(codeFromBundle.css).toBe(codeFromSass.css);
-        expect(codeFromBundle.css).toMatchSnapshot("css");
-        expect(getWarnings(stats)).toMatchSnapshot("warnings");
-        expect(getErrors(stats)).toMatchSnapshot("errors");
-      });
+    implementations.forEach((implementation) => {
+      const [implementationName] = implementation.info.split("\t");
 
-      it(`should work as an async function (${implementationName}) (${syntax})`, async () => {
-        const testId = getTestId("prepending-data", syntax);
-        const options = {
-          implementation: getImplementationByName(implementationName),
-          additionalData: async (content, loaderContext) => {
-            expect(loaderContext).toBeDefined();
-            expect(content).toBeDefined();
-
-            return `$prepended-data: hotpink${
-              syntax === "sass" ? "\n" : ";\n"
-            }${content}`;
-          },
-        };
-        const compiler = getCompiler(testId, { loader: { options } });
-        const stats = await compile(compiler);
-        const codeFromBundle = getCodeFromBundle(stats, compiler);
-        const codeFromSass = getCodeFromSass(testId, options);
-
-        expect(codeFromBundle.css).toBe(codeFromSass.css);
-        expect(codeFromBundle.css).toMatchSnapshot("css");
-        expect(getWarnings(stats)).toMatchSnapshot("warnings");
-        expect(getErrors(stats)).toMatchSnapshot("errors");
-      });
+      syntaxStyles.forEach((syntax) => {
+        it(`should work as a string (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("prepending-data", syntax);
+          const options = {
+            implementation: getImplementationByName(implementationName),
+            additionalData: `$prepended-data: hotpink${
+              syntax === "sass" ? "\n" : ";"
+            }`,
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = getCodeFromSass(testId, options);
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
 
-      it(`should use same EOL on all os (${implementationName}) (${syntax})`, async () => {
-        const testId = getTestId("prepending-data", syntax);
-        const additionalData =
-          syntax === "sass"
-            ? `$prepended-data: hotpink
+        it(`should work as a function (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("prepending-data", syntax);
+          const options = {
+            implementation: getImplementationByName(implementationName),
+            additionalData: (content, loaderContext) => {
+              expect(loaderContext).toBeDefined();
+              expect(content).toBeDefined();
+
+              return `$prepended-data: hotpink${
+                syntax === "sass" ? "\n" : ";\n"
+              }${content}`;
+            },
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = getCodeFromSass(testId, options);
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
+
+        it(`should work as an async function (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("prepending-data", syntax);
+          const options = {
+            implementation: getImplementationByName(implementationName),
+            additionalData: async (content, loaderContext) => {
+              expect(loaderContext).toBeDefined();
+              expect(content).toBeDefined();
+
+              return `$prepended-data: hotpink${
+                syntax === "sass" ? "\n" : ";\n"
+              }${content}`;
+            },
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+          const codeFromSass = getCodeFromSass(testId, options);
+
+          expect(codeFromBundle.css).toBe(codeFromSass.css);
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
+
+        it(`should use same EOL on all os (${implementationName}) (${syntax})`, async () => {
+          const testId = getTestId("prepending-data", syntax);
+          const additionalData =
+            syntax === "sass"
+              ? `$prepended-data: hotpink
 a
   color: $prepended-data`
-            : `$prepended-data: hotpink;
+              : `$prepended-data: hotpink;
 a {
   color: red;
 }`;
-        const options = {
-          implementation: getImplementationByName(implementationName),
-          additionalData,
-        };
-        const compiler = getCompiler(testId, { loader: { options } });
-        const stats = await compile(compiler);
-        const codeFromBundle = getCodeFromBundle(stats, compiler);
-
-        expect(codeFromBundle.css).toMatchSnapshot("css");
-        expect(getWarnings(stats)).toMatchSnapshot("warnings");
-        expect(getErrors(stats)).toMatchSnapshot("errors");
+          const options = {
+            implementation: getImplementationByName(implementationName),
+            additionalData,
+          };
+          const compiler = getCompiler(testId, { loader: { options } });
+          const stats = await compile(compiler);
+          const codeFromBundle = getCodeFromBundle(stats, compiler);
+
+          expect(codeFromBundle.css).toMatchSnapshot("css");
+          expect(getWarnings(stats)).toMatchSnapshot("warnings");
+          expect(getErrors(stats)).toMatchSnapshot("errors");
+        });
       });
     });
   });
-});
+})();