How to inline/include css in a react library package - reactjs

Question

I'm trying to build a react component library that I can use in other applications and I'm running into an issue of packaging css/less with the component library.
in the component library package:
component.tsx
import React, { ReactElement } from 'react';
import styles from "./component.less";
const TestComponent: React.FC = (): ReactElement => {
....
return (
<div className={styles.root}>
....
</div>
);
};
export default TestComponent;
component.less
#bg-color: #428bca;
.root {
background-color: #bg-color;
}
I run the below commands to build the library:
> tsc --emitDeclarationOnly
> lessc src/component.less dist/library.css
> babel src --out-dir dist --extensions .ts,.tsx --source-maps
> copyfiles -u 1 src/**/*.less dist/
and in the dist directory get this:
> index.d.ts
> index.js
> library.css
> component.less
> ....
in a different application I just install the library and use the component:
import TestComponent from "library-package";
<TestComponent /> // in the render somewhere
and when I start this application the component is rendered but the css/less code is not applied and not imported.
I'd like to include some default css inside of the library package. And I know that I could just include the library.css in the index.tsx of an application and the css could work, but I don't want the other application to have to include a css file or have a less loader to handle the css if it doesn't use less itself.
I assume that the problem currently is that the application doesn't know how to handle .less files from the library because it doesn't have a less loader setup (although I don't get an error about anything)
tldr: an application would just install the component library, include the component in a render and the component will render with some css (preferrably using less in the library). Is that possible to do?

Answer 1

I guess I was looking for something like the styled-components but using less + minifying instead of writing the CSS in a JavaScript file and wrapping HTML tags.
With the styled-components library I got it to work this way:
component.tsx
import React, { ReactElement } from "react";
import cssesc from "cssesc";
import styled, { ThemeProvider, DefaultTheme } from "styled-components";
export interface TestComponentTheme extends DefaultTheme {
backgroundColor?: string;
}
const DEFAULT_THEME: TestComponentTheme = {
backgroundColor: "#428bca",
};
const StyledDiv = styled.div`
background-color: ${props => cssesc(props.theme.backgroundColor)};
`;
interface TestComponentInput {
theme?: TestComponentTheme;
}
const TestComponent: React.FC<TestComponentInput> = ({theme}: TestComponentInput ): ReactElement => {
....
let componentTheme: TestComponentTheme = Object.assign({}, DEFAULT_THEME);
if (theme) {
componentTheme= Object.assign({}, componentTheme, theme);
}
return (
<ThemeProvider theme={componentTheme}>
<StyledDiv>
....
</StyledDiv>
</ThemeProvider>
);
};
export default TestComponent;
building the library requires just two steps now:
> tsc --emitDeclarationOnly
> babel src --out-dir dist --extensions .ts,.tsx --source-maps
and there are no CSS files in the dist directory anymore:
> index.d.ts
> index.js
> ....
in a different application I just install the library and use the component (which renders with the CSS inline):
import TestComponent from "library-package";
<TestComponent /> // in the render somewhere
and optionally I can overwrite the CSS of the component:
import TestComponent, { TestComponentTheme } from "library-package";
const customTheme: TestComponentTheme = {
backgroundColor: "#000fff",
};
<TestComponent theme={customTheme} /> // in the render somewhere