How to hash class names in Astro using astro-rename integration

1
import rename from 'astro-rename';

1
import { defineConfig } from 'astro/config';
2

3
import rename from 'astro-rename';
4
// import compress from 'astro-compress';
5

6
// https://astro.build/config
7
export default defineConfig({
8
  output: 'static',
9
  integrations: [
10
    rename(),
11
    // compress()
12
  ],
13
});

1
/**
2
 * Creates a new hash generator class.
3
 */
4
export default class HashRenamer {
5
  /** The max size of the generated hash name */
6
  private maxSize = 8;
7

8
  /** A map from original CSS names to their renamed equivalents. */
9
  renames = new Map<string, string>();
10

11
  /** A lists containing all hashed names */
12
  values: string[] = [];
13

14
  rename(key: string): string {
15
    let value = this.renames.get(key);
16

17
    // The key will be invalid when a hashed name is used as key
18
    const isInvalid = this.values.includes(key);
19

20
    if (isInvalid) return key;
21
    if (value) return value;
22

23
    value = getHash(this.maxSize);
24

25
    this.renames.set(key, value);
26
    this.values.push(value);
27

28
    return value;
29
  }
30
}

1
const CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_';
2

3
/**
4
 * Generate a hash name
5
 * @param maxSize The max size of hash
6
 * @returns A string with the hash name
7
 */
8
function getHash(maxSize: number): string {
9
  let result = '';
10

11
  for (let i = 0; i < maxSize; i++) {
12
    result += CHARS.charAt(Math.floor(Math.random() * CHARS.length));
13
  }
14

15
  return result;
16
}
17

18
/**
19
 * Creates a new hash generator class.
20
 */
21
export default class HashRenamer {
22
  /** The max size of the generated hash name */
23
  private maxSize = 8;
24

25
  /** A map from original CSS names to their renamed equivalents. */
26
  renames = new Map<string, string>();
27

28
  /** A lists containing all hashed names */
29
  values: string[] = [];
30

31
  rename(key: string): string {
32
    let value = this.renames.get(key);
33

34
    // The key will be invalid when a hashed name is used as key
35
    const isInvalid = this.values.includes(key);
36

37
    if (isInvalid) return key;
38
    if (value) return value;
39

40
    value = getHash(this.maxSize);
41

42
    this.renames.set(key, value);
43
    this.values.push(value);
44

45
    return value;
46
  }
47
}

1
import { defineConfig } from 'astro/config';
2

3
import rename from 'astro-rename';
4

5
import HashRenamer from './src/lib/hash-renamer';
6

7
const renamer = new HashRenamer();
8

9
// https://astro.build/config
10
export default defineConfig({
11
  output: 'static',
12
  integrations: [
13
    rename({
14
      rename: {
15
        strategy: (key) => renamer.rename(key),
16
      },
17
    }),
18
  ],
19
});