Add logic to sass rule conditional on sass-loader version (#508)

* mock moduleExists now that we've mocked css-loader

__mocks__/nonexistent/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "./wat",
+  "version": "12.0.0"
+}

__mocks__/sass-loader/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "./lib/api.js",
+  "version": "16.56.81"
+}

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   roots: ["<rootDir>/test"],
-  testPathIgnorePatterns: ["/__fixtures__/", "/__utils__/"]
+  testPathIgnorePatterns: ["/__fixtures__/", "/__utils__/"],
+  resolver: "<rootDir>/test/resolver"
 }

package/rules/sass.js

@@ -1,16 +1,18 @@
 /* eslint global-require: 0 */
 
 const getStyleRule = require("../utils/getStyleRule")
-const { canProcess } = require("../utils/helpers")
-const { additional_paths: includePaths } = require("../config")
+const { canProcess, packageMajorVersion } = require("../utils/helpers")
+const { additional_paths: extraPaths } = require("../config")
 
-module.exports = canProcess("sass-loader", (resolvedPath) =>
-  getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
+module.exports = canProcess("sass-loader", (resolvedPath) => {
+  const optionKey =
+    packageMajorVersion("sass-loader") > 15 ? "loadPaths" : "includePaths"
+  return getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
     {
       loader: resolvedPath,
       options: {
-        sassOptions: { includePaths }
+        sassOptions: { [optionKey]: extraPaths }
       }
     }
   ])
-)
+})

package/utils/helpers.js

@@ -41,10 +41,18 @@ const loaderMatches = (configLoader, loaderToCheck, fn) => {
   return fn()
 }
 
+const packageMajorVersion = (packageName) => {
+  // eslint-disable-next-line import/no-dynamic-require
+  const packageJsonPath = require.resolve(`${packageName}/package.json`)
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  return require(packageJsonPath).version.match(/^\d+/)[0]
+}
+
 module.exports = {
   isBoolean,
   ensureTrailingSlash,
   canProcess,
   moduleExists,
-  loaderMatches
+  loaderMatches,
+  packageMajorVersion
 }

test/package/development.test.js

@@ -4,6 +4,15 @@ const { chdirTestApp, resetEnv } = require("../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Development environment", () => {
   beforeEach(() => jest.resetModules() && resetEnv())
   afterAll(() => process.chdir(rootPath))

test/package/environments/base.test.js

@@ -10,6 +10,15 @@ chdirTestApp()
 const baseConfig = require("../../../package/environments/base")
 const config = require("../../../package/config")
 
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Base config", () => {
   beforeEach(() => jest.resetModules() && resetEnv())
   afterAll(() => process.chdir(rootPath))

test/package/environments/development.test.js

@@ -3,6 +3,15 @@ const { chdirTestApp, resetEnv } = require("../../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Development specific config", () => {
   beforeEach(() => {
     jest.resetModules()

test/package/environments/production.test.js

@@ -3,6 +3,15 @@ const { chdirTestApp, resetEnv } = require("../../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Production specific config", () => {
   beforeEach(() => {
     jest.resetModules()

test/package/helpers.test.js

@@ -0,0 +1,11 @@
+const { packageMajorVersion } = require("../../package/utils/helpers")
+
+describe("packageMajorVersion", () => {
+  test("should find that sass-loader is v16", () => {
+    expect(packageMajorVersion("sass-loader")).toBe("16")
+  })
+
+  test("should find that nonexistent is v12", () => {
+    expect(packageMajorVersion("nonexistent")).toBe("12")
+  })
+})

test/package/index.test.js

@@ -1,5 +1,14 @@
 const index = require("../../package/index")
 
+jest.mock("../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("index", () => {
   test("exports webpack-merge v5 functions", () => {
     expect(index.merge).toBeInstanceOf(Function)

test/package/production.test.js

@@ -4,6 +4,15 @@ const { chdirTestApp } = require("../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Production environment", () => {
   afterAll(() => process.chdir(rootPath))
 

test/package/rules/index.test.js

@@ -1,5 +1,14 @@
 const rules = require("../../../package/rules/index")
 
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("index", () => {
   test("rule tests are regexes", () => {
     rules.forEach((rule) => expect(rule.test instanceof RegExp).toBe(true))

test/package/rules/sass.test.js

@@ -0,0 +1,23 @@
+const sass = require("../../../package/rules/sass")
+
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const canProcess = (rule, fn) => {
+    return fn("This path was mocked")
+  }
+  const packageMajorVersion = () => "15"
+  return {
+    ...original,
+    canProcess,
+    packageMajorVersion
+  }
+})
+
+jest.mock("../../../package/utils/inliningCss", () => true)
+
+describe("sass rule", () => {
+  test("contains loadPaths as the sassOptions key if sass-loader is v15 or earlier", () => {
+    expect(typeof sass.use[3].options.sassOptions.includePaths).toBe("object")
+    expect(typeof sass.use[3].options.sassOptions.loadPaths).toBe("undefined")
+  })
+})

test/package/rules/sass1.test.js

@@ -0,0 +1,23 @@
+const sass = require("../../../package/rules/sass")
+
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const canProcess = (rule, fn) => {
+    return fn("This path was mocked")
+  }
+  return {
+    ...original,
+    canProcess
+  }
+})
+
+jest.mock("../../../package/utils/inliningCss", () => true)
+
+describe("sass rule", () => {
+  test("contains loadPaths as the sassOptions key if sass-loader is v15 or earlier", () => {
+    expect(typeof sass.use[3].options.sassOptions.includePaths).toBe(
+      "undefined"
+    )
+    expect(typeof sass.use[3].options.sassOptions.loadPaths).toBe("object")
+  })
+})

test/package/staging.test.js

@@ -4,6 +4,15 @@ const { chdirTestApp } = require("../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Custom environment", () => {
   afterAll(() => process.chdir(rootPath))
 

test/package/test.test.js

@@ -4,6 +4,15 @@ const { chdirTestApp } = require("../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+jest.mock("../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../package/utils/helpers")
+  const moduleExists = () => false
+  return {
+    ...original,
+    moduleExists
+  }
+})
+
 describe("Test environment", () => {
   afterAll(() => process.chdir(rootPath))
 

test/resolver.js

@@ -0,0 +1,13 @@
+const mapping = {
+  "css-loader": "this path was mocked",
+  "sass-loader/package.json": "../../__mocks__/sass-loader/package.json",
+  "nonexistent/package.json": "../../__mocks__/nonexistent/package.json"
+}
+
+function resolver(module, options) {
+  // If the path corresponds to a key in the mapping object, returns the fakely resolved path
+  // otherwise it calls the Jest's default resolver
+  return mapping[module] || options.defaultResolver(module, options)
+}
+
+module.exports = resolver