happy-css-modules 0.2.1 → 0.4.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

@@ -57,6 +57,7 @@ test('tracks other files when `@import` is present', async () => {
     @import './2.css';
     @import '3.css';
     @import '${getFixturePath('/test/4.css')}';
+    @import './5.css';
     `,
     '/test/2.css': dedent`
     .a {}
@@ -67,11 +68,23 @@ test('tracks other files when `@import` is present', async () => {
     '/test/4.css': dedent`
     .c {}
     `,
+    '/test/5.css': dedent`
+    @import './5-recursive.css';
+    `,
+    '/test/5-recursive.css': dedent`
+    .d {}
+    `,
   });
   const result = await loader.load(getFixturePath('/test/1.css'));
   expect(result).toMatchInlineSnapshot(`
     {
-      dependencies: ["<fixtures>/test/2.css", "<fixtures>/test/3.css", "<fixtures>/test/4.css"],
+      dependencies: [
+        "<fixtures>/test/2.css",
+        "<fixtures>/test/3.css",
+        "<fixtures>/test/4.css",
+        "<fixtures>/test/5.css",
+        "<fixtures>/test/5-recursive.css",
+      ],
       tokens: [
         {
           name: "a",
@@ -91,6 +104,12 @@ test('tracks other files when `@import` is present', async () => {
             { filePath: "<fixtures>/test/4.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
+        {
+          name: "d",
+          originalLocations: [
+            { filePath: "<fixtures>/test/5-recursive.css", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
+          ],
+        },
       ],
     }
   `);
@@ -297,8 +316,8 @@ test.todo('supports sourcemap file and inline sourcemap');
 test('ignores http(s) protocol file', async () => {
   createFixtures({
     '/test/1.css': dedent`
-    @import 'http://example.com/path/1.css';
-    @import 'https://example.com/path/1.css';
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
     `,
   });
   const result = await loader.load(getFixturePath('/test/1.css'));

package/src/loader/index.ts

@@ -130,8 +130,7 @@ export class Loader {
           // less makes a remote module inline, so it may be included in dependencies.
           // However, the dependencies field of happy-css-modules is not yet designed to store http protocol URLs.
           // Therefore, we exclude them from the dependencies field for now.
-          // TODO: Support to store http protocol URLs in the dependencies field.
-          return !(dep.startsWith('http://') || dep.startsWith('https://'));
+          return !isIgnoredSpecifier(dep);
         }),
     };
   }
@@ -167,7 +166,7 @@ export class Loader {
       const from = await this.resolver(importedSheetPath, { request: filePath });
       const result = await this.load(from);
       const externalTokens = result.tokens;
-      dependencies.push(from);
+      dependencies.push(from, ...result.dependencies);
       tokens.push(...externalTokens);
     }
 
@@ -193,7 +192,7 @@ export class Loader {
       const from = await this.resolver(declarationDetail.from, { request: filePath });
       const result = await this.load(from);
       const externalTokens = result.tokens.filter((token) => declarationDetail.tokenNames.includes(token.name));
-      dependencies.push(from);
+      dependencies.push(from, ...result.dependencies);
       tokens.push(...externalTokens);
     }
 

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,9 @@
 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();
+  const request = getFixturePath('/test/1.css');
   createFixtures({
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.css': `.a {}`,
@@ -13,8 +12,6 @@ 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: ''; }`,
   });
   expect(await webpackResolver('~package-1/index.css', { request })).toBe(
     getFixturePath('/node_modules/package-1/index.css'),
@@ -28,6 +25,45 @@ 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'));
+});
+
+test('resolves specifier with sass-loader mechanism', async () => {
+  const webpackResolver = createWebpackResolver({ sassLoadPaths: [getFixturePath('/test/styles')] });
+  const request = getFixturePath('/test/1.scss');
+  createFixtures({
+    '/node_modules/package-1/index.scss': `.a {}`,
+    '/test/styles/load-paths.scss': `.a {}`,
+    '/test/_partial-import.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', { request })).toBe(getFixturePath('/test/styles/load-paths.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'),
+  );
+});
+
+test('resolves specifier with less-loader mechanism', async () => {
+  const webpackResolver = createWebpackResolver({ lessIncludePaths: [getFixturePath('/test/styles')] });
+  const request = getFixturePath('/test/1.less');
+  createFixtures({
+    '/node_modules/package-1/index.less': `.a {}`,
+    '/test/styles/include-paths.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', { request })).toBe(getFixturePath('/test/styles/include-paths.less'));
 });

package/src/resolver/webpack-resolver.ts

@@ -1,71 +1,104 @@
-import { dirname } from 'path';
+import { basename, dirname, join } 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 = {
+  /**
+   * The option compatible with sass's `--load-path`. It is an array of absolute paths.
+   * @example ['/home/user/repository/src/styles']
+   */
+  sassLoadPaths?: string[] | undefined;
+  /**
+   * The option compatible with less's `--include-path`. It is an array of absolute paths.
+   * @example ['/home/user/repository/src/styles']
+   */
+  lessIncludePaths?: 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,
+) => {
+  /**
+   * 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,
+  });
 
-/**
- * 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,
+    modules: ['node_modules', ...(webpackResolverOptions?.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,
+    modules: ['node_modules', ...(webpackResolverOptions?.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;
+  };
 };

package/src/runner.test.ts

@@ -3,6 +3,7 @@ import { jest } from '@jest/globals';
 import chalk from 'chalk';
 import dedent from 'dedent';
 import AggregateError from 'es-aggregate-error';
+import type { Watcher } from './runner.js';
 import { run } from './runner.js';
 import { createFixtures, exists, getFixturePath, waitForAsyncTask } from './test/util.js';
 
@@ -16,6 +17,14 @@ const defaultOptions = {
   cwd: getFixturePath('/'),
 };
 
+// Exit the watcher even if the test fails
+let watcher: Watcher | undefined;
+afterEach(async () => {
+  if (watcher) {
+    await watcher.close();
+  }
+});
+
 test('generates .d.ts and .d.ts.map', async () => {
   createFixtures({
     '/test/1.css': '.a {}',
@@ -49,7 +58,7 @@ test('watches for changes in files', async () => {
   createFixtures({
     '/test': {}, // empty directory
   });
-  const watcher = await run({ ...defaultOptions, watch: true });
+  watcher = await run({ ...defaultOptions, watch: true });
 
   await writeFile(getFixturePath('/test/1.css'), '.a-1 {}');
   await waitForAsyncTask(500); // Wait until the file is written
@@ -58,8 +67,6 @@ test('watches for changes in files', async () => {
   await writeFile(getFixturePath('/test/1.css'), '.a-2 {}');
   await waitForAsyncTask(500); // Wait until the file is written
   expect(await readFile(getFixturePath('/test/1.css.d.ts'), 'utf8')).toMatch(/a-2/);
-
-  await watcher.close();
 });
 test('returns an error if the file fails to process in non-watch mode', async () => {
   createFixtures({
@@ -109,14 +116,40 @@ describe('handles external files', () => {
   test('treats imported tokens from external files the same as local tokens', async () => {
     await run({ ...defaultOptions });
     expect(await readFile(getFixturePath('/test/1.css.d.ts'), 'utf8')).toMatchInlineSnapshot(`
-    "declare const styles:
-      & Readonly<Pick<(typeof import("./2.css"))["default"], "b">>
-      & Readonly<{ "c": string }>
-      & Readonly<{ "a": string }>
-    ;
-    export default styles;
-    //# sourceMappingURL=./1.css.d.ts.map
-    "
-  `);
+          "declare const styles:
+            & Readonly<Pick<(typeof import("./2.css"))["default"], "b">>
+            & Readonly<{ "c": string }>
+            & Readonly<{ "a": string }>
+          ;
+          export default styles;
+          //# sourceMappingURL=./1.css.d.ts.map
+          "
+      `);
+  });
+});
+
+test('sassLoadPaths', async () => {
+  const sassLoadPaths = ['test/relative', getFixturePath('/test/absolute')];
+  createFixtures({
+    '/test/1.scss': dedent`
+    @import '2.scss';
+    @import '3.scss';
+    `,
+    '/test/relative/2.scss': `.a { dummy: ''; }`,
+    '/test/absolute/3.scss': `.b { dummy: ''; }`,
+  });
+  await run({ ...defaultOptions, sassLoadPaths }); // not throw
+});
+
+test('lessIncludePaths', async () => {
+  const lessIncludePaths = ['test/relative', getFixturePath('/test/absolute')];
+  createFixtures({
+    '/test/1.less': dedent`
+    @import '2.less';
+    @import '3.less';
+    `,
+    '/test/relative/2.less': `.a { dummy: ''; }`,
+    '/test/absolute/3.less': `.b { dummy: ''; }`,
   });
+  await run({ ...defaultOptions, lessIncludePaths }); // not throw
 });

package/src/runner.ts

@@ -8,6 +8,7 @@ import _glob from 'glob';
 import { emitGeneratedFiles } from './emitter/index.js';
 import { Loader } from './loader/index.js';
 import type { Resolver } from './resolver/index.js';
+import { createDefaultResolver } from './resolver/index.js';
 import { type Transformer } from './transformer/index.js';
 import { isMatchByGlob } from './util.js';
 
@@ -27,6 +28,18 @@ export interface RunnerOptions {
   declarationMap?: boolean | undefined;
   transformer?: Transformer | undefined;
   resolver?: Resolver | 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;
   /**
    * Silent output. Do not show "files written" messages.
    * @default false
@@ -46,15 +59,21 @@ type OverrideProp<T, K extends keyof T, V extends T[K]> = Omit<T, K> & { [P in K
 export async function run(options: OverrideProp<RunnerOptions, 'watch', true>): Promise<Watcher>;
 export async function run(options: RunnerOptions): Promise<void>;
 export async function run(options: RunnerOptions): Promise<Watcher | void> {
-  const loader = new Loader({ transformer: options.transformer, resolver: options.resolver });
+  const cwd = options.cwd ?? process.cwd();
+  const silent = options.silent ?? false;
+  const sassLoadPaths = options.sassLoadPaths?.map((path) => resolve(cwd, path));
+  const lessIncludePaths = options.lessIncludePaths?.map((path) => resolve(cwd, path));
+  const resolver = options.resolver ?? createDefaultResolver({ sassLoadPaths, lessIncludePaths });
   const distOptions = options.outDir
     ? {
-        rootDir: process.cwd(), // TODO: support `--rootDir` option
+        rootDir: cwd, // TODO: support `--rootDir` option
         outDir: options.outDir,
       }
     : undefined;
+
+  const loader = new Loader({ transformer: options.transformer, resolver });
   const isExternalFile = (filePath: string) => {
-    return !isMatchByGlob(filePath, options.pattern, { cwd: options.cwd ?? process.cwd() });
+    return !isMatchByGlob(filePath, options.pattern, { cwd });
   };
 
   async function processFile(filePath: string) {
@@ -68,8 +87,8 @@ export async function run(options: RunnerOptions): Promise<Watcher | void> {
         dtsFormatOptions: {
           localsConvention: options.localsConvention,
         },
-        silent: options.silent ?? false,
-        cwd: options.cwd ?? process.cwd(),
+        silent,
+        cwd,
         isExternalFile,
       });
     } catch (error) {
@@ -80,20 +99,20 @@ export async function run(options: RunnerOptions): Promise<Watcher | void> {
   }
 
   if (options.watch) {
-    if (!options.silent) console.log('Watch ' + options.pattern + '...');
-    const watcher = chokidar.watch([options.pattern.replace(/\\/g, '/')], options.cwd ? { cwd: options.cwd } : {});
+    if (!silent) console.log('Watch ' + options.pattern + '...');
+    const watcher = chokidar.watch([options.pattern.replace(/\\/g, '/')], { cwd });
     watcher.on('all', (eventName, filePath) => {
       if (eventName === 'add' || eventName === 'change') {
-        processFile(resolve(options.cwd ?? process.cwd(), filePath)).catch(() => {
+        processFile(resolve(cwd, filePath)).catch(() => {
           // TODO: Emit a error by `Watcher#onerror`
         });
       }
     });
     return { close: async () => watcher.close() };
   } else {
-    const filePaths = (await glob(options.pattern, { dot: true, cwd: options.cwd ?? process.cwd() }))
+    const filePaths = (await glob(options.pattern, { dot: true, cwd }))
       // convert relative path to absolute path
-      .map((file) => resolve(options.cwd ?? process.cwd(), file));
+      .map((file) => resolve(cwd, file));
 
     // TODO: Use `@file-cache/core` to process only files that have changed
     const errors: unknown[] = [];