fix(components, app, opentrons-ai-client): fix global.css import issue (#19013)

* fix(components, app, opentrons-ai-client): fix global.css import issue

Author: koji

app/src/index.tsx

@@ -15,7 +15,7 @@ import '../src/atoms/SoftwareKeyboard/AlphanumericKeyboard'
 import '../src/atoms/SoftwareKeyboard/FullKeyboard/index.css'
 import '../src/atoms/SoftwareKeyboard/IndividualKey/index.css'
 import '../src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css'
-import '@opentrons/components/styles'
+import '@opentrons/components/styles/global'
 
 // export public types so they can be accessed by external deps
 export * from './redux/types'

app/vite.config.mts

@@ -62,6 +62,9 @@ export default defineConfig(
       },
       resolve: {
         alias: {
+          '@opentrons/components/styles/global': path.resolve(
+            '../components/src/styles/global.css'
+          ),
           '@opentrons/components/styles': path.resolve(
             '../components/src/index.module.css'
           ),

components/package.json

@@ -8,7 +8,8 @@
   "main": "src/index.ts",
   "module": "src/index.ts",
   "exports": {
-    "./styles": "./src/styles/global.css"
+    "./styles": "./src/index.module.css",
+    "./styles/global": "./src/styles/global.css"
   },
   "repository": {
     "type": "git",

components/src/forms/SelectField.module.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components/styles';
+@import '../index.module.css';
 
 .select_field.error {
   & :global(.ot_select__control) {

components/src/index.module.css

@@ -3,7 +3,6 @@
 @import './styles/colors.module.css';
 @import './styles/typography.module.css';
 @import './styles/borders.module.css';
-@import './styles/global.css';
 
 :global(*) {
   box-sizing: border-box;

components/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components/styles';
+@import '../index.module.css';
 
 .module {
   display: flex;

components/src/structure/Splash.module.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components/styles';
+@import '../index.module.css';
 
 .splash {
   position: relative;

components/vite.config.mts

@@ -61,6 +61,9 @@ export default defineConfig({
       '@opentrons/components/styles': path.resolve(
         '../components/src/index.module.css'
       ),
+      '@opentrons/components/styles/global': path.resolve(
+        '../components/src/styles/global.css'
+      ),
       '@opentrons/step-generation': path.resolve(
         '../step-generation/src/index.ts'
       ),

opentrons-ai-client/src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { I18nextProvider } from 'react-i18next'
 import { Auth0Provider } from '@auth0/auth0-react'
 
-import '@opentrons/components/styles'
+import '@opentrons/components/styles/global'
 
 import { App } from './App'
 import { i18n } from './i18n'

opentrons-ai-client/vite.config.mts

@@ -48,8 +48,8 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@opentrons/components/styles': path.resolve(
-        '../components/src/index.module.css'
+      '@opentrons/components/styles/global': path.resolve(
+        '../components/src/styles/global.css'
       ),
       '@opentrons/components': path.resolve('../components/src/index.ts'),
       '/ai-client/': path.resolve('./src/') + '/',