[waybar] Can't overwrite default waybar css

[nakibrayan3]

For example, when I use the option:

programs.waybar.style = /* css */ ''
  #workspaces button {
    border: none;
  }
''

My CSS is added at the top of the file $HOME/.config/waybar/style.css before the CSS from stylix. like this:

#workspaces button {
  border: none;
}

@define-color base00 #292828; @define-color base01 #32302f; @define-color base02 #504945; @define-color base03 #665c54;
@define-color base04 #bdae93; @define-color base05 #ddc7a1; @define-color base06 #ebdbb2; @define-color base07 #fbf1c7;

@define-color base08 #ea6962; @define-color base09 #e78a4e; @define-color base0A #d8a657; @define-color base0B #a9b665;
@define-color base0C #89b482; @define-color base0D #7daea3; @define-color base0E #d3869b; @define-color base0F #bd6f3e;

...

#workspaces button {
    border-bottom: 3px solid transparent;
}

...

Which makes my overwrites non functional, and using !important doesn't seem to work.

To solve this issues the custom CSS provided with programs.waybar.style option should be at the bottom of the file $HOME/.config/waybar/style.css after the CSS from stylix.

[trueNAHO]

Is this is a duplicate issue of https://github.com/danth/stylix/issues/429?

[nakibrayan3]

Is this is a duplicate issue of #429?

This is not the exact solution that I was looking for, but it will solve my problem.

[danth]

You can use lib.mkBefore / lib.mkAfter to change the order that the option definitions are merged

[nakibrayan3]

You can use lib.mkBefore / lib.mkAfter to change the order that the option definitions are merged

This resolves my issue, Thank you :)