remove css imports from components

[mayank99]

Background

Up until now, we were importing .css files inside our React components. Such imports are not valid javascript syntax, and we have been relying on bundlers to magically take care of it. In hindsight, this was a mistake, just like automatically setting theme on the document was a mistake (eventually fixed in iTwin/iTwinUI-react#825 and #1265).

Some of the many issues with using such non-standard imports:

• Doesn't work consistently in frameworks where it's supported (see LabeledSelect not importing CSS with CRA #1194 and fix: FileUpload missing styles #1309).
• Requires hacks in some frameworks (e.g. next-global-css in older nextjs versions, transpilePackages in nextjs 13)
• Requires hacks in some testing scenarios (e.g. jest mocks).
• Doesn't work at all in some frameworks (remix).
• Can lead to lots of duplicate css sometimes (I have personally seen a dozen different versions of iTwinUI styles being included in a production app).
• Can cause issues with CSS ordering (see UserIcon in IconButton is not properly sized in some scenario. #115; there was another user who recently reached out to me privately with a similar issue).

Changes

Removed all css imports from every component and created a styles.css file that can be manually imported. (This change was initially part of #1302 but pulled out for ease of review.)

Testing

All tests/playgrounds been updated to explicitly import the css.

Docs

Updated readme/md pages and added changeset.

[veekeys]

So now we will always import all the css even if we use few components from iTwinUI ? :(

[mayank99]

So now we will always import all the css even if we use few components from iTwinUI ? :(

Yes. This is actually a requirement for CSS modules. We cannot scope every component separately, as the same class when used in two different css files would get different hashes.

If you're concerned about bundle size, it's only 30KB gzipped and easily cacheable.

[LostABike]

I think this is good now. I have checked the visuals and they look good/not broken anymore. Also checked code changes and Overview page 👍

[gretanausedaite]

Lets do dev release with this and css modules and try to migrate real app (eg. AppUI with its test apps)

[mayank99]

Lets do dev release with this and css modules and try to migrate real app (eg. AppUI with its test apps)

Do you mean from a branch? Because we have changesets set up, so merging the PR will also allow doing a dev release.

[gretanausedaite]

Do you mean from a branch? Because we have changesets set up, so merging the PR will also allow doing a dev release.

No, with changesets. Just saying it's a good idea to test this in real app.