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);
   });