Add CSS Module support (#36637)

vite.config.mts

@@ -27,6 +27,8 @@ import { MastodonAssetsManifest } from './config/vite/plugin-assets-manifest';
 
 const jsRoot = path.resolve(__dirname, 'app/javascript');
 
+const cssAliasClasses: ReadonlyArray<string> = ['components', 'features'];
+
 export const config: UserConfigFnPromise = async ({ mode, command }) => {
   const isProdBuild = mode === 'production' && command === 'build';
 
@@ -49,6 +51,45 @@ export const config: UserConfigFnPromise = async ({ mode, command }) => {
       },
     },
     css: {
+      modules: {
+        generateScopedName(name, filename) {
+          let prefix = '';
+
+          // Use the top two segments of the path as the prefix.
+          const [parentDirName, dirName] = path
+            .dirname(filename)
+            .split(path.sep)
+            .slice(-2)
+            .map((dir) => dir.toLowerCase());
+
+          // If the parent directory is in the cssAliasClasses list, use
+          // the first four letters of it as the prefix, otherwise use the full name.
+          if (parentDirName) {
+            if (cssAliasClasses.includes(parentDirName)) {
+              prefix = parentDirName.slice(0, 4);
+            } else {
+              prefix = parentDirName;
+            }
+          }
+
+          // If we have a directory name, append it to the prefix.
+          if (dirName) {
+            prefix = `${prefix}_${dirName}`;
+          }
+
+          // If the file is not styles.module.scss or style.module.scss,
+          // append the file base name to the prefix.
+          const baseName = path.basename(
+            filename,
+            `.module${path.extname(filename)}`,
+          );
+          if (baseName !== 'styles' && baseName !== 'style') {
+            prefix = `${prefix}_${baseName}`;
+          }
+
+          return `_${prefix}__${name}`;
+        },
+      },
       postcss: {
         plugins: [
           postcssPresetEnv({