CSS files incorrectly merged/synced causing duplicate lines about dist-datatables-bootstrap5 HOT 4 CLOSED

That's actually intentional. It is to allow support for browser's which don't support CSS variables. They will parse and use the latest one they understand, so in this case, if the browser didn't understand the variable, it would use the hard coded value.

from dist-datatables-bootstrap5.

OK, I understand that. It's an intelligent trick !

from dist-datatables-bootstrap5.

By the way @AllanJard , when I try to encapsulate these CSS into an LWC Web Component, I get an error because it refuses :root directives. This is logical, since :root defines the CSS at a global level which would break encapsulation.

Maybe it would be better to use :host instead of :root, since this applies only to the component in which it is used :
https://developer.mozilla.org/en-US/docs/Web/CSS/:host

from dist-datatables-bootstrap5.

The MDN guide says:

Note: This has no effect when used outside a shadow DOM.

As such, I'm not sure it would be useful here would it? To be honest, I picked :root because that is what Bootstrap does.

from dist-datatables-bootstrap5.