happy-css-modules 0.2.1 → 0.4.0

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/transformer/index.ts

@@ -36,14 +36,16 @@ export const handleImportError = (packageName: string) => (e: unknown) => {
   throw e;
 };
 
-export const createDefaultTransformer: () => Transformer = () => async (source, options) => {
+export const createDefaultTransformer: () => Transformer = () => {
   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;
+  return async (source, options) => {
+    if (options.from.endsWith('.scss')) {
+      return scssTransformer(source, options);
+    } else if (options.from.endsWith('.less')) {
+      return lessTransformer(source, options);
+    }
+    // TODO: support postcss
+    return false;
+  };
 };

package/src/transformer/less-transformer.test.ts

@@ -117,12 +117,6 @@ test('resolves specifier using resolver', async () => {
     '/test/1.less': dedent`
     @import 'package-1';
     @import 'package-2';
-    // NOTE: less does not resolve files that are http(s) protocol.
-    // Therefore, the resolver will not be called for those files,
-    // and they will not be included in result.dependencies.
-    @import url('https://mizdra.net/css/index.css');
-    // However, if Content-Type is set to text/css, less will try to resolve it and inline it.
-    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&display=swap');
     `,
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.less': `.a {}`,
@@ -134,3 +128,15 @@ test('resolves specifier using resolver', async () => {
     [getFixturePath('/node_modules/package-1/index.css'), getFixturePath('/node_modules/package-2/index.less')].sort(),
   );
 });
+
+test('ignores http(s) protocol file', async () => {
+  createFixtures({
+    '/test/1.less': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    @import 'https://example.com/path/less.less';
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.less'));
+  expect(result.dependencies).toStrictEqual([]);
+});

package/src/transformer/less-transformer.ts

@@ -2,7 +2,7 @@ import type { Transformer } from '../index.js';
 import type { TransformerOptions } from './index.js';
 import { handleImportError } from './index.js';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
+// eslint-disable-next-line @typescript-eslint/naming-convention
 function createLessPluginResolver(Less: typeof import('less'), options: TransformerOptions): Less.Plugin {
   class ResolverFileManager extends Less.FileManager {
     options: TransformerOptions;
@@ -10,8 +10,8 @@ function createLessPluginResolver(Less: typeof import('less'), options: Transfor
       super();
       this.options = options;
     }
-    public override supports(filename: string): boolean {
-      return !this.options.isIgnoredSpecifier(filename);
+    public override supports(): boolean {
+      return true;
     }
     public override async loadFile(
       filename: string,
@@ -19,6 +19,9 @@ function createLessPluginResolver(Less: typeof import('less'), options: Transfor
       options: Less.LoadFileOptions,
       environment: Less.Environment,
     ): Promise<Less.FileLoadResult> {
+      // The http/https file is treated as an empty file.
+      if (this.options.isIgnoredSpecifier(filename)) return { contents: '', filename };
+
       const resolved = await this.options.resolver(filename, { request: currentDirectory });
       return super.loadFile(resolved, currentDirectory, options, environment);
     }
@@ -39,7 +42,6 @@ function createLessPluginResolver(Less: typeof import('less'), options: Transfor
 }
 
 export const createLessTransformer: () => Transformer = () => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   let less: typeof import('less');
   return async (source, options) => {
     less ??= (await import('less').catch(handleImportError('less'))).default;

package/src/transformer/scss-transformer.test.ts

@@ -126,11 +126,6 @@ test('resolves specifier using resolver', async () => {
     '/test/1.scss': dedent`
     @import 'package-1';
     @import 'package-2';
-    // NOTE: sass does not resolve files that are http(s) protocol.
-    // Therefore, the resolver will not be called for those files,
-    // and they will not be included in result.dependencies.
-    @import 'http://example.com/path/1.css';
-    @import 'https://example.com/path/1.css';
     `,
     '/node_modules/package-1/index.css': `.a {}`,
     '/node_modules/package-2/index.scss': `.a {}`,
@@ -140,3 +135,15 @@ test('resolves specifier using resolver', async () => {
     ['/node_modules/package-1/index.css', '/node_modules/package-2/index.scss'].map(getFixturePath),
   );
 });
+
+test('ignores http(s) protocol file', async () => {
+  createFixtures({
+    '/test/1.scss': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    @import 'https://example.com/path/scss.scss';
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.scss'));
+  expect(result.dependencies).toStrictEqual([]);
+});

package/src/transformer/scss-transformer.ts

@@ -7,48 +7,6 @@ import type { LegacyResult } from 'sass';
 import type { Transformer, TransformerOptions } from './index.js';
 import { handleImportError } from './index.js';
 
-// const IS_JEST_ENVIRONMENT = process.env.JEST_WORKER_ID !== undefined;
-
-// function verifyJestEnvironment() {
-//   if (
-//     !(
-//       'window' in global &&
-//       'location' in global &&
-//       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//       'href' in (global as any).location &&
-//       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//       typeof (global as any).location.href === 'string' &&
-//       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//       (global as any).location.href.startsWith('http://')
-//     )
-//   ) {
-//     throw new Error(
-//       'To use dart-sass with jest, dummy `global.window` and `global.location.href` must be set. See https://github.com/sass/dart-sass/issues/1692#issuecomment-1229219993 .',
-//     );
-//   }
-// }
-
-// const createImporterForJest: (from: string) => Importer<'async'> = (from) => ({
-//   canonicalize(url) {
-//     // NOTE: The format of `url` changes depending on the import source.
-//     //
-//     // - When `from === '/test/1.scss'` and `@import './2.scss'` in `/test/1.scss` is resolved, `url === '2.scss'`.
-//     // - When `from === '/test/1.scss'` and `@import './3.scss'` in `/test/2.scss` is resolved, `url === 'file:///test/3.scss'`.
-//     //
-//     // That is, the paths of @import statements written to the `from` file is passed through unresolved,
-//     // but paths written to other files is passed through resolved to absolute paths.
-//     return new URL(url, pathToFileURL(from));
-//   },
-//   async load(canonicalUrl) {
-//     return {
-//       contents: await readFile(fileURLToPath(canonicalUrl.href), 'utf8'),
-//       syntax: 'scss',
-//       sourceMapUrl: canonicalUrl,
-//     };
-//   },
-// });
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 async function renderSass(sass: typeof import('sass'), source: string, options: TransformerOptions) {
   return new Promise<LegacyResult>((resolve, reject) => {
     sass.render(
@@ -76,19 +34,10 @@ async function renderSass(sass: typeof import('sass'), source: string, options:
 }
 
 export const createScssTransformer: () => Transformer = () => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   let sass: typeof import('sass');
   return async (source, options) => {
     sass ??= (await import('sass').catch(handleImportError('sass'))).default;
     const result = await renderSass(sass, source, options);
     return { css: result.css.toString(), map: result.map!.toString(), dependencies: result.stats.includedFiles };
-
-    // if (IS_JEST_ENVIRONMENT) verifyJestEnvironment();
-    // const result = await sass.default.compileStringAsync(source, {
-    //   url: pathToFileURL(from),
-    //   sourceMap: true,
-    //   importers: IS_JEST_ENVIRONMENT ? [createImporterForJest(from)] : [],
-    // });
-    // return { css: result.css, map: result.sourceMap!, dependencies: result.loadedUrls };
   };
 };