happy-css-modules 0.2.0

package/src/loader/postcss.test.ts

@@ -0,0 +1,336 @@
+import dedent from 'dedent';
+import {
+  createRoot,
+  createClassSelectors,
+  createAtImports,
+  createComposesDeclarations,
+  createFixtures,
+} from '../test/util.js';
+import {
+  generateLocalTokenNames,
+  getOriginalLocation,
+  parseAtImport,
+  parseComposesDeclarationWithFromUrl,
+  collectNodes,
+} from './postcss.js';
+
+describe('generateLocalTokenNames', () => {
+  test('basic', async () => {
+    expect(
+      await generateLocalTokenNames(
+        createRoot(`
+        .basic {}
+        .cascading {}
+        .cascading {}
+        .pseudo_class_1 {}
+        .pseudo_class_2:hover {}
+        :not(.pseudo_class_3) {}
+        .multiple_selector_1.multiple_selector_2 {}
+        .combinator_1 + .combinator_2 {}
+        @supports (display: flex) {
+          @media screen and (min-width: 900px) {
+            .at_rule {}
+          }
+        }
+        .selector_list_1, .selector_list_2 {}
+        :local .local_class_name_1 {}
+        :local {
+          .local_class_name_2 {}
+          .local_class_name_3 {}
+        }
+        :local(.local_class_name_4) {}
+        .composes_target {}
+        .composes {
+          composes: composes_target;
+        }
+        `),
+      ),
+    ).toStrictEqual([
+      'basic',
+      'cascading',
+      'pseudo_class_1',
+      'pseudo_class_2',
+      'pseudo_class_3',
+      'multiple_selector_1',
+      'multiple_selector_2',
+      'combinator_1',
+      'combinator_2',
+      'at_rule',
+      'selector_list_1',
+      'selector_list_2',
+      'local_class_name_1',
+      'local_class_name_2',
+      'local_class_name_3',
+      'local_class_name_4',
+      'composes_target',
+      'composes',
+    ]);
+  });
+  test('does not track styles imported by @import in other file because it is not a local token', async () => {
+    createFixtures({
+      '/test/1.css': dedent`
+      .a {}
+      `,
+    });
+    expect(
+      await generateLocalTokenNames(
+        createRoot(`
+        @import "/test/1.css";
+        `),
+      ),
+    ).toStrictEqual([]);
+  });
+  test('does not track styles imported by composes in other file because it is not a local token', async () => {
+    createFixtures({
+      '/test/1.css': dedent`
+      .b {}
+      `,
+    });
+    expect(
+      await generateLocalTokenNames(
+        createRoot(`
+        .a {
+          composes: b from "/test/1.css";
+        }
+        `),
+      ),
+    ).toStrictEqual(['a']);
+  });
+});
+
+describe('getOriginalLocation', () => {
+  test('basic', () => {
+    const [basic] = createClassSelectors(
+      createRoot(dedent`
+      .basic {}
+      `),
+    );
+    expect(getOriginalLocation(basic!.rule, basic!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 6 } }`,
+    );
+  });
+  test('cascading', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [cascading_1, cascading_2] = createClassSelectors(
+      createRoot(dedent`
+      .cascading {}
+      .cascading {}
+      `),
+    );
+    expect(getOriginalLocation(cascading_1!.rule, cascading_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 10 } }`,
+    );
+    expect(getOriginalLocation(cascading_2!.rule, cascading_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 10 } }`,
+    );
+  });
+  test('pseudo_class', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [pseudo_class_1, pseudo_class_2, pseudo_class_3] = createClassSelectors(
+      createRoot(dedent`
+      .pseudo_class_1 {}
+      .pseudo_class_2:hover {}
+      :not(.pseudo_class_3) {}
+      `),
+    );
+    expect(getOriginalLocation(pseudo_class_1!.rule, pseudo_class_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 15 } }`,
+    );
+    expect(getOriginalLocation(pseudo_class_2!.rule, pseudo_class_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 15 } }`,
+    );
+    expect(getOriginalLocation(pseudo_class_3!.rule, pseudo_class_3!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 3, column: 6 }, end: { line: 3, column: 20 } }`,
+    );
+  });
+  test('multiple_selector', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [multiple_selector_1, multiple_selector_2] = createClassSelectors(
+      createRoot(dedent`
+      .multiple_selector_1.multiple_selector_2 {}
+      `),
+    );
+    expect(getOriginalLocation(multiple_selector_1!.rule, multiple_selector_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 20 } }`,
+    );
+    expect(getOriginalLocation(multiple_selector_2!.rule, multiple_selector_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 21 }, end: { line: 1, column: 40 } }`,
+    );
+  });
+
+  test('combinator', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [combinator_1, combinator_2] = createClassSelectors(
+      createRoot(dedent`
+      .combinator_1 + .combinator_2 {}
+      `),
+    );
+    expect(getOriginalLocation(combinator_1!.rule, combinator_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 13 } }`,
+    );
+    expect(getOriginalLocation(combinator_2!.rule, combinator_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 17 }, end: { line: 1, column: 29 } }`,
+    );
+  });
+  test('at_rule', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [at_rule] = createClassSelectors(
+      createRoot(dedent`
+      @supports (display: flex) {
+        @media screen and (min-width: 900px) {
+          .at_rule {}
+        }
+      }
+      `),
+    );
+    expect(getOriginalLocation(at_rule!.rule, at_rule!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 3, column: 5 }, end: { line: 3, column: 12 } }`,
+    );
+  });
+  test('selector_list', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [selector_list_1, selector_list_2] = createClassSelectors(
+      createRoot(dedent`
+      .selector_list_1, .selector_list_2 {}
+      `),
+    );
+    expect(getOriginalLocation(selector_list_1!.rule, selector_list_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 16 } }`,
+    );
+    expect(getOriginalLocation(selector_list_2!.rule, selector_list_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 19 }, end: { line: 1, column: 34 } }`,
+    );
+  });
+  test('local_class_name', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [local_class_name_1, local_class_name_2, local_class_name_3, local_class_name_4] = createClassSelectors(
+      createRoot(dedent`
+      :local .local_class_name_1 {}
+      :local {
+        .local_class_name_2 {}
+        .local_class_name_3 {}
+      }
+      :local(.local_class_name_4) {}
+      `),
+    );
+    expect(getOriginalLocation(local_class_name_1!.rule, local_class_name_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 8 }, end: { line: 1, column: 26 } }`,
+    );
+    expect(getOriginalLocation(local_class_name_2!.rule, local_class_name_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 3, column: 3 }, end: { line: 3, column: 21 } }`,
+    );
+    expect(getOriginalLocation(local_class_name_3!.rule, local_class_name_3!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 4, column: 3 }, end: { line: 4, column: 21 } }`,
+    );
+    expect(getOriginalLocation(local_class_name_4!.rule, local_class_name_4!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 6, column: 8 }, end: { line: 6, column: 26 } }`,
+    );
+  });
+  test('composes', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [composes_target, composes] = createClassSelectors(
+      createRoot(dedent`
+      .composes_target {}
+      .composes {
+        composes: composes_target;
+      }
+      `),
+    );
+    expect(getOriginalLocation(composes_target!.rule, composes_target!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 16 } }`,
+    );
+    expect(getOriginalLocation(composes!.rule, composes!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 9 } }`,
+    );
+  });
+  test('with_newline', () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [with_newline_1, with_newline_2, with_newline_3] = createClassSelectors(
+      createRoot(dedent`
+      .with_newline_1,
+      .with_newline_2
+        + .with_newline_3, {}
+      `),
+    );
+    expect(getOriginalLocation(with_newline_1!.rule, with_newline_1!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 15 } }`,
+    );
+    expect(getOriginalLocation(with_newline_2!.rule, with_newline_2!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 15 } }`,
+    );
+
+    expect(getOriginalLocation(with_newline_3!.rule, with_newline_3!.classSelector)).toMatchInlineSnapshot(
+      `{ filePath: "/test/test.css", start: { line: 3, column: 5 }, end: { line: 3, column: 19 } }`,
+    );
+  });
+});
+
+test('collectNodes', () => {
+  const ast = createRoot(dedent`
+    @import;
+    @import "test.css";
+    @ignored;
+    .a { ignored: "ignored"; composes: a; }
+    .b { ignored: "ignored"; composes: b; }
+    `);
+
+  const { atImports, classSelectors, composesDeclarations } = collectNodes(ast);
+
+  expect(atImports).toHaveLength(2);
+  expect(atImports[0]!.toString()).toEqual('@import');
+  expect(atImports[1]!.toString()).toEqual('@import "test.css"');
+  expect(classSelectors).toHaveLength(2);
+  expect(classSelectors[0]!.rule.toString()).toEqual('.a { ignored: "ignored"; composes: a; }');
+  expect(classSelectors[0]!.classSelector.toString()).toEqual('.a');
+  expect(classSelectors[1]!.rule.toString()).toEqual('.b { ignored: "ignored"; composes: b; }');
+  expect(classSelectors[1]!.classSelector.toString()).toEqual('.b');
+  expect(composesDeclarations).toHaveLength(2);
+  expect(composesDeclarations[0]!.toString()).toEqual('composes: a');
+  expect(composesDeclarations[1]!.toString()).toEqual('composes: b');
+});
+
+test('parseAtImport', () => {
+  const atImports = createAtImports(
+    createRoot(dedent`
+    @import;
+    @import "test.css";
+    @import url("test.css");
+    @import url(test.css);
+    @import "test.css" print;
+    `),
+  );
+  expect(parseAtImport(atImports[0]!)).toBe(undefined);
+  expect(parseAtImport(atImports[1]!)).toBe('test.css');
+  expect(parseAtImport(atImports[2]!)).toBe('test.css');
+  expect(parseAtImport(atImports[3]!)).toBe('test.css');
+  expect(parseAtImport(atImports[4]!)).toBe('test.css');
+});
+
+test('parseComposesDeclarationWithFromUrl', () => {
+  const composesDeclarations = createComposesDeclarations(
+    createRoot(dedent`
+    .a {
+      composes: a;
+      composes: a b c;
+      composes: a from "test.css";
+      composes: a b c from "test.css";
+      composes: from from from from "test.css";
+      /* NOTE: CSS Modules do not support '... from url("test.css")'. */
+    }
+    `),
+  );
+  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[0]!)).toStrictEqual(undefined);
+  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[1]!)).toStrictEqual(undefined);
+  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[2]!)).toStrictEqual({
+    from: 'test.css',
+    tokenNames: ['a'],
+  });
+  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[3]!)).toStrictEqual({
+    from: 'test.css',
+    tokenNames: ['a', 'b', 'c'],
+  });
+  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[4]!)).toStrictEqual({
+    from: 'test.css',
+    tokenNames: ['from', 'from', 'from'], // do not deduplicate.
+  });
+});

package/src/loader/postcss.ts

@@ -0,0 +1,239 @@
+import postcss, { type Rule, type AtRule, type Root, type Node, type Declaration, type Plugin } from 'postcss';
+import modules from 'postcss-modules';
+import selectorParser, { type ClassName } from 'postcss-selector-parser';
+import valueParser from 'postcss-value-parser';
+
+/** The pair of line number and column number. */
+export type Position = {
+  /** The line number in the source file. It is 1-based (compatible with postcss). */
+  line: number;
+  /** The column number in the source file. It is 1-based (compatible with postcss). */
+  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;
+};
+
+function removeDependenciesPlugin(): Plugin {
+  return {
+    postcssPlugin: 'remove-dependencies',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    AtRule(atRule) {
+      if (isAtImportNode(atRule)) {
+        atRule.remove();
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Declaration(declaration) {
+      if (isComposesDeclaration(declaration)) {
+        declaration.remove();
+      }
+    },
+  };
+}
+
+/**
+ * Traverses a local token from the AST and returns its name.
+ * @param ast The AST to traverse.
+ * @returns The name of the local token.
+ */
+export async function generateLocalTokenNames(ast: Root): Promise<string[]> {
+  return new Promise((resolve, reject) => {
+    postcss
+      .default()
+      // postcss-modules collects tokens (i.e., includes external tokens) by following
+      // the dependencies specified in the @import and composes properties.
+      // However, we do not want `generateLocalTokenNames` to return external tokens.
+      // So we remove the @import and composes properties beforehand.
+      .use(removeDependenciesPlugin())
+      .use(
+        modules({
+          getJSON: (_cssFileName, json) => {
+            resolve(Object.keys(json));
+          },
+        }),
+      )
+      // NOTE: `process` modifies ast, so clone it.
+      .process(ast.clone())
+      .catch(reject);
+  });
+}
+
+/**
+ * Get the token's location on the source file.
+ * @param rule The rule node that contains the token.
+ * @param classSelector The class selector node that contains the token.
+ * @returns The token's location on the source file.
+ */
+export function getOriginalLocation(rule: Rule, classSelector: ClassName): Location {
+  // The node derived from `postcss.parse` always has `source` property. Therefore, this line is unreachable.
+  if (rule.source === undefined || classSelector.source === undefined) throw new Error('Node#source is undefined');
+  // The node derived from `postcss.parse` always has `start` and `end` property. Therefore, this line is unreachable.
+  if (rule.source.start === undefined || classSelector.source.start === undefined)
+    throw new Error('Node#start is undefined');
+  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 = {
+    // 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,
+    // The column is inclusive.
+    column: start.column + classSelector.value.length,
+  };
+  let location = {
+    filePath: rule.source.input.file,
+    start,
+    end,
+  };
+
+  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),
+      },
+    };
+  }
+
+  return location;
+}
+
+function isAtRuleNode(node: Node): node is AtRule {
+  return node.type === 'atrule';
+}
+
+function isAtImportNode(node: Node): node is AtRule {
+  return isAtRuleNode(node) && node.name === 'import';
+}
+
+function isRuleNode(node: Node): node is Rule {
+  return node.type === 'rule';
+}
+
+function isDeclaration(node: Node): node is Declaration {
+  return node.type === 'decl';
+}
+
+function isComposesDeclaration(node: Node): node is Declaration {
+  return isDeclaration(node) && node.prop === 'composes';
+}
+
+type CollectNodesResult = {
+  atImports: AtRule[];
+  classSelectors: { rule: Rule; classSelector: ClassName }[];
+  composesDeclarations: Declaration[];
+};
+
+/**
+ * Collect nodes from the AST.
+ * @param ast The AST.
+ */
+export function collectNodes(ast: Root): CollectNodesResult {
+  const atImports: AtRule[] = [];
+  const classSelectors: { rule: Rule; classSelector: ClassName }[] = [];
+  const composesDeclarations: Declaration[] = [];
+  ast.walk((node) => {
+    if (isAtImportNode(node)) {
+      atImports.push(node);
+    } else if (isRuleNode(node)) {
+      // In `rule.selector` comes the following string:
+      // 1. ".foo"
+      // 2. ".foo:hover"
+      // 3. ".foo, .bar"
+      selectorParser((selectors) => {
+        selectors.walk((selector) => {
+          if (selector.type === 'class') {
+            // In `selector.value` comes the following string:
+            // 1. "foo"
+            // 2. "bar"
+            classSelectors.push({ rule: node, classSelector: selector });
+          }
+        });
+      }).processSync(node);
+    } else if (isComposesDeclaration(node)) {
+      composesDeclarations.push(node);
+    }
+  });
+  return { atImports, classSelectors, composesDeclarations };
+}
+
+/**
+ * Parse the `@import` rule.
+ * @param atImport The `@import` rule to parse.
+ * @returns The imported sheet path.
+ */
+export function parseAtImport(atImport: AtRule): string | undefined {
+  const firstNode = valueParser(atImport.params).nodes[0];
+  if (firstNode === undefined) return undefined;
+  if (firstNode.type === 'string') return firstNode.value;
+  if (firstNode.type === 'function' && firstNode.value === 'url') {
+    if (firstNode.nodes[0] === undefined) return undefined;
+    if (firstNode.nodes[0].type === 'string') return firstNode.nodes[0].value;
+    if (firstNode.nodes[0].type === 'word') return firstNode.nodes[0].value;
+  }
+  return undefined;
+}
+
+/**
+ * Parse `composes` declaration with `from <url>`.
+ * If the declaration is not found or do not have `from <url>`, return `undefined`.
+ * @param composesDeclaration The `composes` declaration to parse.
+ * @returns The information of the declaration.
+ */
+export function parseComposesDeclarationWithFromUrl(
+  composesDeclaration: Declaration,
+): { from: string; tokenNames: string[] } | undefined {
+  // NOTE: `composes` property syntax is...
+  // - syntax: `composes: <class-name> [...<class-name>] [from <url>];`
+  // - variables:
+  //   - `<class-name>`: `<sting>`
+  //   - `<url>`: `<string>`
+  // - ref:
+  //   - https://github.com/css-modules/css-modules#composition
+  //   - https://github.com/css-modules/css-modules#composing-from-other-files
+  //   - https://github.com/css-modules/postcss-modules-extract-imports#specification
+
+  const nodes = valueParser(composesDeclaration.value).nodes;
+  if (nodes.length < 5) return undefined;
+
+  const classNamesOrSpaces = nodes.slice(0, -3);
+  const [from, , url] = nodes.slice(-3);
+
+  const classNames = classNamesOrSpaces.filter((node) => node.type === 'word');
+
+  // validate nodes
+  if (from === undefined) return undefined;
+  if (from.type !== 'word' || from.value !== 'from') return undefined;
+  if (url === undefined) return undefined;
+  if (url.type !== 'string') return undefined;
+  if (classNames.length === 0) return undefined;
+
+  return { from: url.value, tokenNames: classNames.map((node) => node.value) };
+}

package/src/resolver/index.test.ts

@@ -0,0 +1,17 @@
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createDefaultResolver } from './index.js';
+
+const defaultResolver = createDefaultResolver();
+const request = getFixturePath('/test/1.css');
+
+test('resolve with webpackResolver when other resolvers fail to resolve', async () => {
+  createFixtures({
+    '/test/2.css': `.a {}`,
+    '/test/3.css': `.a {}`,
+    '/node_modules/3.css/index.css': `.a {}`,
+    '/node_modules/4.css/index.css': `.a {}`,
+  });
+  expect(await defaultResolver('2.css', { request })).toBe(getFixturePath('/test/2.css'));
+  expect(await defaultResolver('3.css', { request })).toBe(getFixturePath('/test/3.css'));
+  expect(await defaultResolver('~4.css', { request })).toBe(getFixturePath('/node_modules/4.css/index.css'));
+});

package/src/resolver/index.ts

@@ -0,0 +1,48 @@
+import { exists } from '../util.js';
+import { createNodeResolver } from './node-resolver.js';
+import { createRelativeResolver } from './relative-resolver.js';
+import { createWebpackResolver } from './webpack-resolver.js';
+
+export type ResolverOptions = {
+  request: string;
+};
+
+/**
+ * The function to resolve the path of the imported file.
+ * @returns The resolved path of the imported file. `false` means to skip resolving.
+ * */
+export type Resolver = (specifier: string, options: ResolverOptions) => string | false | Promise<string | false>;
+
+/**
+ * The Default resolver.
+ *
+ * This resolver implements a resolve algorithm that is as compatible as possible with the major toolchains,
+ * including Node.js, webpack (css-loader, sass-loader, less-loader) and vite. It is difficult to completely
+ * mimic the behavior of these toolchains, so the behavior may differ in some cases.
+ *
+ * @param specifier The specifier to resolve (i.e. './foo.css', '~bootstrap', etc.)
+ * @param options The options to resolve
+ * @returns The resolved path (absolute). `false` means to skip resolving.
+ */
+export const createDefaultResolver: () => Resolver = () => async (specifier, options) => {
+  const relativeResolver = createRelativeResolver();
+  const nodeResolver = createNodeResolver();
+  const webpackResolver = createWebpackResolver();
+
+  // In less-loader, `relativeResolver` has priority over `webpackResolver`.
+  // happy-css-modules follows suit.
+  // 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;
+      }
+    } catch (e) {
+      // noop
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,26 @@
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createNodeResolver } from './node-resolver.js';
+
+const nodeResolver = createNodeResolver();
+const request = getFixturePath('/test/1.css');
+
+test('resolves specifier with node mechanism', async () => {
+  createFixtures({
+    '/test/2.css': `.a {}`,
+    '/test/dir/3.css': `.a {}`,
+    '/4.css': `.a {}`,
+    '/test/5.css': `.a {}`,
+    '/node_modules/package-1/6.css': `.a {}`,
+    '/package.json': `{ "imports": { "#subpath-1": "./test/7.css", "#subpath-2/*.css": "./test/*.css" } }`,
+    '/test/7.css': `.a {}`,
+    '/test/8.css': `.a {}`,
+  });
+  expect(await nodeResolver('./2.css', { request })).toBe(getFixturePath('/test/2.css'));
+  expect(await nodeResolver('./dir/3.css', { request })).toBe(getFixturePath('/test/dir/3.css'));
+  expect(await nodeResolver('../4.css', { request })).toBe(getFixturePath('/4.css'));
+  expect(await nodeResolver(getFixturePath('/test/5.css'), { request })).toBe(getFixturePath('/test/5.css'));
+  expect(await nodeResolver('package-1/6.css', { request })).toBe(getFixturePath('/node_modules/package-1/6.css'));
+  expect(await nodeResolver('#subpath-1', { request })).toBe(getFixturePath('/test/7.css'));
+  // FIXME: For some reason, it does not pass...
+  // expect(await nodeResolver('#subpath-2/8.css', { request })).toBe(getFixturePath('/test/8.css'));
+});

package/src/resolver/node-resolver.ts

@@ -0,0 +1,7 @@
+import { fileURLToPath, pathToFileURL } from 'url';
+import { resolve } from 'import-meta-resolve';
+import type { Resolver } from './index.js';
+
+export const createNodeResolver: () => Resolver = () => async (specifier, options) => {
+  return fileURLToPath(await resolve(specifier, pathToFileURL(options.request).href));
+};