Phase 3: Automate Golden Layout CSS Import Processing (#7977)

## Problem

The SCSS migration encountered issues with Golden Layout CSS imports:

1. Sass `@import` statements are deprecated and will be removed in Dart
Sass 3.0.0
2. `@use` cannot be used inside conditional blocks like
`html[data-theme='default']`
3. The `~` webpack resolver doesn't work with `@use`, only `@import`

Current problematic code:
```scss
html[data-theme='default'] {
    @import '~golden-layout/src/css/goldenlayout-light-theme';
}
```

## Solution

Added a custom webpack loader that automatically inlines Golden Layout
CSS content at build time.

**Custom Loader** (`etc/webpack/replace-golden-layout-imports.js`):
- Detects `@import` statements for `~golden-layout/src/css/*` files
- Reads CSS content from `node_modules/golden-layout/src/css/`
- Replaces import statements with actual CSS content
- Uses generalized regex to handle any golden-layout CSS file

**Integration & Cleanup**:
- Positioned before sass-loader in webpack processing chain
- Automatically syncs with Golden Layout package updates
- Consolidated all webpack loaders in `etc/webpack/` directory
- Moved pug loader from `etc/scripts/parsed-pug/` to `etc/webpack/`
- Converted both loaders to ES modules for consistency
- Removed unnecessary `package.json` override

## Result

Eliminates Sass deprecation warnings while preserving existing theme
architecture. Build-time processing with no runtime overhead. Cleaner
webpack loader organization.

## Files Changed

- `webpack.config.esm.ts` - Updated loader paths and added Golden Layout
processor
- `etc/webpack/replace-golden-layout-imports.js` - Custom loader
implementation
- `etc/webpack/parsed-pug-loader.js` - Moved from
`etc/scripts/parsed-pug/` and converted to ES modules
- Removed `etc/webpack/package.json` - No longer needed with ES modules
- Removed `etc/scripts/parsed-pug/` directory - Consolidated into
webpack directory

---------

Co-authored-by: Claude <noreply@anthropic.com>

etc/scripts/parsed-pug/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}

etc/webpack/parsed-pug-loader.js

@@ -1,7 +1,7 @@
-const {execSync} = require('child_process');
-const {getHashDigest} = require('loader-utils');
-const pug = require('pug');
-const path = require('path');
+import {execSync} from 'child_process';
+import {getHashDigest} from 'loader-utils';
+import pug from 'pug';
+import path from 'path';
 
 // If you edit either cookies.pug or privacy.pug be aware this will trigger a popup on the users' next visit.
 // Knowing the last versions here helps us be aware when this happens. If you get an error here and you _haven't_
@@ -20,7 +20,7 @@ function _execGit(command) {
     return gitResult.toString();
 }
 
-module.exports = function (content) {
+export default function (content) {
     const filePath = this.resourcePath;
     const filename = path.basename(filePath, '.pug');
     const options = this.getOptions();

etc/webpack/replace-golden-layout-imports.js

@@ -0,0 +1,56 @@
+/**
+ * Simple webpack loader to replace @import statements for golden-layout with actual CSS content
+ * This runs before sass-loader to replace the imports with raw CSS content
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const GOLDEN_LAYOUT_PREFIX = '~golden-layout/';
+
+export default function replaceGoldenLayoutImports(source) {
+    // Only process if it contains golden-layout imports
+    if (!source.includes('@import') || !source.includes('golden-layout')) {
+        return source;
+    }
+
+    // Find all golden-layout @import statements and replace them
+    const importRegex = /@import\s+['"]([^'"]+)['"];?\s*/g;
+    
+    return source.replace(importRegex, (match, importPath) => {
+        if (importPath.startsWith(GOLDEN_LAYOUT_PREFIX)) {
+            return replaceGoldenLayoutImport(importPath);
+        }
+        
+        // Return other imports unchanged
+        return match;
+    });
+};
+
+function replaceGoldenLayoutImport(importPath) {
+    const goldenLayoutPath = importPath.substring(GOLDEN_LAYOUT_PREFIX.length);
+    const cssContent = readGoldenLayoutCSS(goldenLayoutPath);
+    const fileName = goldenLayoutPath.split('/').pop();
+    const themeName = fileName.replace(/^goldenlayout-/, '').replace(/\.css$/, '');
+    
+    return `/* Golden Layout ${themeName} - Inlined */\n${cssContent}\n/* End Golden Layout ${themeName} */`;
+}
+
+function readGoldenLayoutCSS(relativePath) {
+    // Use import.meta.resolve to find the golden-layout package location robustly
+    const packageJsonPath = import.meta.resolve('golden-layout/package.json');
+    const packageDir = path.dirname(fileURLToPath(packageJsonPath));
+    
+    // Ensure .css extension if not present
+    const finalPath = relativePath.endsWith('.css') ? relativePath : `${relativePath}.css`;
+    const cssPath = path.join(packageDir, finalPath);
+    
+    if (!fs.existsSync(cssPath)) {
+        throw new Error(`Golden Layout CSS file not found: ${cssPath}`);
+    }
+    
+    return fs.readFileSync(cssPath, 'utf8');
+}

webpack.config.esm.ts

@@ -174,7 +174,17 @@ export default {
                         },
                     },
                     'css-loader',
-                    'sass-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sassOptions: {
+                                fatalDeprecations: ['import'],
+                            },
+                        },
+                    },
+                    {
+                        loader: path.resolve(__dirname, 'etc/webpack/replace-golden-layout-imports.js'),
+                    },
                 ],
             },
             {
@@ -184,7 +194,7 @@ export default {
             },
             {
                 test: /\.pug$/,
-                loader: './etc/scripts/parsed-pug/parsed_pug_file.js',
+                loader: path.resolve(__dirname, 'etc/webpack/parsed-pug-loader.js'),
                 options: {
                     useGit: hasGit,
                 },