Background:
I am building a reusable carousel component using react-multi-carousel library which requires a direct css import into my React component so the carousel component can render specific styles, ie import 'react-multi-carousel/lib/styles.css';. I am currently using tsc to bundle/compile my ts code, but when looking at the bundle, the css import/styles doesn't get resolved. Below is the compiled code (just the imports) in which you can see the css import is imported like so:
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import ScrollingCarousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
import styled from 'styled-components';
The issue I have is this forces the consuming app of this reusable component to have to use specific compiler to know how to handle css imports into a jsx file (such as css-loader and style-loader for webpack). Is there a way that I can compile this CSS file down to styles within the js file rather than an import so I can avoid css compiling in the consuming app?
Thanks in advance