LabeledSelect not importing CSS with CRA

[wsm95]

I wasn't quite sure if this was an issue with iTwinUI or something on my end with how CRA is configured, so I decided to make a discussion post rather a full blown issue.

I have been developing a new web app using CRA and noticed when I tried to use the LabeledSelect component it was not styled correctly. I went reproduce this issue using a Code Sandbox but could not reproduce it:

https://codesandbox.io/s/jovial-shadow-mxhoed?file=/src/App.jsx

I could get it to reproduce locally after create a very barebones CRA example:

I think the issue comes from how the CSS is imported inside the LabeledSelect component, and the difference with how Code Sandbox and CRA import CSS. Code Sandbox looks to be importing all of the CSS from iTwinUI, while CRA looks to be only packaging the CSS that is directly used:

I have found a working around by directly adding a reference directly to CSS file:

I am not sure if this is the intended behavior of iTwinUI (importing css files directly) and I am wondering if there are any CRA configurations I should be aware of to solve this issue.

[mayank99]

It looks like some styles are still applying, so we might be missing an import somewhere inside LabeledSelect. edit: whoops, I see you already mentioned you worked around it with a manual import.

Yeah, we are missing an import for input.css. I've created a PR: #1195

[wsm95]

Thank you for the quick resolution and PR! Once that gets completed and released, I will test and make sure that officially resolves the issue.

[mayank99]

Now released in @itwin/itwinui-react@2.8.1 🚀

[mayank99]

@wsm95 Can you please let us know if the fix worked?

A couple more interesting notes I should probably have mentioned in my initial comment:

• When testing, make sure to also run the prod build. Often times, the dev server loads up every possible CSS file without treeshaking concerns.
• If you are using any other dependencies that make use of iTwinUI too, then you could end up with unexpected issues. For guidance on how to handle this, see this wiki page: Version conflicts
• In the next major version, we will likely remove all CSS imports and provide a single bundled CSS file that you can import manually. This will give you full control over the CSS, and you can make use of things like cascade layers to battle any specificity issues.
• Suggestion: If you're building a new app, please don't use CRA as it is no longer maintained. The best option for client-heavy apps today is to use Next.js or start with a Vite template if you want something more barebones. We have examples of both (openable in stackblitz). For more, see the new react docs.