mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-05-12 18:50:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: streamline CSS patching and layer management for improved style isolation

Browse Source 
- Simplified the CSS patching function to wrap styles in a single `@layer`, enhancing control over cascade order and ensuring Tailwind styles can override as needed.
- Removed the previous exclusion selectors logic, focusing on a more efficient layer-based approach to prevent style conflicts with webgui elements.
- Updated the Nuxt configuration to eliminate the postcssPrefixPlugin, reflecting the shift towards layer management for CSS class handling.
- Enhanced the main.css file to define layer order explicitly, ensuring that webgui styles are overridden by Tailwind utilities effectively.
This commit is contained in:
Eli Bosley
2025-08-31 13:06:00 -04:00
parent 83107a743c
commit 3faa637d97
4 changed files with 57 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugin/plugins/dynamix.unraid.net.plg
+8 -100
View File
@@ -196,103 +196,11 @@ exit 0
mkdir($backupDir, 0755, true);
}
// Define selectors to exclude from webgui styles
// Simply exclude anything inside .unapi containers
$exclusionSelectors = [
'.unapi',
'.unraid-reset' // Keep for backwards compatibility
];
// Function to patch CSS rules to exclude our components
function patchCssContent($content, $exclusionSelectors) {
// Split CSS into rules while preserving structure
$lines = explode("\n", $content);
$inRule = false;
$currentRule = [];
$output = [];
$braceDepth = 0;
foreach ($lines as $line) {
// Count braces to track rule boundaries
$openBraces = substr_count($line, '{');
$closeBraces = substr_count($line, '}');
// Check if this line starts a new rule
if (!$inRule && strpos($line, '{') !== false && !preg_match('/^\s*@/', $line)) {
$inRule = true;
$currentRule = [$line];
$braceDepth = $openBraces - $closeBraces;
} elseif ($inRule) {
$currentRule[] = $line;
$braceDepth += $openBraces - $closeBraces;
// Check if rule is complete
if ($braceDepth <= 0) {
// Process the complete rule
$ruleText = implode("\n", $currentRule);
// Extract selector (everything before first {)
if (preg_match('/^([^{]+)\{/', $ruleText, $matches)) {
$selector = trim($matches[1]);
// Skip if this is an @-rule or already has :not()
if (strpos($selector, '@') === 0 || strpos($selector, ':not(') !== false) {
$output[] = $ruleText;
} else {
// Add exclusions to problematic selectors
$needsPatch = false;
// Check if this selector could affect our components
// Target generic selectors, element selectors, and broad class selectors
if (preg_match('/^(\*|body|html|div|button|input|a|span|p|h[1-6]|ul|li|form|label|select|textarea)(\s|,|$|\.|#|\[)/', $selector) ||
strpos($selector, '*') !== false ||
preg_match('/^\.[a-z]/', $selector)) {
$needsPatch = true;
}
if ($needsPatch) {
// Parse individual selectors
$selectors = array_map('trim', explode(',', $selector));
$patchedSelectors = [];
foreach ($selectors as $sel) {
// Add :not(.unapi) for element selectors
// Or prepend :not(.unapi) * for other selectors
if (preg_match('/^[a-z]+/i', $sel) && strpos($sel, '.') === false && strpos($sel, '#') === false) {
// Pure element selector (button, input, etc)
// Exclude elements that have .unapi class or are inside .unapi
$patchedSel = $sel . ':not(.unapi):not(.unapi ' . $sel . ')';
} else {
// Class or ID selector - ensure it doesn't apply within .unapi
$patchedSel = ':not(.unapi) ' . $sel . ':not(.unapi)';
}
$patchedSelectors[] = $patchedSel;
}
// Rebuild the rule with patched selectors
$newSelector = implode(', ', $patchedSelectors);
$ruleText = preg_replace('/^[^{]+\{/', $newSelector . ' {', $ruleText);
}
}
}
$output[] = $ruleText;
$inRule = false;
$currentRule = [];
$braceDepth = 0;
}
} else {
// Not in a rule, just pass through
$output[] = $line;
}
}
// Add any remaining lines
if (!empty($currentRule)) {
$output = array_merge($output, $currentRule);
}
return implode("\n", $output);
// Function to patch CSS - we'll just add a layer wrapper
function patchCssContent($content) {
// Simply wrap everything in a @layer to control cascade order
// Our Tailwind styles in later layers will override
return "@layer webgui {\n" . $content . "\n}";
}
// Process only default-* and dynamix-* CSS files
@@ -322,9 +230,9 @@ exit 0
echo " Patching $filename...\n";
// Add compatibility patch comment and apply exclusion patches
$patchedContent = "/* Unraid API compatibility patch - exclusion based */\n";
$patchedContent .= patchCssContent($content, $exclusionSelectors);
// Add compatibility patch comment and wrap in layer
$patchedContent = "/* Unraid API compatibility patch - layer based */\n";
$patchedContent .= patchCssContent($content);
// Write modified content back
file_put_contents($cssFile, $patchedContent);