How do you consume a library's CSS?

[stephencweiss]

It seems like there's some general confusion around CSS with TSDX (evidenced by a discussion (#947) and three separate issues, #186, #959, and #1015).

Reading @agilgur5's answer in #947, this line jumped out to me:

You can inject the styles yourself, but that can be a bit intrusive as a library author -- #186 (comment) and surrounding comments go into this in some detail.

This feels spot on. Furthermore, if my tsdx.config has inject:false then, looking in the dist/, I see a type definitions, development and production commonJS files as well as ESModules.

But, notably, there's notably, there's no *.production.css or anything else of the sort.

So, with that preamble, I'm wondering how are library consumers supposed to import the CSS that's being packaged? (I feel like an "inexperienced library consumer".

[agilgur5]

So as I believe I've mentioned in some of those issues, this question is not TSDX-specific, particularly as TSDX is currently agnostic and has no opinion regarding your styling decisions -- by default, it does not even come with a CSS plugin for Rollup. So how you consume styles in a library is up to the library author.

Some people use styled-components, others inject a stylesheet, others require the consuming developer to import the CSS (or have a plain version with no styles), others let you pass props to style components or add your own styles. There are more methods too, some libraries let you pick themes or build your own theme and customize pieces of it. And there are many, many different CSS-in-JS libraries with different features and nuances.
Tailwind, which you've used, has various options too, including to import a CSS file with import "tailwindcss/tailwind.css".
So, per the linked issue, it's up to you what you think is best for you, your library, and your consumers.

So, with that preamble, I'm wondering how are library consumers supposed to import the CSS that's being packaged? (I feel like an "inexperienced library consumer".)

To be more explicit than above, there is no single convention, and that's one of the reasons why TSDX is agnostic (can probably link to some issues stating this originating rationale too)

But, notably, there's notably, there's no *.production.css or anything else of the sort.

That's actually just a naming issue -- I noticed that in #627 when I added integration tests for the example and would like to change that default naming if possible. You're only including one CSS plugin with one config, so it only generates one file (unlike the JS which has multiple output formats). The example shows cssnano and autoprefixer so that is production-ready by default.
You could use Rollup's output plugins to create different dev and prod CSS but different modes of CSS aren't common for consumers.

[stephencweiss]

Thanks @agilgur5! This all makes sense 😄 . The one part I'm not clear on is the *.production.css -- is the implication that it's just something within Rollup to configure? (I guess I'm wondering where to even look to figure out how to set the output.)