typed-scss-modules.config.ts

import { ConfigOptions } from 'typed-scss-modules/dist/lib/core';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import pnpapi from 'pnpapi';

import { LegacySyncImporter } from 'sass';
import path from 'node:path';

function getResolve(dirname: string) {
  return (url: string) => pnpapi.resolveRequest(url, dirname);
}

// Adapted from https://github.com/styu/pnp-sass-importer/blob/main/packages/pnp-sass-importer/src/legacyImporter.ts
/**
 *
 * @param dirname The directory from which to resolve the request from
 * @returns
 */
export function legacyImporter(dirname: string) {
  const importer: LegacySyncImporter = (url) => {
    const resolveFunc = getResolve(dirname);
    const resolveUrlOrPartialUrl = (url) => {
      try {
        return resolveFunc(url);
      } catch (error) {
        const partialUrl = path.join(path.dirname(url), '_' + path.basename(url));
        try {
          return resolveFunc(partialUrl);
        } catch {
          // It's possible the package's exports weren't set up correctly and this URL is attempting to reach into the package nonetheless
          // In that case, we can see if the URL is simply missing a .scss extension and try again
          if (!url.endsWith('.scss')) {
            return resolveUrlOrPartialUrl(url + '.scss');
          } else {
            console.log(error);
            throw error;
          }
        }
      }
    };

    try {
      const file = resolveUrlOrPartialUrl(url);
      return file ? { file } : null;
    } catch {
      return null;
    }
  };
  return importer;
}

const importFilename = fileURLToPath(import.meta.url);
const importDirname = dirname(importFilename);

export const config: Partial<ConfigOptions> = {
  banner: '// Generated by typed-scss-modules',
  importer: [legacyImporter(importDirname)],
  implementation: 'sass',
};