But more so, external style cannot be applied to a subsection of a web page unless they force it into an iframe, which has all sorts of issues of it's own which is why external CSS is usually ignored. Inline CSS is often stripped by the tag strippers who don't want you turning things on or off... and media queries shouldn't even play into it since the layout should be controlled by the page it's being shown inside (for webmail) or the client itself, NOT your mail.

Then, the projects that use these libraries get to process these import statements how they like when they are bundled. For the ones that wish to load jQuery from a global, we again mark 'jquery' as an external—since we still don't want Rollup to bundle jQuery—and as a global.

I wrote hundreds of Rect components and what I learned is that Componets should be able to be styled by developer who is using it.

There is a good amount of properties that should mostly be applied from a parent's point of view. We're talking stuff like grid-area in grid layouts, margin and flex in flex layouts. Even properties like position and and the top/right/left/bottom following it in some cases.

The main reason using classes isn't a great solution is that it completely breaks encapsulation in a confusing way, the paren't shouldn't be dictating anything, the component itself should. The parent can pass things and the child can choose to use them or not but that is different: control is still in the hands of the component itself, not an arbitrary parent.

Ideally: Only let a parent control those specific CSS properties, and never let a child use them on the root element.

margin, flex, position, left, right, top, bottom, width, height, align-self, justify-self among other is CSS properties that should never be modified by the child itself. The parent should always have control of those properties, which is the whole reason I'm asking for this.