remove css imports from components

.changeset/calm-owls-shout.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+All css imports within components have been removed. `@itwin/itwinui-react/styles.css` must now be manually imported at the entrypoint.

.changeset/many-actors-tell.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+Removed input-container code from `utils.css` in favor of `input-container.css`.

apps/storybook/.storybook/StoryWithDecorator.jsx

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
 
 export default function StoryWithDecorator(Story, context) {
   const theme = useDarkMode() ? 'dark' : 'light';

apps/storybook/src/Overview.stories.mdx

@@ -29,38 +29,52 @@ npm install @itwin/itwinui-react
 yarn add @itwin/itwinui-react
 ```
 
-## Usage
+---
 
-Import the component you want and start using it!
+## Setup
 
-```jsx
-import { Button } from '@itwin/itwinui-react';
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
-const App = () => <Button>Hello!</Button>;
+```jsx
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>
+        {/* Your components go here. */}
+      </ThemeProvider>
+    </>
+  );
+}
 ```
 
-Yes, that's really all you need as you can see in this live interactive demo:
+ThemeProvider has a `theme` prop which accepts one of the following values:
 
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+  - `light` (default)
+  - `dark`
+  - `os` (respects the color scheme of the operating system)
+  - `inherit`
 
-## Theming
+---
 
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
+## Usage
 
-- `light` (default)
-- `dark`
-- `os` (which respects the color scheme of the operating system)
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>{/* Your components go here. */}</ThemeProvider>
-  </>
-);
+const Page = () => <Button>Hello!</Button>;
 ```
 
+Check out this template for a live interactive demo:
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+
+---
+
 ## FAQ
 
 For a list of frequently asked questions, visit the [wiki](https://github.com/iTwin/iTwinUI/wiki/FAQ).

apps/website/src/pages/docs/index.mdx

@@ -15,32 +15,40 @@ npm install @itwin/itwinui-react
 yarn add @itwin/itwinui-react
 ```
 
-## Usage
+## Setup
 
-Import the component you want and start using it!
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => <Button>Hello!</Button>;
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>{/* Your components go here. */}</ThemeProvider>
+    </>
+  );
+}
 ```
 
-## Theming
-
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
+ThemeProvider has a `theme` prop which accepts one of the following values:
 
 - `light` (default)
 - `dark`
-- `os` (which respects the color scheme of the operating system)
+- `os` (respects the color scheme of the operating system)
+- `inherit`
+
+## Usage
+
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>
-      <>{/* Your components go here. */}</>
-    </ThemeProvider>
-  </>
-);
+const Page = () => <Button>Hello!</Button>;
 ```
+
+Check out this template for a live interactive demo:
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)

apps/website/src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
-import '@itwin/itwinui-css/css/all.css';
-import '@itwin/itwinui-variables';
+import '@itwin/itwinui-react/styles.css';
 import Global from './_global.astro';
 import Header from '~/components/Header.astro';
 import ITwinUILogo from '~/components/iTwinUILogo';

cra-sandbox/src/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import { IconButton, ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
 import './styles.css';
 
 const rootElement = document.getElementById('root')!;

packages/itwinui-css/src/all.scss

@@ -22,6 +22,7 @@
 @forward 'header/header';
 @forward 'information-panel/information-panel';
 @forward 'input/input';
+@forward 'input-container/input-container';
 @forward 'keyboard/keyboard';
 @forward 'location-marker/location-marker';
 @forward 'menu/menu';

packages/itwinui-css/src/utils/utils.scss

@@ -1,7 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @forward 'icon';
-@forward '../input-container/input-container'; // forwarded here in utils to avoid breaking
 @forward 'notification-marker';
 @forward 'popover';
 @forward 'divider';

packages/itwinui-react/README.md

@@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react
 
 ---
 
-## Usage
+## Setup
 
-Import the component you want and start using it!
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => (
-  <Button>Hello!</Button>
-);
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>
+        {/* Your components go here. */}
+      </ThemeProvider>
+    </>
+  );
+}
 ```
 
-Yes, that's really all you need as you can see in this live interactive demo:
-
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+ThemeProvider has a `theme` prop which accepts one of the following values:
+  - `light` (default)
+  - `dark`
+  - `os` (respects the color scheme of the operating system)
+  - `inherit`
 
 ---
 
-## Theming
+## Usage
 
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
-  - `light` (default)
-  - `dark`
-  - `os` (which respects the color scheme of the operating system)
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>
-      {/* Your components go here. */}
-    </ThemeProvider>
-  </>
+const Page = () => (
+  <Button>Hello!</Button>
 );
 ```
 
+Check out this template for a live interactive demo:
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+
 ---
 
 ## FAQ

packages/itwinui-react/jest.config.js

@@ -83,8 +83,6 @@ module.exports = {
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '\\.(css|less|sass|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
-    '\\.(gif|ttf|eot|svg)$': '<rootDir>/src/__mocks__/fileMock.js',
     '^(\\.\\.?\\/.+)\\.jsx?$': '$1', // see https://github.com/kulshekhar/ts-jest/issues/1057
   },
 

packages/itwinui-react/package.json

@@ -17,6 +17,7 @@
         "default": "./cjs/index.js"
       }
     },
+    "./styles.css": "./styles.css",
     "./cjs": "./cjs/index.js",
     "./esm": "./esm/index.js",
     "./cjs/core/utils": "./cjs/core/utils/index.js",
@@ -26,6 +27,7 @@
   "files": [
     "cjs",
     "esm",
+    "styles.css",
     "CHANGELOG.md",
     "LICENSE.md"
   ],
@@ -124,8 +126,5 @@
     ]
   },
   "prettier": "configs/prettier-config",
-  "sideEffects": [
-    "**/*.scss",
-    "**/*.css"
-  ]
+  "sideEffects": false
 }

packages/itwinui-react/src/core/Alert/Alert.tsx

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
 import { StatusIconMap, SvgCloseSmall, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 

packages/itwinui-react/src/core/Avatar/Avatar.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 
 export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 

packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 
 type AvatarGroupProps = {
   /**

packages/itwinui-react/src/core/Backdrop/Backdrop.tsx

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/backdrop.css';
 
 export type BackdropProps = {
   /**

packages/itwinui-react/src/core/Badge/Badge.tsx

@@ -9,7 +9,6 @@ import type {
   AnyString,
   PolymorphicForwardRefComponent,
 } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 
 /**
  * Helper function that returns one of the preset badge color values.

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -11,7 +11,6 @@ import {
   Box,
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 
 type BreadcrumbsProps = {
   /**

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 
 type ButtonGroupProps = {
   /**

packages/itwinui-react/src/core/Buttons/Button/Button.tsx

@@ -7,7 +7,6 @@ import * as React from 'react';
 
 import { Box } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 
 export type ButtonProps = {
   /**

packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx

@@ -14,7 +14,6 @@ import {
   useMergedRefs,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 
 export type DropdownButtonProps = {
   /**

packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx

@@ -7,8 +7,6 @@ import * as React from 'react';
 import { VisuallyHidden, Popover, Box } from '../../utils/index.js';
 import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 
 export type IconButtonProps = {
   /**

packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx

@@ -11,7 +11,6 @@ import { DropdownMenu } from '../../DropdownMenu/index.js';
 import type { Placement } from 'tippy.js';
 import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 
 export type SplitButtonProps = ButtonProps & {
   /**

packages/itwinui-react/src/core/Carousel/Carousel.tsx

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { getRandomValue, useMergedRefs, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';