popup_css should override plugins inline css

[AmjadHD]

Description

https://discord.com/channels/280102180189634562/280157083356233728/756245423290712147

When I tried to override the styling of LSP's popups (https://github.com/sublimelsp/LSP/blob/master/popups.css) through the popup_css in the active color scheme, i couldn't, even if i made the selector more specific (e.g div.lsp_popup warnings vs .lsp_popup .warnings)
What I understand is that ST is applying specificity matching correctly, in that inline styles have higher precedence over popup_css which is considered external css, but I think this is inconvenient because it prevents color schemes from styling popups.

Steps to reproduce

1. modify or override the currently active color scheme:

{
  "globals": {
    "popup_css": "#abc{color: blue; background-color: red;}"
  }
}

2. run view.show_popup('<div id="abc" style="color: yellow; background-color: green;">Hello World!</div>') in the console

(Note That there's another issue here, the default styling of the popup is lost when a popup_css is specified)

Expected behavior

the popup_css styles are applied.

Actual behavior

the inline styles are applied.

Environment

• Build: 3211
• Operating system and version: Windows 10

[jwortmann]

I'm not entirely sure, but I think beeing inline CSS isn't the primary reason here. There must be a more general issue with the evaluation of CSS specifity, because once a certain CSS property is defined in a plugin, it seems that it cannot be overridden from the popup_css in a color scheme at all, see #2935.

[FichteFoll]

This is following standard CSS resolution rules where styles directly on the element have the highest precedence unless !important is used in the stylesheet. Plugins that use minihtml should use css classes to style their elements so that users can properly overwrite them.

Not an issue with ST from my point of view.

[FichteFoll]

I have to retract my conclusion from earlier because the repro instructions don't represent the text surrounding it. The following code still reproduces the behavior seen in the screenshot when it should not:

view.show_popup('<style>#abc { color: yellow; background-color: green; }</style><div id="abc">Hello World!</div>')

In fact, even adding !important has no effect.