Discovery: stylesheets for component libraries in React/Preact

[dvoytenko]

Let's assume the most naive code setup with two modules:

/1/ component.css

.amp-component {
  outline: none;
}
.amp-component:hover {
  outline: 1px solid blue;
}

/2/ component.js

function AmpComponent() {
  return <div className="amp-component"/>;
}

Is there a safe/universal/always-just-works/no-weird-dependencies way to distribute a npm package with the component.js that automatically installs the components.css stylesheet in the target document when AmpComponent is used?

Things to consider:

• Client-side vs server-side rendering.
• Lazy loading, tree shaking and bundling (e.g. what if AmpComponent is not used until later?)
• Stylesheet ordering. The desire is to put this stylesheet as early as possible (before user stylesheet) to allow easy override in the user stylesheet.
• Shadow vs light DOM. E.g. what if a component is used inside the shadow subtree?