happy-css-modules 0.3.0 → 0.5.0

package/src/integration-test/go-to-definition.test.ts

@@ -1,11 +1,9 @@
-import { jest } from '@jest/globals';
 import dedent from 'dedent';
 import { run } from '../runner.js';
-import { getModuleDefinitions, getMultipleIdentifierDefinitions } from '../test/tsserver.js';
+import { createTSServer } from '../test/tsserver.js';
 import { createFixtures, getFixturePath } from '../test/util.js';
 
-// It is heavy test, so increase timeout.
-jest.setTimeout(60 * 1000); // 60s
+const server = await createTSServer();
 
 const defaultOptions = {
   pattern: 'test/**/*.{css,scss}',
@@ -14,6 +12,10 @@ const defaultOptions = {
   cwd: getFixturePath('/'),
 };
 
+afterAll(async () => {
+  await server.exit();
+});
+
 test('basic', async () => {
   createFixtures({
     '/test/1.css': dedent`
@@ -44,7 +46,7 @@ test('basic', async () => {
     `,
   });
   await run({ ...defaultOptions });
-  const results = await getMultipleIdentifierDefinitions(getFixturePath(`/test/1.css`), [
+  const results = await server.getMultipleIdentifierDefinitions(getFixturePath(`/test/1.css`), [
     'basic',
     'cascading',
     'pseudo_class_1',
@@ -223,7 +225,7 @@ test('basic', async () => {
       },
     ]
   `);
-  const moduleDefinitions = await getModuleDefinitions(getFixturePath('/test/1.css'));
+  const moduleDefinitions = await server.getModuleDefinitions(getFixturePath('/test/1.css'));
   expect(moduleDefinitions).toMatchInlineSnapshot(`
     [
       { file: "<fixtures>/test/1.css", text: "", start: { line: 1, offset: 1 }, end: { line: 1, offset: 1 } },
@@ -248,7 +250,7 @@ test('imported tokens', async () => {
     `,
   });
   await run({ ...defaultOptions });
-  const results = await getMultipleIdentifierDefinitions(getFixturePath(`/test/1.css`), ['a', 'b', 'c', 'd']);
+  const results = await server.getMultipleIdentifierDefinitions(getFixturePath(`/test/1.css`), ['a', 'b', 'c', 'd']);
   expect(results).toMatchInlineSnapshot(`
     [
       {
@@ -307,7 +309,7 @@ test('with transformer', async () => {
     `,
   });
   await run({ ...defaultOptions });
-  const results = await getMultipleIdentifierDefinitions(getFixturePath(`/test/1.scss`), [
+  const results = await server.getMultipleIdentifierDefinitions(getFixturePath(`/test/1.scss`), [
     'basic',
     'nesting',
     'nesting_1',

package/src/loader/index.test.ts

@@ -1,6 +1,8 @@
 import fs, { readFile, writeFile } from 'fs/promises';
+import { randomUUID } from 'node:crypto';
 import { jest } from '@jest/globals';
 import dedent from 'dedent';
+import { createDefaultTransformer } from '../index.js';
 import { createFixtures, FIXTURE_DIR_PATH, getFixturePath } from '../test/util.js';
 import { sleepSync } from '../util.js';
 
@@ -311,7 +313,83 @@ test('throws error the composition of non-existent file', async () => {
   }).rejects.toThrowError(`Could not resolve './2.css' in '<fixtures>/test/1.css'`);
 });
 
-test.todo('supports sourcemap file and inline sourcemap');
+describe('supports sourcemap', () => {
+  test('restores original locations from sourcemap', async () => {
+    const transformer = createDefaultTransformer();
+    const loader = new Loader({ transformer });
+    createFixtures({
+      '/test/1.scss': dedent`
+      .nesting {
+        dummy: '';
+        .nesting_child {
+          dummy: '';
+        }
+      }
+      `,
+    });
+    const result = await loader.load(getFixturePath('/test/1.scss'));
+    expect(result).toMatchInlineSnapshot(`
+      {
+        dependencies: [],
+        tokens: [
+          {
+            name: "nesting",
+            originalLocations: [
+              { filePath: "<fixtures>/test/1.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 8 } },
+              { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 3 }, end: { line: 3, column: 10 } },
+            ],
+          },
+          {
+            name: "nesting_child",
+            originalLocations: [
+              { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 3 }, end: { line: 3, column: 16 } },
+            ],
+          },
+        ],
+      }
+    `);
+  });
+  test('treats originalLocation as empty if sourcemap is broken', async () => {
+    const uuid = randomUUID();
+    createFixtures({
+      [`/${uuid}/postcss.config.js`]: dedent`
+      module.exports = {
+        plugins: [],
+      };
+      `,
+      '/test/1.css': dedent`
+      .selector_list_a_1, .selector_list_a_2 {}
+      /* In postcss, including newlines in the selector list breaks the sourcemap. */
+      .selector_list_b_1,
+      .selector_list_b_2 {}
+      `,
+    });
+    const transformer = createDefaultTransformer({ postcssConfig: getFixturePath(`/${uuid}/postcss.config.js`) });
+    const loader = new Loader({ transformer });
+    const result = await loader.load(getFixturePath('/test/1.css'));
+    expect(result).toMatchInlineSnapshot(`
+      {
+        dependencies: [],
+        tokens: [
+          {
+            name: "selector_list_a_1",
+            originalLocations: [
+              { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 18 } },
+            ],
+          },
+          {
+            name: "selector_list_a_2",
+            originalLocations: [
+              { filePath: "<fixtures>/test/1.css", start: { line: 1, column: 1 }, end: { line: 1, column: 18 } },
+            ],
+          },
+          { name: "selector_list_b_1", originalLocations: [{}] },
+          { name: "selector_list_b_2", originalLocations: [{}] },
+        ],
+      }
+    `);
+  });
+});
 
 test('ignores http(s) protocol file', async () => {
   createFixtures({

package/src/loader/postcss.ts

@@ -11,14 +11,20 @@ export type Position = {
   column: number;
 };
 
-/** The location of class selector. */
-export type Location = {
-  filePath: string;
-  /** The inclusive starting position of the node's source (compatible with postcss). */
-  start: Position;
-  /** The inclusive ending position of the node's source (compatible with postcss). */
-  end: Position;
-};
+/** The original location of class selector. If the original location is not found, all fields are `undefined`. */
+export type Location =
+  | {
+      filePath: string;
+      /** The inclusive starting position of the node's source (compatible with postcss). */
+      start: Position;
+      /** The inclusive ending position of the node's source (compatible with postcss). */
+      end: Position;
+    }
+  | {
+      filePath: undefined;
+      start: undefined;
+      end: undefined;
+    };
 
 function removeDependenciesPlugin(): Plugin {
   return {
@@ -80,49 +86,45 @@ export function getOriginalLocation(rule: Rule, classSelector: ClassName): Locat
   if (rule.source.end === undefined || classSelector.source.end === undefined) throw new Error('Node#end is undefined');
   if (rule.source.input.file === undefined) throw new Error('Node#input.file is undefined');
 
-  const start = {
+  const classSelectorStartPosition = {
     // The line is 1-based.
     line: rule.source.start.line + (classSelector.source.start.line - 1),
     // The column is 1-based.
     column: rule.source.start.column + (classSelector.source.start.column - 1),
   };
-  const end = {
-    line: start.line,
+  const classSelectorEndPosition = {
+    line: classSelectorStartPosition.line,
     // The column is inclusive.
-    column: start.column + classSelector.value.length,
+    column: classSelectorStartPosition.column + classSelector.value.length,
   };
-  let location = {
+  const classSelectorLocation = {
     filePath: rule.source.input.file,
-    start,
-    end,
+    start: classSelectorStartPosition,
+    end: classSelectorEndPosition,
   };
 
-  if (rule.source.input.map) {
-    const origin = rule.source.input.origin(
-      location.start.line,
-      // The column of `Input#origin` is 0-based. This behavior is undocumented and probably a postcss's bug.
-      // TODO: Open PR to postcss/postcss
-      location.start.column - 1,
-    );
-    if (origin === false) throw new Error('`Input#origin` returned false');
-    if (origin.file === undefined) throw new Error('`FilePosition#file` is undefined');
-
-    location = {
-      filePath: origin.file,
-      start: {
-        line: origin.line,
-        // The column of `Input#origin` is 0-based.
-        column: origin.column + 1,
-      },
-      end: {
-        line: origin.line,
-        // The column of `Input#origin` is 0-based. Also, the column of happy-css-modules is inclusive.
-        column: origin.column + 1 + (classSelector.value.length - 1),
-      },
-    };
-  }
+  if (!rule.source.input.map) return classSelectorLocation;
 
-  return location;
+  const classSelectorOrigin = rule.source.input.origin(
+    classSelectorLocation.start.line,
+    // The column of `Input#origin` is 0-based. This behavior is undocumented and probably a postcss's bug.
+    // TODO: Open PR to postcss/postcss
+    classSelectorLocation.start.column - 1,
+  );
+  if (classSelectorOrigin === false || classSelectorOrigin.file === undefined) {
+    return { filePath: undefined, start: undefined, end: undefined };
+  }
+  return {
+    filePath: classSelectorOrigin.file,
+    start: {
+      line: classSelectorOrigin.line,
+      column: classSelectorOrigin.column + 1,
+    },
+    end: {
+      line: classSelectorOrigin.line,
+      column: classSelectorOrigin.column + classSelector.value.length + 1,
+    },
+  };
 }
 
 function isAtRuleNode(node: Node): node is AtRule {

package/src/resolver/index.ts

@@ -1,6 +1,7 @@
 import { exists } from '../util.js';
 import { createNodeResolver } from './node-resolver.js';
 import { createRelativeResolver } from './relative-resolver.js';
+import type { WebpackResolverOptions } from './webpack-resolver.js';
 import { createWebpackResolver } from './webpack-resolver.js';
 
 export type ResolverOptions = {
@@ -13,6 +14,8 @@ export type ResolverOptions = {
  * */
 export type Resolver = (specifier: string, options: ResolverOptions) => string | false | Promise<string | false>;
 
+export type DefaultResolverOptions = WebpackResolverOptions;
+
 /**
  * The Default resolver.
  *
@@ -24,25 +27,31 @@ export type Resolver = (specifier: string, options: ResolverOptions) => string |
  * @param options The options to resolve
  * @returns The resolved path (absolute). `false` means to skip resolving.
  */
-export const createDefaultResolver: () => Resolver = () => async (specifier, options) => {
+export const createDefaultResolver: (defaultResolverOptions?: DefaultResolverOptions | undefined) => Resolver = (
+  defaultResolverOptions,
+) => {
   const relativeResolver = createRelativeResolver();
   const nodeResolver = createNodeResolver();
-  const webpackResolver = createWebpackResolver();
+  const webpackResolver = createWebpackResolver(defaultResolverOptions);
 
   // In less-loader, `relativeResolver` has priority over `webpackResolver`.
   // happy-css-modules follows suit.
+  // ref: https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L588-L596
   // ref: https://github.com/webpack-contrib/less-loader/tree/454e187f58046356c3d383d67fda763db8bfc528#webpack-resolver
   const resolvers = [relativeResolver, nodeResolver, webpackResolver];
-  for (const resolver of resolvers) {
-    try {
-      const resolved = await resolver(specifier, options);
-      if (resolved !== false) {
-        const isExists = await exists(resolved);
-        if (isExists) return resolved;
+
+  return async (specifier, options) => {
+    for (const resolver of resolvers) {
+      try {
+        const resolved = await resolver(specifier, options);
+        if (resolved !== false) {
+          const isExists = await exists(resolved);
+          if (isExists) return resolved;
+        }
+      } catch (e) {
+        // noop
       }
-    } catch (e) {
-      // noop
     }
-  }
-  return false;
+    return false;
+  };
 };

package/src/resolver/webpack-resolver.test.ts

@@ -1,10 +1,15 @@
 import { createFixtures, getFixturePath } from '../test/util.js';
 import { createWebpackResolver } from './webpack-resolver.js';
 
-const webpackResolver = createWebpackResolver();
-const request = getFixturePath('/test/1.css');
-
-test('resolves specifier with webpack mechanism', async () => {
+test('resolves specifier with css-loader mechanism', async () => {
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
+  const request = getFixturePath('/test/1.css');
   createFixtures({
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.css': `.a {}`,
@@ -13,8 +18,8 @@ test('resolves specifier with webpack mechanism', async () => {
     '/node_modules/package-4/style.css': `.a {}`,
     '/node_modules/@scoped/package-5/index.css': `.a {}`,
     '/node_modules/package-6/index.css': `.a {}`,
-    '/node_modules/package-7/index.scss': `.a { dummy: ''; }`,
-    '/node_modules/package-8/index.less': `.a { dummy: ''; }`,
+    '/test/alias-relative/alias.css': `.a {}`,
+    '/test/alias-absolute/alias.css': `.a {}`,
   });
   expect(await webpackResolver('~package-1/index.css', { request })).toBe(
     getFixturePath('/node_modules/package-1/index.css'),
@@ -28,6 +33,93 @@ test('resolves specifier with webpack mechanism', async () => {
   expect(await webpackResolver('package-6/index.css', { request })).toBe(
     getFixturePath('/node_modules/package-6/index.css'),
   );
-  expect(await webpackResolver('~package-7', { request })).toBe(getFixturePath('/node_modules/package-7/index.scss'));
-  expect(await webpackResolver('~package-8', { request })).toBe(getFixturePath('/node_modules/package-8/index.less'));
+  expect(await webpackResolver('@relative/alias.css', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.css'),
+  );
+  expect(await webpackResolver('@absolute/alias.css', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.css'),
+  );
+});
+
+test('resolves specifier with sass-loader mechanism', async () => {
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    sassLoadPaths: ['test/load-paths-relative', getFixturePath('/test/load-paths-absolute')],
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
+  const request = getFixturePath('/test/1.scss');
+  createFixtures({
+    '/node_modules/package-1/index.scss': `.a {}`,
+    '/test/load-paths-relative/load-paths-relative.scss': `.a {}`,
+    '/test/load-paths-absolute/load-paths-absolute.scss': `.a {}`,
+    '/test/_partial-import.scss': `.a {}`,
+    '/test/alias-relative/alias.scss': `.a {}`,
+    '/test/alias-absolute/alias.scss': `.a {}`,
+  });
+  expect(await webpackResolver('~package-1/index.scss', { request })).toBe(
+    getFixturePath('/node_modules/package-1/index.scss'),
+  );
+  expect(await webpackResolver('~package-1', { request })).toBe(getFixturePath('/node_modules/package-1/index.scss'));
+  // ref: https://github.com/webpack-contrib/sass-loader/blob/bed9fb5799a90020d43f705ea405f85b368621d7/test/scss/import-include-paths.scss#L1
+  expect(await webpackResolver('load-paths-relative', { request })).toBe(
+    getFixturePath('/test/load-paths-relative/load-paths-relative.scss'),
+  );
+  expect(await webpackResolver('load-paths-absolute', { request })).toBe(
+    getFixturePath('/test/load-paths-absolute/load-paths-absolute.scss'),
+  );
+  // https://sass-lang.com/documentation/at-rules/import#partials
+  // https://github.com/webpack-contrib/sass-loader/blob/0e9494074f69a6b6d47efea6c083a02a31a5ae84/test/sass/import-with-underscore.sass
+  expect(await webpackResolver('partial-import', { request: getFixturePath('/test/1.scss') })).toBe(
+    getFixturePath('/test/_partial-import.scss'),
+  );
+  expect(await webpackResolver('test/partial-import', { request: getFixturePath('/test') })).toBe(
+    getFixturePath('/test/_partial-import.scss'),
+  );
+  expect(await webpackResolver('@relative/alias.scss', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.scss'),
+  );
+  expect(await webpackResolver('@absolute/alias.scss', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.scss'),
+  );
+});
+
+test('resolves specifier with less-loader mechanism', async () => {
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    lessIncludePaths: ['test/include-paths-relative', getFixturePath('/test/include-paths-absolute')],
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
+  const request = getFixturePath('/test/1.less');
+  createFixtures({
+    '/node_modules/package-1/index.less': `.a {}`,
+    '/test/include-paths-relative/include-paths-relative.less': `.a {}`,
+    '/test/include-paths-absolute/include-paths-absolute.less': `.a {}`,
+    '/test/alias-relative/alias.less': `.a {}`,
+    '/test/alias-absolute/alias.less': `.a {}`,
+  });
+  expect(await webpackResolver('~package-1/index.less', { request })).toBe(
+    getFixturePath('/node_modules/package-1/index.less'),
+  );
+  expect(await webpackResolver('~package-1', { request })).toBe(getFixturePath('/node_modules/package-1/index.less'));
+  // ref: https://github.com/webpack-contrib/less-loader/blob/81a0d27eb6d18e5dc550a60fc1007fdc77305b78/test/loader.test.js#L248-L253
+  // ref: https://github.com/webpack-contrib/less-loader/blob/393147064672ace986ec84aca21f69f0ab819a9c/test/fixtures/import-paths.less#L1
+  // ref: https://github.com/webpack-contrib/less-loader/blob/99d80bd290dae50375db6e17c5f56ec33754e258/test/helpers/getCodeFromLess.js#L47-L54
+  expect(await webpackResolver('include-paths-relative', { request })).toBe(
+    getFixturePath('/test/include-paths-relative/include-paths-relative.less'),
+  );
+  expect(await webpackResolver('include-paths-absolute', { request })).toBe(
+    getFixturePath('/test/include-paths-absolute/include-paths-absolute.less'),
+  );
+  expect(await webpackResolver('@relative/alias.less', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.less'),
+  );
+  expect(await webpackResolver('@absolute/alias.less', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.less'),
+  );
 });

package/src/resolver/webpack-resolver.ts

@@ -1,71 +1,125 @@
-import { dirname } from 'path';
+import { basename, dirname, join, resolve } from 'path';
 import enhancedResolve from 'enhanced-resolve';
 import { exists } from '../util.js';
 import type { Resolver } from './index.js';
 
-/**
- * A resolver compatible with css-loader.
- *
- * @see https://github.com/webpack-contrib/css-loader/blob/897e7dd250ccdb0d31e6c66d4cd0d009f2022a85/src/plugins/postcss-import-parser.js#L228-L235
- */
-const cssLoaderResolver = enhancedResolve.create.sync({
-  dependencyType: 'css',
-  conditionNames: ['style'],
-  // We are not sure how "..." affects behavior...
-  mainFields: ['css', 'style', 'main', '...'],
-  mainFiles: ['index', '...'],
-  extensions: ['.css', '...'],
-  preferRelative: true,
-});
+export type WebpackResolverOptions = {
+  /** Working directory path. */
+  cwd?: string | undefined;
+  /**
+   * The option compatible with sass's `--load-path`. It is an array of relative or absolute paths.
+   * @example ['src/styles']
+   * @example ['/home/user/repository/src/styles']
+   */
+  sassLoadPaths?: string[] | undefined;
+  /**
+   * The option compatible with less's `--include-path`. It is an array of relative or absolute paths.
+   * @example ['src/styles']
+   * @example ['/home/user/repository/src/styles']
+   */
+  lessIncludePaths?: string[] | undefined;
+  /**
+   * The option compatible with webpack's `resolve.alias`. It is an object consisting of a pair of alias names and relative or absolute paths.
+   * @example { style: 'src/styles', '@': 'src' }
+   * @example { style: '/home/user/repository/src/styles', '@': '/home/user/repository/src' }
+   */
+  webpackResolveAlias?: Record<string, string> | undefined;
+};
 
-/**
- * A resolver compatible with sass-loader.
- *
- * @see https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L531-L539
- */
-const sassLoaderResolver = enhancedResolve.create.sync({
-  dependencyType: 'sass',
-  conditionNames: ['sass', 'style'],
-  mainFields: ['sass', 'style', 'main', '...'],
-  mainFiles: ['_index', 'index', '...'],
-  extensions: ['.sass', '.scss', '.css'],
-  restrictions: [/\.((sa|sc|c)ss)$/i],
-  preferRelative: true,
-});
+// TODO: Support `resolve.alias` for Node.js API
+export const createWebpackResolver: (webpackResolverOptions?: WebpackResolverOptions | undefined) => Resolver = (
+  webpackResolverOptions,
+) => {
+  const cwd = webpackResolverOptions?.cwd ?? process.cwd();
+  const sassLoadPaths = webpackResolverOptions?.sassLoadPaths?.map((path) => resolve(cwd, path));
+  const lessIncludePaths = webpackResolverOptions?.lessIncludePaths?.map((path) => resolve(cwd, path));
+  const webpackResolveAlias = webpackResolverOptions?.webpackResolveAlias
+    ? Object.fromEntries(
+        Object.entries(webpackResolverOptions?.webpackResolveAlias).map(([key, value]) => [key, resolve(cwd, value)]),
+      )
+    : undefined;
+  /**
+   * A resolver compatible with css-loader.
+   *
+   * @see https://github.com/webpack-contrib/css-loader/blob/897e7dd250ccdb0d31e6c66d4cd0d009f2022a85/src/plugins/postcss-import-parser.js#L228-L235
+   */
+  const cssLoaderResolver = enhancedResolve.create.sync({
+    dependencyType: 'css',
+    conditionNames: ['style'],
+    // We are not sure how "..." affects behavior...
+    mainFields: ['css', 'style', 'main', '...'],
+    mainFiles: ['index', '...'],
+    extensions: ['.css', '...'],
+    preferRelative: true,
+    alias: webpackResolveAlias,
+  });
 
-/**
- * A resolver compatible with less-loader.
- *
- * @see https://github.com/webpack-contrib/less-loader/blob/d74f740c100c4006b00dfb3e02c6d5aaf8713519/src/utils.js#L35-L42
- */
-const lessLoaderResolver = enhancedResolve.create.sync({
-  dependencyType: 'less',
-  conditionNames: ['less', 'style'],
-  mainFields: ['less', 'style', 'main', '...'],
-  mainFiles: ['index', '...'],
-  extensions: ['.less', '.css'],
-  preferRelative: true,
-});
+  /**
+   * A resolver compatible with sass-loader.
+   *
+   * @see https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L531-L539
+   */
+  const sassLoaderResolver = enhancedResolve.create.sync({
+    dependencyType: 'sass',
+    conditionNames: ['sass', 'style'],
+    mainFields: ['sass', 'style', 'main', '...'],
+    mainFiles: ['_index', 'index', '...'],
+    extensions: ['.sass', '.scss', '.css'],
+    restrictions: [/\.((sa|sc|c)ss)$/i],
+    preferRelative: true,
+    alias: webpackResolveAlias,
+    modules: ['node_modules', ...(sassLoadPaths ?? [])],
+  });
 
-// TODO: Support `resolve.alias` for Node.js API
-export const createWebpackResolver: () => Resolver = () => async (specifier, options) => {
-  // `~` prefix is optional.
-  // ref: https://github.com/webpack-contrib/less-loader/tree/454e187f58046356c3d383d67fda763db8bfc528#webpack-resolver
-  if (specifier.startsWith('~')) specifier = specifier.slice(1);
+  /**
+   * A resolver compatible with less-loader.
+   *
+   * @see https://github.com/webpack-contrib/less-loader/blob/d74f740c100c4006b00dfb3e02c6d5aaf8713519/src/utils.js#L35-L42
+   */
+  const lessLoaderResolver = enhancedResolve.create.sync({
+    dependencyType: 'less',
+    conditionNames: ['less', 'style'],
+    mainFields: ['less', 'style', 'main', '...'],
+    mainFiles: ['index', '...'],
+    extensions: ['.less', '.css'],
+    preferRelative: true,
+    alias: webpackResolveAlias,
+    modules: ['node_modules', ...(lessIncludePaths ?? [])],
+  });
 
   // NOTE: In theory, `sassLoaderResolver` should only be used when the resolver is called from `sassTransformer`.
   // However, we do not implement such behavior because it is cumbersome. If someone wants it, we will implement it.
   const resolvers = [cssLoaderResolver, sassLoaderResolver, lessLoaderResolver];
-  for (const resolver of resolvers) {
-    try {
-      const resolved = resolver(dirname(options.request), specifier);
-      if (resolved !== false) {
-        const isExists = await exists(resolved);
-        if (isExists) return resolved;
+
+  return async (specifier, options) => {
+    // `~` prefix is optional.
+    // ref: https://github.com/webpack-contrib/css-loader/blob/5e6cf91fd3f0c8b5fb4b91197b98dc56abdef4bf/src/utils.js#L92-L95
+    // ref: https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L368-L370
+    // ref: https://github.com/webpack-contrib/less-loader/blob/d74f740c100c4006b00dfb3e02c6d5aaf8713519/src/utils.js#L72-L75
+    if (specifier.startsWith('~')) specifier = specifier.slice(1);
+
+    for (const resolver of resolvers) {
+      const specifierVariants =
+        resolver === sassLoaderResolver
+          ? // Support partial import for sass
+            // https://sass-lang.com/documentation/at-rules/import#partials
+            // https://github.com/webpack-contrib/sass-loader/blob/0e9494074f69a6b6d47efea6c083a02a31a5ae84/test/sass/import-with-underscore.sass
+            [join(dirname(specifier), '_' + basename(specifier)), specifier]
+          : [specifier];
+
+      for (const specifierVariant of specifierVariants) {
+        try {
+          const resolved = resolver(dirname(options.request), specifierVariant);
+          if (resolved !== false) {
+            const isExists = await exists(resolved);
+            if (isExists) return resolved;
+          }
+        } catch (e) {
+          // noop
+        }
       }
-    } catch (e) {
-      // noop
     }
-  }
-  return false;
+
+    return false;
+  };
 };