happy-css-modules 0.3.0 → 0.4.0

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

@@ -116,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[] = [];