feat!: use modern Sass JS API by default

Author: alexander-akait

README.md

@@ -683,7 +683,7 @@ Type:
 type api = "legacy" | "modern" | "modern-compiler";
 ```
 
-Default: `"legacy"`
+Default: `"modern"`
 
 Allows you to switch between the `legacy` and `modern` APIs. You can find more information [here](https://sass-lang.com/documentation/js-api). The `modern-compiler` option enables the modern API with support for [Shared Resources](https://github.com/sass/sass/blob/main/accepted/shared-resources.d.ts.md).
 

src/index.js

@@ -34,21 +34,23 @@ async function loader(content) {
 
  const useSourceMap =
  typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
+ const apiType = typeof options.api === "undefined" ? "modern" : options.api;
  const sassOptions = await getSassOptions(
  this,
  options,
  content,
  implementation,
  useSourceMap,
+ apiType,
  );
+
  const shouldUseWebpackImporter =
  typeof options.webpackImporter === "boolean"
  ? options.webpackImporter
  : true;
 
  if (shouldUseWebpackImporter) {
- const isModernAPI =
- options.api === "modern" || options.api === "modern-compiler";
+ const isModernAPI = apiType === "modern" || apiType === "modern-compiler";
 
  if (!isModernAPI) {
  const { includePaths } = sassOptions;
@@ -67,7 +69,7 @@ async function loader(content) {
  let compile;
 
  try {
- compile = getCompileFn(this, implementation, options);
+ compile = getCompileFn(this, implementation, apiType);
  } catch (error) {
  callback(error);
  return;

src/utils.js

@@ -94,6 +94,7 @@ function proxyCustomImporters(importers, loaderContext) {
  * @param {string} content
  * @param {object} implementation
  * @param {boolean} useSourceMap
+ * @param {"legacy" | "modern" | "modern-compiler"} apiType
  * @returns {Object}
  */
 async function getSassOptions(
@@ -102,6 +103,7 @@ async function getSassOptions(
  content,
  implementation,
  useSourceMap,
+ apiType,
 ) {
  const options = loaderOptions.sassOptions
  ? typeof loaderOptions.sassOptions === "function"
@@ -175,7 +177,7 @@ async function getSassOptions(
  }
 
  const isModernAPI =
- loaderOptions.api === "modern" || loaderOptions.api === "modern-compiler";
+ apiType === "modern" || apiType === "modern-compiler";
  const { resourcePath } = loaderContext;
 
  if (isModernAPI) {
@@ -735,24 +737,24 @@ const sassModernCompilers = new WeakMap();
  *
  * @param {Object} loaderContext
  * @param {Object} implementation
- * @param {Object} options
+ * @param {"legacy" | "modern" | "modern-compiler"} apiType
  * @returns {Function}
  */
-function getCompileFn(loaderContext, implementation, options) {
+function getCompileFn(loaderContext, implementation, apiType) {
  const isNewSass =
  implementation.info.includes("dart-sass") ||
  implementation.info.includes("sass-embedded");
 
  if (isNewSass) {
- if (options.api === "modern") {
+ if (apiType === "modern") {
  return (sassOptions) => {
  const { data, ...rest } = sassOptions;
 
  return implementation.compileStringAsync(data, rest);
  };
  }
 
- if (options.api === "modern-compiler") {
+ if (apiType === "modern-compiler") {
  return async (sassOptions) => {
  // eslint-disable-next-line no-underscore-dangle
  const webpackCompiler = loaderContext._compiler;
@@ -799,7 +801,7 @@ function getCompileFn(loaderContext, implementation, options) {
  });
  }
 
- if (options.api === "modern" || options.api === "modern-compiler") {
+ if (apiType === "modern" || apiType === "modern-compiler") {
  throw new Error("Modern API is not supported for 'node-sass'");
  }
 

test/implementation-option.test.js

@@ -185,13 +185,17 @@ describe("implementation option", () => {
  expect(getWarnings(stats)).toMatchSnapshot("warnings");
  expect(getErrors(stats)).toMatchSnapshot("errors");
 
- expect(sassEmbeddedSpy).toHaveBeenCalledTimes(1);
+ expect(sassEmbeddedSpy).toHaveBeenCalledTimes(0);
+ expect(sassEmbeddedSpyModernAPI).toHaveBeenCalledTimes(1);
  expect(nodeSassSpy).toHaveBeenCalledTimes(0);
  expect(dartSassSpy).toHaveBeenCalledTimes(0);
+ expect(dartSassSpyModernAPI).toHaveBeenCalledTimes(0);
 
  sassEmbeddedSpy.mockClear();
+ sassEmbeddedSpyModernAPI.mockClear();
  nodeSassSpy.mockClear();
  dartSassSpy.mockClear();
+ dartSassSpyModernAPI.mockClear();
 
  await close(compiler);
  });
@@ -216,8 +220,10 @@ describe("implementation option", () => {
  expect(dartSassSpy).toHaveBeenCalledTimes(0);
 
  sassEmbeddedSpy.mockClear();
+ sassEmbeddedSpyModernAPI.mockClear();
  nodeSassSpy.mockClear();
  dartSassSpy.mockClear();
+ dartSassSpyModernAPI.mockClear();
 
  await close(compiler);
  });
@@ -241,8 +247,10 @@ describe("implementation option", () => {
  expect(nodeSassSpy).toHaveBeenCalledTimes(0);
  expect(dartSassSpyModernAPI).toHaveBeenCalledTimes(0);
 
+ sassEmbeddedSpy.mockClear();
  sassEmbeddedSpyModernAPI.mockClear();
  nodeSassSpy.mockClear();
+ dartSassSpy.mockClear();
  dartSassSpyModernAPI.mockClear();
 
  await close(compiler);
@@ -269,9 +277,11 @@ describe("implementation option", () => {
  expect(dartSassSpyModernAPI).toHaveBeenCalledTimes(0);
  expect(dartSassCompilerSpies.compileStringSpy).toHaveBeenCalledTimes(0);
 
+ sassEmbeddedSpy.mockClear();
+ sassEmbeddedSpyModernAPI.mockClear();
  nodeSassSpy.mockClear();
+ dartSassSpy.mockClear();
  dartSassSpyModernAPI.mockClear();
- dartSassCompilerSpies.mockClear();
 
  await close(compiler);
  });