mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 10:33:59 -05:00
e9011ec592
## 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>
57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
/**
|
|
* 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');
|
|
}
|