Support CSS imports from TypeScript

[penx]

trafficstars

Is your feature request related to a problem? Please describe.

I am attempting to write design system components that are compatible across a range of React architectures, including 11ty.

For other architectures I am able to import CSS files from within a TypeScript file,

e.g. from my App I could write

import "@repo/ds/style.css";

...and this CSS file would automatically be copied to static assets and included in as a link element on the page

e.g. from my App I could write

import { Tabs } from "@repo/ds";

and in my tabs I could write

import "./tabs.css"

And the tabs css would either be included in a bundle or also added as a link tag.

Describe the solution you'd like

A quick "getting started" example for using 11ty with JSX that shows one way of managing a global CSS file and per component CSS files, either using TypeScript imports to do it automatically as described above, or something more manual (if the above method for TypeScript importing CSS is not possible or recommended, perhaps a brief description of why).

Describe alternatives you've considered

As commented here https://github.com/11ty/eleventy/issues/235#issuecomment-2828153380

Additional context

https://github.com/penx/react-design-system-apis

I don't need a best in class solution, just something to get started to prove compatibility between 11ty and React design system components that have associated CSS files