refactor(eds-core-react): 🎨 introduce global CSS architecture

- Create centralized styles.css file to prevent duplicate CSS imports
- Import styles.css in main index.ts entry point
- Remove CSS import from Input.new.tsx component file
- Add styles.css export to package.json exports
- Update Storybook preview to import global styles
- Add CSS_ARCHITECTURE.md documentation
- Fix lab package jest config to transform style-inject module

Benefits:
- No duplicate CSS when users import components
- Single CSS bundle improves performance
- Easier maintenance with centralized CSS imports
- Automatic tree-shaking support

Author: millus

packages/eds-core-react/.storybook/preview.mjs

@@ -1,4 +1,5 @@
 import './preview.css'
+import '../src/styles.css'
 
 const preview = {
   viewMode: 'docs',
@@ -24,6 +25,6 @@ const preview = {
     },
   },
 
-  tags: ['autodocs']
+  tags: ['autodocs'],
 }
 export default preview

packages/eds-core-react/CSS_ARCHITECTURE.md

@@ -0,0 +1,75 @@
+# Global CSS Architecture
+
+## Overview
+
+Component CSS is now centralized in a global `styles.css` file to prevent duplicate CSS imports when users consume the library.
+
+## Structure
+
+```
+src/
+├── styles.css                    # Global CSS entry point
+├── index.ts                      # Imports styles.css once
+└── components/
+    └── Input/
+        ├── Input.new.tsx         # No CSS import
+        └── Input.new.css         # Styles imported via styles.css
+```
+
+## How It Works
+
+1. **Component CSS files** (`Input.new.css`) contain the styles
+2. **Global styles.css** imports all component CSS files
+3. **Main index.ts** imports `styles.css` once
+4. **Users** get all CSS automatically when they import any component
+
+## Benefits
+
+✅ **No duplicate CSS** - CSS is imported once at the package level  
+✅ **Automatic tree-shaking** - Bundlers can optimize unused CSS  
+✅ **Better performance** - Single CSS import instead of per-component  
+✅ **Easier maintenance** - All CSS imports in one place  
+
+## Adding New Components
+
+When creating a new component with CSS:
+
+1. Create the component CSS file (e.g., `Button.new.css`)
+2. Add import to `src/styles.css`:
+   ```css
+   @import './components/Button/Button.new.css';
+   ```
+3. **Do NOT** import CSS in the component `.tsx` file
+
+## Storybook Configuration
+
+The `.storybook/preview.mjs` imports the global CSS file:
+
+```javascript
+import './preview.css'
+import '../src/styles.css'  // Global component styles
+```
+
+This ensures all component styles are available in Storybook stories.
+
+## User Consumption
+
+Users automatically get all CSS when importing components:
+
+```tsx
+// This imports both the component AND all CSS
+import { InputNew } from '@equinor/eds-core-react'
+```
+
+Alternatively, users can import just the CSS if needed:
+
+```tsx
+import '@equinor/eds-core-react/styles.css'
+```
+
+## Package Configuration
+
+The `package.json` includes:
+
+- `"sideEffects": ["**/*.css"]` - Preserves CSS imports during tree-shaking
+- `"./styles.css": "./dist/esm/styles.css"` - Exports CSS separately if needed

packages/eds-core-react/package.json

@@ -30,7 +30,8 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/eds-core-react.cjs"
-    }
+    },
+    "./styles.css": "./dist/esm/styles.css"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",

packages/eds-core-react/src/index.ts

@@ -1,4 +1,5 @@
 'use client'
+import './styles.css'
 /* eslint-disable import/prefer-default-export */
 export * from './components/Button'
 export * from './components/Typography'

packages/eds-core-react/src/styles.css

@@ -0,0 +1,4 @@
+/* Global styles for @equinor/eds-core-react */
+
+/* Component styles */
+@import './components/Input/Input.new.css';

packages/eds-lab-react/jest.config.cjs

@@ -16,6 +16,6 @@ module.exports = {
   testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   testEnvironment: 'jest-environment-jsdom',
-  transformIgnorePatterns: ['node_modules/(?!.pnpm|ramda)'],
+  transformIgnorePatterns: ['node_modules/(?!.pnpm|ramda|style-inject)'],
   testPathIgnorePatterns: ['/dist/'],
 }