happy-css-modules 0.3.0 → 0.5.0

package/src/runner.test.ts

@@ -1,4 +1,6 @@
 import { readFile, writeFile } from 'fs/promises';
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
 import { jest } from '@jest/globals';
 import chalk from 'chalk';
 import dedent from 'dedent';
@@ -7,6 +9,8 @@ import type { Watcher } from './runner.js';
 import { run } from './runner.js';
 import { createFixtures, exists, getFixturePath, waitForAsyncTask } from './test/util.js';
 
+const require = createRequire(import.meta.url);
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -87,9 +91,9 @@ test('returns an error if the file fails to process in non-watch mode', async ()
   // The error is logged to console.error.
   expect(consoleErrorSpy).toHaveBeenCalledTimes(2);
   // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-  expect(consoleErrorSpy).toHaveBeenNthCalledWith(1, chalk.red('[Error] ' + error.errors[0]));
+  expect(consoleErrorSpy).toHaveBeenNthCalledWith(1, chalk.red('[Error] ' + error.errors[0]!.stack));
   // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-  expect(consoleErrorSpy).toHaveBeenNthCalledWith(2, chalk.red('[Error] ' + error.errors[1]));
+  expect(consoleErrorSpy).toHaveBeenNthCalledWith(2, chalk.red('[Error] ' + error.errors[1].stack));
 
   // The valid files are emitted.
   expect(await exists(getFixturePath('/test/1.css.d.ts'))).toBe(true);
@@ -116,14 +120,66 @@ 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'];
+  createFixtures({
+    '/test/1.scss': dedent`
+    @import '2.scss';
+    `,
+    '/test/relative/2.scss': `.a { dummy: ''; }`,
+  });
+  await run({ ...defaultOptions, sassLoadPaths }); // not throw
+});
+
+test('lessIncludePaths', async () => {
+  const lessIncludePaths = ['test/relative'];
+  createFixtures({
+    '/test/1.less': dedent`
+    @import '2.less';
+    `,
+    '/test/relative/2.less': `.a { dummy: ''; }`,
+  });
+  await run({ ...defaultOptions, lessIncludePaths }); // not throw
+});
+
+test('webpackResolveAlias', async () => {
+  const webpackResolveAlias = { '@relative': 'test/relative' };
+  createFixtures({
+    '/test/1.less': dedent`
+    @import '@relative/2.less';
+    `,
+    '/test/relative/2.less': `.a { dummy: ''; }`,
+  });
+  await run({ ...defaultOptions, webpackResolveAlias }); // not throw
+});
+
+test('postcssConfig', async () => {
+  const uuid = randomUUID();
+  const postcssConfig = `${uuid}/postcss.config.js`;
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
   });
+  await run({ ...defaultOptions, postcssConfig }); // not throw
 });

package/src/runner.ts

@@ -8,7 +8,8 @@ import _glob from 'glob';
 import { emitGeneratedFiles } from './emitter/index.js';
 import { Loader } from './loader/index.js';
 import type { Resolver } from './resolver/index.js';
-import { type Transformer } from './transformer/index.js';
+import { createDefaultResolver } from './resolver/index.js';
+import { createDefaultTransformer, type Transformer } from './transformer/index.js';
 import { isMatchByGlob } from './util.js';
 
 const glob = util.promisify(_glob);
@@ -27,6 +28,31 @@ 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;
+  /**
+   * 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;
+  /**
+   * The option compatible with postcss's `--config`. It is a relative or absolute path.
+   * @example '.'
+   * @example 'postcss.config.js'
+   * @example '/home/user/repository/src'
+   */
+  postcssConfig?: string | undefined;
   /**
    * Silent output. Do not show "files written" messages.
    * @default false
@@ -46,15 +72,27 @@ 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 resolver =
+    options.resolver ??
+    createDefaultResolver({
+      cwd,
+      sassLoadPaths: options.sassLoadPaths,
+      lessIncludePaths: options.lessIncludePaths,
+      webpackResolveAlias: options.webpackResolveAlias,
+    });
+  const transformer = options.transformer ?? createDefaultTransformer({ cwd, postcssConfig: options.postcssConfig });
   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, 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,32 +106,37 @@ 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) {
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      console.error(chalk.red('[Error] ' + error));
+      if (error instanceof Error) {
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        console.error(chalk.red('[Error] ' + error.stack));
+      } else {
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        console.error(chalk.red('[Error] ' + error));
+      }
       throw error;
     }
   }
 
   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[] = [];

package/src/test/tsserver.ts

@@ -1,11 +1,21 @@
 import { readFileSync } from 'fs';
+import { mkdir, writeFile as nativeWriteFile } from 'fs/promises';
+import { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { promisify } from 'util';
 import serverHarness from '@typescript/server-harness';
+import _glob from 'glob';
 import { resolve } from 'import-meta-resolve';
 import lineColumn from 'line-column';
+import type { UpdateOpenRequest, DefinitionResponse, DefinitionRequest } from 'typescript/lib/protocol.js';
 import { getFixturePath } from './util.js';
 
-// TODO: refactor this
+const glob = promisify(_glob);
+
+async function writeFile(path: string, content: string): Promise<void> {
+  await mkdir(dirname(path), { recursive: true });
+  return nativeWriteFile(path, content, 'utf8');
+}
 
 type Definition = {
   /** The path of the destination file */
@@ -28,42 +38,7 @@ type Definition = {
   };
 };
 
-type DefinitionResponse = {
-  seq: number;
-  type: 'response';
-  command: 'definition';
-  success: boolean;
-  body: [
-    {
-      /** The path of the destination file */
-      file: string;
-      /** inclusive */
-      start: {
-        /** line, 1-based */
-        line: number;
-        /** column, 1-based */
-        offset: number;
-      };
-      /** exclusive */
-      end: {
-        /** line, 1-based */
-        line: number;
-        /** column, 1-based */
-        offset: number;
-      };
-    },
-  ];
-};
-
-export async function getIdentifierDefinitions(filePath: string, identifier: string): Promise<Definition[]> {
-  const results = await getMultipleIdentifierDefinitions(filePath, [identifier]);
-  return results[0]!.definitions;
-}
-
-export async function getMultipleIdentifierDefinitions(
-  filePath: string,
-  identifiers: string[],
-): Promise<{ identifier: string; definitions: Definition[] }[]> {
+export async function createTSServer() {
   const server = serverHarness.launchServer(
     fileURLToPath(await resolve('typescript/lib/tsserver.js', import.meta.url)),
     [
@@ -72,105 +47,107 @@ export async function getMultipleIdentifierDefinitions(
     ],
   );
 
-  const tmpFilePath = getFixturePath('/server-harness/tmp.ts');
-  const tmpFileContent = [
-    `import styles from '${filePath}';`,
-    ...identifiers.map((identifier) => `styles.${identifier};`),
-  ].join('\n');
-
-  await server.message({
-    type: 'request',
-    command: 'updateOpen',
-    arguments: {
-      changedFiles: [],
-      closedFiles: [],
-      openFiles: [
-        {
-          file: tmpFilePath,
-          fileContent: tmpFileContent,
-          projectRootPath: getFixturePath('/server-harness'),
-          scriptKindName: 'TS', // It's easy to get this wrong when copy-pasting
-        },
-      ],
+  return {
+    async getIdentifierDefinitions(filePath: string, identifier: string): Promise<Definition[]> {
+      const results = await this.getMultipleIdentifierDefinitions(filePath, [identifier]);
+      return results[0]!.definitions;
     },
-  });
-
-  const results: { identifier: string; definitions: Definition[] }[] = [];
-
-  for (let i = 0; i < identifiers.length; i++) {
-    const response: DefinitionResponse = await server.message({
-      type: 'request',
-      command: 'definition',
-      arguments: {
-        file: tmpFilePath,
-        line: i + 2, // line, 1-based
-        offset: 8, // column, 1-based
-      },
-    });
-    const definitions: Definition[] = response.body.map((definition) => {
-      const { file, start, end } = definition;
-      const fileContent = readFileSync(file, 'utf-8');
-      const startIndex = lineColumn(fileContent).toIndex(start.line, start.offset);
-      const endIndex = lineColumn(fileContent).toIndex(end.line, end.offset);
-      const text = fileContent.slice(startIndex, endIndex);
-      return { file, text, start, end };
-    });
-    results.push({ identifier: identifiers[i]!, definitions });
-  }
-
-  await server.message({ command: 'exit' });
+    async getMultipleIdentifierDefinitions(
+      filePath: string,
+      identifiers: string[],
+    ): Promise<{ identifier: string; definitions: Definition[] }[]> {
+      const tmpFilePath = getFixturePath('/server-harness/tmp.ts');
+      const tmpFileContent = [
+        `import styles from '${filePath}';`,
+        ...identifiers.map((identifier) => `styles.${identifier};`),
+      ].join('\n');
+      await writeFile(tmpFilePath, tmpFileContent);
+
+      await this.refreshCache();
+
+      const results: { identifier: string; definitions: Definition[] }[] = [];
+
+      for (let i = 0; i < identifiers.length; i++) {
+        const response: DefinitionResponse = await server.message({
+          seq: 0,
+          type: 'request',
+          command: 'definition',
+          arguments: {
+            file: tmpFilePath,
+            line: i + 2, // line, 1-based
+            offset: 8, // column, 1-based
+          },
+        } as DefinitionRequest);
+        const definitions: Definition[] = response.body!.map((definition) => {
+          const { file, start, end } = definition;
+          const fileContent = readFileSync(file, 'utf-8');
+          const startIndex = lineColumn(fileContent).toIndex(start.line, start.offset);
+          const endIndex = lineColumn(fileContent).toIndex(end.line, end.offset);
+          const text = fileContent.slice(startIndex, endIndex);
+          return { file, text, start, end };
+        });
+        results.push({ identifier: identifiers[i]!, definitions });
+      }
+      return results;
+    },
+    async getModuleDefinitions(filePath: string): Promise<Definition[]> {
+      await this.refreshCache();
 
-  return results;
-}
+      const tmpFilePath = getFixturePath('/server-harness/tmp.ts');
+      const tmpFileContent = `import styles from '${filePath}';`;
 
-export async function getModuleDefinitions(filePath: string): Promise<Definition[]> {
-  const server = serverHarness.launchServer(
-    fileURLToPath(await resolve('typescript/lib/tsserver.js', import.meta.url)),
-    [
-      // ATA generates some extra network traffic and isn't usually relevant when profiling
-      '--disableAutomaticTypingAcquisition',
-    ],
-  );
+      await writeFile(tmpFilePath, tmpFileContent);
 
-  const tmpFilePath = getFixturePath('/server-harness/tmp.ts');
-  const tmpFileContent = `import styles from '${filePath}';`;
+      await this.refreshCache();
 
-  await server.message({
-    type: 'request',
-    command: 'updateOpen',
-    arguments: {
-      changedFiles: [],
-      closedFiles: [],
-      openFiles: [
-        {
+      const response: DefinitionResponse = await server.message({
+        seq: 0,
+        type: 'request',
+        command: 'definition',
+        arguments: {
           file: tmpFilePath,
-          fileContent: tmpFileContent,
-          projectRootPath: getFixturePath('/server-harness'),
-          scriptKindName: 'TS', // It's easy to get this wrong when copy-pasting
+          line: 1, // line, 1-based
+          offset: 20, // column, 1-based
         },
-      ],
+      } as DefinitionRequest);
+      const definitions: Definition[] = response.body!.map((definition) => {
+        const { file, start, end } = definition;
+        const fileContent = readFileSync(file, 'utf-8');
+        const startIndex = lineColumn(fileContent).toIndex(start.line, start.offset);
+        const endIndex = lineColumn(fileContent).toIndex(end.line, end.offset);
+        const text = fileContent.slice(startIndex, endIndex);
+        return { file, text, start, end };
+      });
+      return definitions;
     },
-  });
-
-  const response: DefinitionResponse = await server.message({
-    type: 'request',
-    command: 'definition',
-    arguments: {
-      file: tmpFilePath,
-      line: 1, // line, 1-based
-      offset: 20, // column, 1-based
+    async refreshCache() {
+      // tsserver caches the contents of opened files.
+      // When a file is updated, its cache remains with the old content.
+      // Therefore we need to overwrite the cache with the latest content.
+
+      const fixtureFilePaths = await glob(getFixturePath('/**/*.ts'), { dot: true });
+      // latest contents
+      const openFiles: UpdateOpenRequest['arguments']['openFiles'] = fixtureFilePaths.map((filePath) => ({
+        file: filePath,
+        fileContent: readFileSync(filePath, 'utf-8'),
+        projectRootPath: getFixturePath('/server-harness'),
+        scriptKindName: 'TS', // It's easy to get this wrong when copy-pasting
+      }));
+
+      // override the cache
+      await server.message({
+        seq: 0,
+        type: 'request',
+        command: 'updateOpen',
+        arguments: {
+          changedFiles: [],
+          closedFiles: [],
+          openFiles,
+        },
+      } as UpdateOpenRequest);
     },
-  });
-  const definitions: Definition[] = response.body.map((definition) => {
-    const { file, start, end } = definition;
-    const fileContent = readFileSync(file, 'utf-8');
-    const startIndex = lineColumn(fileContent).toIndex(start.line, start.offset);
-    const endIndex = lineColumn(fileContent).toIndex(end.line, end.offset);
-    const text = fileContent.slice(startIndex, endIndex);
-    return { file, text, start, end };
-  });
-
-  await server.message({ command: 'exit' });
-
-  return definitions;
+    exit: async () => {
+      await server.message({ command: 'exit' });
+    },
+  };
 }

package/src/test/util.ts

@@ -31,18 +31,24 @@ export function createComposesDeclarations(root: Root): Declaration[] {
 
 export function fakeToken(args: {
   name: Token['name'];
-  originalLocations: { filePath?: Location['filePath']; start: Location['start'] }[];
+  originalLocations: { filePath?: Location['filePath']; start?: Location['start'] }[];
 }): Token {
   return {
     name: args.name,
-    originalLocations: args.originalLocations.map((location) => ({
-      filePath: location.filePath ?? getFixturePath('/test/1.css'),
-      start: location.start,
-      end: {
-        line: location.start.line,
-        column: location.start.column + args.name.length - 1,
-      },
-    })),
+    originalLocations: args.originalLocations.map((location) => {
+      if (location.filePath === undefined || location.start === undefined) {
+        return { filePath: undefined, start: undefined, end: undefined };
+      } else {
+        return {
+          filePath: location.filePath ?? getFixturePath('/test/1.css'),
+          start: location.start,
+          end: {
+            line: location.start.line,
+            column: location.start.column + args.name.length - 1,
+          },
+        };
+      }
+    }),
   };
 }
 

package/src/transformer/index.test.ts

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

package/src/transformer/index.ts

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