Repository: spotify/backstage
File: packages/cli/src/modules/build/lib/builder/config.ts (TypeScript)

Code before:
    configs.push({
      input: Object.fromEntries(
        scriptEntryPoints.map(e => [e.name, resolvePath(targetDir, e.path)]),
      ),
      output,
      onwarn,
      makeAbsoluteExternalsRelative: false,
      preserveEntrySignatures: 'strict',
      // All module imports are always marked as external
      external,
      plugins: [
        resolve({
          mainFields,
          extensions: SCRIPT_EXTS,
        }),
        commonjs({
          include: /node_modules/,
          exclude: [/\/[^/]+\.(?:stories|test)\.[^/]+$/],
        }),
        postcss({
          modules: {
            generateScopedName(name: string, filename: string, css: string) {
              const normalizedCss = css.replace(/\s+/g, ' ').trim();
              const hash = createHash('md5')
                .update(normalizedCss)
                .digest('base64url')
                .slice(0, 5);
              const file = basename(filename, '.module.css');
              return `${file}_${name}__${hash}`;
            },
          },
        }),
        forwardFileImports({
          exclude: /\.icon\.svg$/,
          include: [
            /\.svg$/,
            /\.png$/,
            /\.gif$/,
            /\.jpg$/,
            /\.jpeg$/,
            /\.webp$/,
            /\.eot$/,
            /\.woff$/,
            /\.woff2$/,
            /\.ttf$/,
            /\.md$/,
          ],
        }),
        json(),
        yaml(),
        esbuild({

Review comment (suggestion):
I think 8 characters of hex is fairly standard, although we maybe 10-12 even for safety? any form of base64 is gonna get a bit weird because any of `/+-_` can be a bit confusing depending on where they show up in the filename.

Code after:
    configs.push({
      input: Object.fromEntries(
        scriptEntryPoints.map(e => [e.name, resolvePath(targetDir, e.path)]),
      ),
      output,
      onwarn,
      makeAbsoluteExternalsRelative: false,
      preserveEntrySignatures: 'strict',
      // All module imports are always marked as external
      external,
      plugins: [
        resolve({
          mainFields,
          extensions: SCRIPT_EXTS,
        }),
        commonjs({
          include: /node_modules/,
          exclude: [/\/[^/]+\.(?:stories|test)\.[^/]+$/],
        }),
        postcss({
          modules: {
            generateScopedName(name: string, filename: string, css: string) {
              const hash = createHash('md5')
                .update(css)
                .digest('hex')
                .slice(0, 10);
              const file = basename(filename, '.module.css');
              return `${file}_${name}__${hash}`;
            },
          },
        }),
        forwardFileImports({
          exclude: /\.icon\.svg$/,
          include: [
            /\.svg$/,
            /\.png$/,
            /\.gif$/,
            /\.jpg$/,
            /\.jpeg$/,
            /\.webp$/,
            /\.eot$/,
            /\.woff$/,
            /\.woff2$/,
            /\.ttf$/,
            /\.md$/,
          ],
        }),
        json(),
        yaml(),
        esbuild({
          target: 'ES2023',