npm pack working

y3rsh · y3rsh · commit f57318eb497f · 2025-07-23T11:19:36.000-05:00
diff --git a/components/.npmignore b/components/.npmignore
@@ -0,0 +1,24 @@
+# Development files - these should NOT be in the published package
+src/
+*.stories.*
+*.test.*
+*.spec.*
+__tests__/
+__mocks__/
+.storybook/
+coverage/
+
+# Build tools
+tsconfig*.json
+vite.config.*
+babel.config.*
+cssModuleSideEffect.*
+Makefile
+
+# Local dependencies - these get bundled instead
+node_modules/@opentrons/step-generation/
+
+# Other development files
+.env*
+.DS_Store
+*.log
diff --git a/components/package.json b/components/package.json
@@ -5,10 +5,16 @@
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
+  "main": "lib/index.mjs",
+  "module": "lib/index.mjs",
   "exports": {
-    "./styles": "./src/styles/global.css"
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.mjs",
+      "default": "./lib/index.mjs"
+    },
+    "./styles": "./lib/style.css"
   },
   "repository": {
     "type": "git",
@@ -21,12 +27,12 @@
   },
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
+    "@opentrons/shared-data": "*",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
     "@opentrons/shared-data": "link:../shared-data",
-    "@opentrons/step-generation": "link:../step-generation",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -48,6 +54,18 @@
     "styled-components": "5.3.6"
   },
   "devDependencies": {
+    "@opentrons/step-generation": "link:../step-generation",
     "react-redux": "8.1.2"
-  }
+  },
+  "scripts": {
+    "build": "npm run build-ts && npm run build-lib",
+    "build-lib": "NODE_ENV=production vite build",
+    "build-ts": "tsc --build --emitDeclarationOnly",
+    "prepublishOnly": "npm run build",
+    "postpack": "echo 'Package ready for publishing with bundled step-generation'"
+  },
+  "files": [
+    "lib/",
+    "README.md"
+  ]
 }
diff --git a/components/src/alerts/alerts.module.css b/components/src/alerts/alerts.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 .alert {
   font-size: var(--fs-body-2);
diff --git a/components/src/buttons/buttons.module.css b/components/src/buttons/buttons.module.css
@@ -1,5 +1,5 @@
 /* button styling */
-@import '../index.module.css';
+@import '../modules.css';
 
 :root {
   --button-pad: 0.5rem;
diff --git a/components/src/controls/styles.module.css b/components/src/controls/styles.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 :root {
   --mw-labeled-toggle: 25rem;
diff --git a/components/src/forms/Select.module.css b/components/src/forms/Select.module.css
@@ -1,5 +1,5 @@
 /* stylelint-disable selector-class-pattern */
-@import '../index.module.css';
+@import '../modules.css';
 
 /* NOTE(mc, 2021-04-27): this class only used by storybook */
 .example_select_override {
diff --git a/components/src/forms/forms.module.css b/components/src/forms/forms.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 .accessibly_hidden {
   position: absolute;
diff --git a/components/src/index.module.css b/components/src/index.module.css
@@ -1,9 +1,9 @@
-/* opentrons style library */
+/* opentrons style library - CSS modules only */
 
 @import './styles/colors.module.css';
 @import './styles/typography.module.css';
 @import './styles/borders.module.css';
-@import './styles/global.css';
+/* Note: global.css is imported separately in index.ts to avoid CSS modules processing */
 
 :global(*) {
   box-sizing: border-box;
diff --git a/components/src/index.ts b/components/src/index.ts
@@ -1,5 +1,8 @@
 // opentrons components library
 
+// Import global CSS first (not as CSS modules)
+import './styles/global.css'
+
 export * from './hooks'
 export * from './utils'
 
diff --git a/components/src/legacy-hardware-sim/LabwareNameOverlay.module.css b/components/src/legacy-hardware-sim/LabwareNameOverlay.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 .name_overlay {
   width: 100%;
diff --git a/components/src/lists/lists.module.css b/components/src/lists/lists.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 :root {
   --list-padding-large: 1rem;
diff --git a/components/src/modals/modals.module.css b/components/src/modals/modals.module.css
@@ -1,5 +1,5 @@
 /* common styling for modals */
-@import '../index.module.css';
+@import '../modules.css';
 
 .modal {
   position: fixed;
diff --git a/components/src/modules.css b/components/src/modules.css
@@ -0,0 +1,9 @@
+/* opentrons style library - CSS modules only (no global styles) */
+
+@import './styles/colors.module.css';
+@import './styles/typography.module.css';
+@import './styles/borders.module.css';
+
+:global(*) {
+  box-sizing: border-box;
+}
diff --git a/components/src/nav/SidePanel.module.css b/components/src/nav/SidePanel.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 :root {
   --sidebar-width: 18.25rem;
diff --git a/components/src/slotmap/styles.module.css b/components/src/slotmap/styles.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 .slot_rect {
   fill: none;
diff --git a/components/src/structure/Pill.module.css b/components/src/structure/Pill.module.css
@@ -1,4 +1,4 @@
-@import '../index.module.css';
+@import '../modules.css';
 
 .pill {
   padding: 0.5em;
diff --git a/components/src/structure/structure.module.css b/components/src/structure/structure.module.css
@@ -1,5 +1,5 @@
 /* TitleBar styles */
-@import '../index.module.css';
+@import '../modules.css';
 
 .title_bar {
   display: flex;
diff --git a/components/src/tooltips/tooltips.module.css b/components/src/tooltips/tooltips.module.css
@@ -1,5 +1,5 @@
 /* common styling for tooltips */
-@import '../index.module.css';
+@import '../modules.css';
 
 .tooltip_box {
   z-index: 9001;
diff --git a/components/vite.config.mts b/components/vite.config.mts
@@ -11,8 +11,13 @@ import { cssModuleSideEffect } from './cssModuleSideEffect'
 
 export default defineConfig({
   build: {
-    // Relative to the root
-    ssr: 'src/index.ts',
+    // Build a library bundle
+    lib: {
+      entry: 'src/index.ts',
+      name: 'OpentronsComponents',
+      fileName: 'index',
+      formats: ['es'],
+    },
     outDir: 'lib',
     // Do not delete the outdir, typescript types might live there and we don't want to delete them
     emptyOutDir: false,
@@ -21,8 +26,27 @@ export default defineConfig({
       esmExternals: true,
     },
     rollupOptions: {
-      // Only @opentrons/shared-data is external; step-generation will be bundled!
-      external: ['@opentrons/shared-data'],
+      // Only @opentrons/shared-data and React/React-DOM are external; step-generation will be bundled!
+      external: [
+        '@opentrons/shared-data',
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@opentrons/shared-data': 'OpentronsSharedData',
+        },
+        // Ensure CSS is extracted properly
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.names?.some(name => name.endsWith('.css'))) {
+            return 'style.css'
+          }
+          return assetInfo.names?.[0] || 'asset'
+        },
+      },
     },
   },
   plugins: [
@@ -41,6 +65,10 @@ export default defineConfig({
     },
   },
   css: {
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+      localsConvention: 'camelCase',
+    },
     postcss: {
       plugins: [
         postCssImport({ root: 'src/' }),

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../index.module.css';`
	`1`	`+@import '../modules.css';`
`2`	`2`
`3`	`3`	`.alert {`
`4`	`4`	`font-size: var(--fs-body-2);`