Bug: Invalid CSS syntax generated for topbar border (rgb wrapping oklch) #31

New issue

Closed

opened 2025-11-17 08:59:23 +00:00 by zajinx · 1 comment

zajinx commented

2025-11-17 08:59:23 +00:00

(Migrated from github.com)

System Information
Laravel: 12.38.1

Filament: 4.2.1

pxlrbt/filament-environment-indicator: 3.3.0

PHP: 8.3.20

Description
I encountered a CSS syntax error when the environment indicator renders the top bar. The plugin currently forces an rgb() wrapper around the color value. However, Filament is returning a full oklch(...) string, resulting in nested color functions that browsers cannot parse.

Analysis
Upon inspecting the .fi-topbar element in the browser dev tools, the computed style renders as:

.fi-topbar {
    /* Invalid: oklch cannot be nested inside rgb */
    border-top: 5px solid rgb(oklch(0.623 0.214 259.815)) !important;
}

Root Cause
I located the issue in src/EnvironmentIndicatorPlugin.php on line 121. The code explicitly adds rgb(...) around the return value of getColor()['500']. Since modern Filament versions/themes return the color as a complete oklch string, the wrapper is invalid.

Suggested Fix
The rgb() wrapper and parentheses should be removed to allow the color string (whether it is oklch, hex, or rgb) to render naturally.

File: src/EnvironmentIndicatorPlugin.php

Current Code (Line 121):

return new HtmlString("
    <style>
        .fi-topbar {
            border-top: {$this->evaluate($this->borderWidth)}px solid rgb({$this->getColor()['500']}) !important;
        }
    </style>
");

Proposed Fix:

return new HtmlString("
    <style>
        .fi-topbar {
            /* Fix: Removed 'rgb(' and ')' wrapper */
            border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']} !important;
        }
    </style>
");

System Information Laravel: 12.38.1 Filament: 4.2.1 pxlrbt/filament-environment-indicator: 3.3.0 PHP: 8.3.20 Description I encountered a CSS syntax error when the environment indicator renders the top bar. The plugin currently forces an rgb() wrapper around the color value. However, Filament is returning a full oklch(...) string, resulting in nested color functions that browsers cannot parse. Analysis Upon inspecting the .fi-topbar element in the browser dev tools, the computed style renders as: ``` .fi-topbar { /* Invalid: oklch cannot be nested inside rgb */ border-top: 5px solid rgb(oklch(0.623 0.214 259.815)) !important; } ``` Root Cause I located the issue in src/EnvironmentIndicatorPlugin.php on line 121. The code explicitly adds rgb(...) around the return value of getColor()['500']. Since modern Filament versions/themes return the color as a complete oklch string, the wrapper is invalid. Suggested Fix The rgb() wrapper and parentheses should be removed to allow the color string (whether it is oklch, hex, or rgb) to render naturally. File: src/EnvironmentIndicatorPlugin.php Current Code (Line 121): ``` return new HtmlString(" <style> .fi-topbar { border-top: {$this->evaluate($this->borderWidth)}px solid rgb({$this->getColor()['500']}) !important; } </style> "); ``` Proposed Fix: ``` return new HtmlString(" <style> .fi-topbar { /* Fix: Removed 'rgb(' and ')' wrapper */ border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']} !important; } </style> "); ```

zajinx commented

2025-11-17 09:00:58 +00:00

(Migrated from github.com)

NVM i just saw the update

👍 1