css modules

[mayank99]

Changes

Created a styles.js folder inside src that uses Vite to do CSS-modules processing. After processing, the iui- prefix becomes _iui3- (for example iui-button becomes _iui3-button). Not including hash yet to ease migration, but it will be a one-line change to add it in v4.

Vite will output two files: styles.css and style.js, both of which get copied into the published output of @itwin/itwinui-react. The styles.css file will need to be imported manually by users, and the styles.js file will be used inside polymorphic to get the transformed class names.

Made some tweaks in @itwin/itwinui-css to remove previous scoping mechanism (from #1031). Added :where to @itwin/itwinui-variables and required iui-root in all global styles.

Pending issues:

• selectors in unit tests. fixed using jest mock
• some styles broken. fixed by updating component code.
  • added exception for Table because it will be rewritten
  • also should improve after pending PRs (v3: Menu is using ListItem #1295, Tile composition #1255)

See branch preview: https://itwin.github.io/iTwinUI/1302/react/

Testing

Tested running dev and prod build of playgrounds and storybook. More extensive testing needed.

Docs

Updated starter templates and "getting started" pages. Added multiple changesets.

Updated migration guide: https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide#breaking-changes

[mayank99]

All styles and tests should be fixed now.

[gretanausedaite]

Maybe fixed by 2b900ff. Check again?

Works!

Code looks good.