happy-css-modules 0.4.0 → 0.6.0

package/src/test/util.ts

@@ -4,7 +4,7 @@ import { tmpdir } from 'os';
 import { dirname, join, resolve } from 'path';
 import postcss, { type Root, type Rule, type AtRule, type Declaration } from 'postcss';
 import { type ClassName } from 'postcss-selector-parser';
-import { type Token, collectNodes, type Location } from '../loader/index.js';
+import { type Token, collectNodes, type Location } from '../locator/index.js';
 import { sleepSync } from '../util.js';
 
 export const FIXTURE_DIR_PATH = resolve(
@@ -31,18 +31,24 @@ export function createComposesDeclarations(root: Root): Declaration[] {
 
 export function fakeToken(args: {
   name: Token['name'];
-  originalLocations: { filePath?: Location['filePath']; start: Location['start'] }[];
+  originalLocations: { filePath?: Location['filePath']; start?: Location['start'] }[];
 }): Token {
   return {
     name: args.name,
-    originalLocations: args.originalLocations.map((location) => ({
-      filePath: location.filePath ?? getFixturePath('/test/1.css'),
-      start: location.start,
-      end: {
-        line: location.start.line,
-        column: location.start.column + args.name.length - 1,
-      },
-    })),
+    originalLocations: args.originalLocations.map((location) => {
+      if (location.filePath === undefined || location.start === undefined) {
+        return { filePath: undefined, start: undefined, end: undefined };
+      } else {
+        return {
+          filePath: location.filePath ?? getFixturePath('/test/1.css'),
+          start: location.start,
+          end: {
+            line: location.start.line,
+            column: location.start.column + args.name.length - 1,
+          },
+        };
+      }
+    }),
   };
 }
 

package/src/transformer/index.test.ts

@@ -0,0 +1,71 @@
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
+import dedent from 'dedent';
+import { Locator } from '../locator/index.js';
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createDefaultTransformer } from './index.js';
+
+const require = createRequire(import.meta.url);
+
+const cwd = getFixturePath('/');
+const locator = new Locator({ transformer: createDefaultTransformer({ cwd }) });
+
+test('processes .scss with scss transformer', async () => {
+  createFixtures({
+    '/test/1.scss': dedent`
+    .a {
+      // scss feature test (nesting)
+      .a_1 { dummy: ''; }
+    }
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.scss'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['a', 'a_1']);
+});
+
+test('processes .less with less transformer', async () => {
+  createFixtures({
+    '/test/1.less': dedent`
+    .a {
+      // less feature test (nesting)
+      .a_1 { dummy: ''; }
+    }
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.less'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['a', 'a_1']);
+});
+
+test('processes .css with postcss transformer if postcssrc is found', async () => {
+  // if postcssrc is not found
+  const locator1 = new Locator({ transformer: createDefaultTransformer() });
+  createFixtures({
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result1 = await locator1.load(getFixturePath('/test/1.css'));
+  expect(result1.tokens.map((token) => token.name)).toStrictEqual(['$(prefix)']);
+
+  // if postcssrc is found
+  const uuid = randomUUID();
+  const locator2 = new Locator({
+    transformer: createDefaultTransformer({ cwd, postcssConfig: `${uuid}/postcss.config.js` }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result2 = await locator2.load(getFixturePath('/test/1.css'));
+  expect(result2.tokens.map((token) => token.name)).toStrictEqual(['foo_bar']);
+});

package/src/transformer/index.ts

@@ -1,5 +1,7 @@
-import type { StrictlyResolver } from '../loader/index.js';
+import type { StrictlyResolver } from '../locator/index.js';
 import { createLessTransformer } from './less-transformer.js';
+import type { PostcssTransformerOptions } from './postcss-transformer.js';
+import { createPostcssTransformer } from './postcss-transformer.js';
 import { createScssTransformer } from './scss-transformer.js';
 
 /**
@@ -36,16 +38,22 @@ export const handleImportError = (packageName: string) => (e: unknown) => {
   throw e;
 };
 
-export const createDefaultTransformer: () => Transformer = () => {
+export type DefaultTransformerOptions = PostcssTransformerOptions;
+
+export const createDefaultTransformer: (defaultTransformerOptions?: DefaultTransformerOptions) => Transformer = (
+  defaultTransformerOptions,
+) => {
   const scssTransformer = createScssTransformer();
   const lessTransformer = createLessTransformer();
+  const postcssTransformer = createPostcssTransformer(defaultTransformerOptions);
   return async (source, options) => {
     if (options.from.endsWith('.scss')) {
       return scssTransformer(source, options);
     } else if (options.from.endsWith('.less')) {
       return lessTransformer(source, options);
+    } else {
+      // TODO: Support multi-stage transformations by sass and less.
+      return postcssTransformer(source, options);
     }
-    // TODO: support postcss
-    return false;
   };
 };

package/src/transformer/less-transformer.test.ts

@@ -1,11 +1,11 @@
 import { jest } from '@jest/globals';
 import dedent from 'dedent';
-import { Loader } from '../loader/index.js';
+import { Locator } from '../locator/index.js';
 import { createFixtures, getFixturePath } from '../test/util.js';
 import { createLessTransformer } from './less-transformer.js';
 
-const loader = new Loader({ transformer: createLessTransformer() });
-const loadSpy = jest.spyOn(loader, 'load');
+const locator = new Locator({ transformer: createLessTransformer() });
+const loadSpy = jest.spyOn(locator, 'load');
 
 afterEach(() => {
   loadSpy.mockClear();
@@ -35,7 +35,7 @@ test('handles less features', async () => {
       .c { dummy: ''; }
       `,
   });
-  const result = await loader.load(getFixturePath('/test/1.less'));
+  const result = await locator.load(getFixturePath('/test/1.less'));
 
   // FIXME: The end position of 'a_2_2' is incorrect.
   expect(result).toMatchInlineSnapshot(`
@@ -45,37 +45,37 @@ test('handles less features', async () => {
         {
           name: "b_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/2.less", start: { line: 1, column: 1 }, end: { line: 1, column: 3 } },
+            { filePath: "<fixtures>/test/2.less", start: { line: 1, column: 1 }, end: { line: 1, column: 4 } },
           ],
         },
         {
           name: "a_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.less", start: { line: 2, column: 1 }, end: { line: 2, column: 3 } },
+            { filePath: "<fixtures>/test/1.less", start: { line: 2, column: 1 }, end: { line: 2, column: 4 } },
           ],
         },
         {
           name: "a_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.less", start: { line: 3, column: 1 }, end: { line: 3, column: 3 } },
+            { filePath: "<fixtures>/test/1.less", start: { line: 3, column: 1 }, end: { line: 3, column: 4 } },
           ],
         },
         {
           name: "a_2_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.less", start: { line: 6, column: 3 }, end: { line: 6, column: 7 } },
+            { filePath: "<fixtures>/test/1.less", start: { line: 6, column: 3 }, end: { line: 6, column: 8 } },
           ],
         },
         {
           name: "a_2_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.less", start: { line: 7, column: 3 }, end: { line: 7, column: 7 } },
+            { filePath: "<fixtures>/test/1.less", start: { line: 7, column: 3 }, end: { line: 7, column: 8 } },
           ],
         },
         {
           name: "c",
           originalLocations: [
-            { filePath: "<fixtures>/test/3.less", start: { line: 1, column: 1 }, end: { line: 1, column: 1 } },
+            { filePath: "<fixtures>/test/3.less", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
       ],
@@ -97,10 +97,10 @@ test('tracks dependencies that have been pre-bundled by less compiler', async ()
     '/test/4.less': dedent`
     `,
   });
-  const result = await loader.load(getFixturePath('/test/1.less'));
+  const result = await locator.load(getFixturePath('/test/1.less'));
 
   // The files imported using @import are pre-bundled by the compiler.
-  // Therefore, `Loader#load` is not called to process other files.
+  // Therefore, `Locator#load` is not called to process other files.
   expect(loadSpy).toBeCalledTimes(1);
   expect(loadSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.less'));
 
@@ -121,7 +121,7 @@ test('resolves specifier using resolver', async () => {
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.less': `.a {}`,
   });
-  const result = await loader.load(getFixturePath('/test/1.less'));
+  const result = await locator.load(getFixturePath('/test/1.less'));
   // eslint-disable-next-line @typescript-eslint/require-array-sort-compare
   expect(result.dependencies.sort()).toStrictEqual(
     // eslint-disable-next-line @typescript-eslint/require-array-sort-compare
@@ -137,6 +137,6 @@ test('ignores http(s) protocol file', async () => {
     @import 'https://example.com/path/less.less';
     `,
   });
-  const result = await loader.load(getFixturePath('/test/1.less'));
+  const result = await locator.load(getFixturePath('/test/1.less'));
   expect(result.dependencies).toStrictEqual([]);
 });

package/src/transformer/postcss-transformer.test.ts

@@ -0,0 +1,188 @@
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
+import { jest } from '@jest/globals';
+import dedent from 'dedent';
+import { Locator } from '../locator/index.js';
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createPostcssTransformer } from './postcss-transformer.js';
+
+const cwd = getFixturePath('/');
+const require = createRequire(import.meta.url);
+
+// NOTE: postcss-load-config caches the configuration file using the path as a key.
+// Therefore, change the path for each test case so that a new configuration file is always used.
+
+test('handles postcss features', async () => {
+  const uuid = randomUUID();
+  const locator = new Locator({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      dependencies: [],
+      tokens: [
+        {
+          name: "foo_bar",
+          originalLocations: [
+            { filePath: "<fixtures>/test/1.css", start: { line: 2, column: 1 }, end: { line: 2, column: 8 } },
+          ],
+        },
+      ],
+    }
+  `);
+});
+
+test('tracks dependencies that have been pre-bundled by postcss compiler', async () => {
+  const uuid = randomUUID();
+  const locator = new Locator({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  const loadSpy = jest.spyOn(locator, 'load');
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import './2.css';
+    @import './3.css';
+    `,
+    '/test/2.css': ``,
+    '/test/3.css': `@import './4.css'`,
+    '/test/4.css': ``,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+
+  // The files imported using @import are pre-bundled by the compiler.
+  // Therefore, `Locator#load` is not called to process other files.
+  expect(loadSpy).toBeCalledTimes(1);
+  expect(loadSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.css'));
+
+  // The files pre-bundled by the compiler are also included in `result.dependencies`
+  expect(result.dependencies).toStrictEqual(['/test/2.css', '/test/3.css', '/test/4.css'].map(getFixturePath));
+});
+
+test('resolves specifier using resolver', async () => {
+  const uuid = randomUUID();
+  const locator = new Locator({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        // When using postcss-import, the resolver of happy-css-modules is ignored.
+        // Therefore, we test here without postcss-import.
+        // require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import 'package';
+    `,
+    '/node_modules/package/index.css': `.a {}`,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+  expect(result.dependencies).toStrictEqual(['/node_modules/package/index.css'].map(getFixturePath));
+});
+
+test('ignores http(s) protocol file', async () => {
+  const uuid = randomUUID();
+  const locator = new Locator({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        // When using postcss-import, the resolver of happy-css-modules is ignored.
+        // Therefore, we test here without postcss-import.
+        // require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+  expect(result.dependencies).toStrictEqual([]);
+});
+
+test('returns false if postcssrc is not found', async () => {
+  const uuid = randomUUID();
+  const transformer = createPostcssTransformer({
+    cwd,
+    postcssConfig: `${uuid}/postcss.config.js`,
+  });
+  createFixtures({
+    '/test/1.css': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    `,
+  });
+  expect(
+    await transformer('', {
+      from: getFixturePath('/test/1.css'),
+      isIgnoredSpecifier: () => false,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      resolver: jest.fn() as any,
+    }),
+  ).toBe(false);
+});
+
+test('searches config from cwd if postcssConfig option is missing', async () => {
+  const uuid = randomUUID();
+  const cwd = `/${uuid}`;
+  const locator = new Locator({
+    transformer: createPostcssTransformer({
+      cwd: getFixturePath(cwd),
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result = await locator.load(getFixturePath('/test/1.css'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['foo_bar']);
+});

package/src/transformer/postcss-transformer.ts

@@ -0,0 +1,57 @@
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import { default as postcss, type Message } from 'postcss';
+import type { Result } from 'postcss-load-config';
+import type { Transformer } from '../index.js';
+
+const require = createRequire(import.meta.url);
+
+const postcssrc: typeof import('postcss-load-config') = require('postcss-load-config');
+
+//ref: https://github.com/postcss/postcss-import#dependency-message-support
+interface DependencyMessage extends Message {
+  type: 'dependency';
+  file: string;
+  parent: string;
+}
+function isDependencyMessage(message: Message): message is DependencyMessage {
+  return message.type === 'dependency';
+}
+
+export type PostcssTransformerOptions = {
+  cwd?: string | undefined;
+  /**
+   * The option compatible with postcss's `--config`. It is a relative or absolute path.
+   * @example '.'
+   * @example 'postcss.config.js'
+   * @example '/home/user/repository/src'
+   */
+  postcssConfig?: string | undefined;
+};
+
+export const createPostcssTransformer: (postcssTransformerOptions?: PostcssTransformerOptions) => Transformer = (
+  postcssTransformerOptions,
+) => {
+  const cwd = postcssTransformerOptions?.cwd ?? process.cwd();
+  const configSearchPath = postcssTransformerOptions?.postcssConfig
+    ? resolve(cwd, postcssTransformerOptions?.postcssConfig)
+    : cwd;
+  return async (source, options) => {
+    // NOTE: postcss-load-config cache the configuration file so is is not reloaded.
+    const postcssConfig: Result | undefined = await postcssrc({ cwd }, configSearchPath).catch((e) => {
+      if (e instanceof Error && e.message.includes('No PostCSS Config found')) return undefined;
+      throw e;
+    });
+    if (postcssConfig === undefined) return false;
+
+    const result = await postcss(postcssConfig.plugins).process(source, {
+      ...postcssConfig.options,
+      from: options.from,
+      map: { inline: false, absolute: true },
+    });
+
+    const dependencies = result.messages.filter(isDependencyMessage).map((message) => message.file);
+
+    return { css: result.css, map: result.map, dependencies };
+  };
+};

package/src/transformer/scss-transformer.test.ts

@@ -1,11 +1,11 @@
 import { jest } from '@jest/globals';
 import dedent from 'dedent';
-import { Loader } from '../loader/index.js';
+import { Locator } from '../locator/index.js';
 import { createFixtures, getFixturePath } from '../test/util.js';
 import { createScssTransformer } from './scss-transformer.js';
 
-const loader = new Loader({ transformer: createScssTransformer() });
-const loadSpy = jest.spyOn(loader, 'load');
+const locator = new Locator({ transformer: createScssTransformer() });
+const loadSpy = jest.spyOn(locator, 'load');
 
 afterEach(() => {
   loadSpy.mockClear();
@@ -37,7 +37,7 @@ test('handles sass features', async () => {
       .d { dummy: ''; }
       `,
   });
-  const result = await loader.load(getFixturePath('/test/1.scss'));
+  const result = await locator.load(getFixturePath('/test/1.scss'));
 
   // NOTE: There should be only one originalLocations for 'a_2', but there are multiple.
   // This is probably due to an incorrect sourcemap output by the sass compiler.
@@ -51,44 +51,44 @@ test('handles sass features', async () => {
         {
           name: "b_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/2.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 3 } },
+            { filePath: "<fixtures>/test/2.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 4 } },
           ],
         },
         {
           name: "c",
           originalLocations: [
-            { filePath: "<fixtures>/test/3.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 1 } },
+            { filePath: "<fixtures>/test/3.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
         {
           name: "a_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 1 }, end: { line: 3, column: 3 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 1 }, end: { line: 3, column: 4 } },
           ],
         },
         {
           name: "a_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 4, column: 1 }, end: { line: 4, column: 3 } },
-            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 5 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 4, column: 1 }, end: { line: 4, column: 4 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 6 } },
           ],
         },
         {
           name: "a_2_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 7 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 8 } },
           ],
         },
         {
           name: "a_2_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 8, column: 3 }, end: { line: 8, column: 7 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 8, column: 3 }, end: { line: 8, column: 8 } },
           ],
         },
         {
           name: "d",
           originalLocations: [
-            { filePath: "<fixtures>/test/4.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 1 } },
+            { filePath: "<fixtures>/test/4.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
       ],
@@ -110,10 +110,10 @@ test('tracks dependencies that have been pre-bundled by sass compiler', async ()
     '/test/4.scss': dedent`
     `,
   });
-  const result = await loader.load(getFixturePath('/test/1.scss'));
+  const result = await locator.load(getFixturePath('/test/1.scss'));
 
   // The files imported using @import are pre-bundled by the compiler.
-  // Therefore, `Loader#load` is not called to process other files.
+  // Therefore, `Locator#load` is not called to process other files.
   expect(loadSpy).toBeCalledTimes(1);
   expect(loadSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.scss'));
 
@@ -130,7 +130,7 @@ test('resolves specifier using resolver', async () => {
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.scss': `.a {}`,
   });
-  const result = await loader.load(getFixturePath('/test/1.scss'));
+  const result = await locator.load(getFixturePath('/test/1.scss'));
   expect(result.dependencies).toStrictEqual(
     ['/node_modules/package-1/index.css', '/node_modules/package-2/index.scss'].map(getFixturePath),
   );
@@ -144,6 +144,6 @@ test('ignores http(s) protocol file', async () => {
     @import 'https://example.com/path/scss.scss';
     `,
   });
-  const result = await loader.load(getFixturePath('/test/1.scss'));
+  const result = await locator.load(getFixturePath('/test/1.scss'));
   expect(result.dependencies).toStrictEqual([]);
 });

package/src/transformer/scss-transformer.ts

@@ -3,41 +3,39 @@
 // Therefore, the workaround is now disabled. See
 // https://github.com/mizdra/happy-css-modules/issues/65#issuecomment-1229471950 for more information.
 
-import type { LegacyResult } from 'sass';
-import type { Transformer, TransformerOptions } from './index.js';
+import type { LegacyOptions, LegacyResult } from 'sass';
+import type { Transformer } from './index.js';
 import { handleImportError } from './index.js';
 
-async function renderSass(sass: typeof import('sass'), source: string, options: TransformerOptions) {
-  return new Promise<LegacyResult>((resolve, reject) => {
-    sass.render(
-      {
-        data: source,
-        file: options.from,
-        outFile: 'DUMMY', // Required for sourcemap output.
-        sourceMap: true,
-        importer: (url, prev, done) => {
-          options
-            .resolver(url, { request: prev })
-            .then((resolved) => done({ file: resolved }))
-            .catch((e) => done(e));
-        },
-      },
-      (exception, result) => {
-        if (exception) {
-          reject(exception);
-        } else {
-          resolve(result!);
-        }
-      },
-    );
-  });
+// For some reason, `util.promisify` does not work. Therefore, use the original promisify.
+function promisifySassRender(sass: typeof import('sass')) {
+  return async (options: LegacyOptions<'async'>) => {
+    return new Promise<LegacyResult>((resolve, reject) => {
+      sass.render(options, (exception, result) => {
+        if (exception) reject(exception);
+        else resolve(result!);
+      });
+    });
+  };
 }
 
 export const createScssTransformer: () => Transformer = () => {
   let sass: typeof import('sass');
   return async (source, options) => {
     sass ??= (await import('sass').catch(handleImportError('sass'))).default;
-    const result = await renderSass(sass, source, options);
+    const render = promisifySassRender(sass);
+    const result = await render({
+      data: source,
+      file: options.from,
+      outFile: 'DUMMY', // Required for sourcemap output.
+      sourceMap: true,
+      importer: (url, prev, done) => {
+        options
+          .resolver(url, { request: prev })
+          .then((resolved) => done({ file: resolved }))
+          .catch((e) => done(e));
+      },
+    });
     return { css: result.css.toString(), map: result.map!.toString(), dependencies: result.stats.includedFiles };
   };
 };