Bruk postcss-bundler til å scope css til dekorator

Aksel sin stylesheet bruker globale klassenavn og overskriver host-apper
sin styling om det er mismatch i styling. Eks ved ulike versjoner eller
overrides.

Dette scoper aksel stylesheetet til dekoratøren slik at den ikke
påvirker resten av appen.

Author: LudvigHz

.gitignore

@@ -1,3 +1,5 @@
+src/index.bundled.css
+
 # Logs
 logs
 *.log

bun.lock

@@ -28,4 +28,7 @@ export default tseslint.config(
     extends: [tseslint.configs.disableTypeChecked],
   },
   prettier,
+  {
+    ignores: ['*.cjs'],
+  },
 );

eslint.config.js

@@ -17,10 +17,11 @@
 		}
 	},
 	"scripts": {
+		"gen-css": "bunx postcss-cli src/index.css > src/index.bundled.css",
 		"dev-server": "bun run --watch dev-server/index.ts",
 		"dev": "vite",
 		"dev:fullscreen": "VITE_DECORATOR_MODE=fullscreen vite",
-		"build": "vite build",
+		"build": "bun run gen-css && vite build",
 		"build:watch": "vite build --watch",
 		"build-and-preview": "vite build && vite preview",
 		"preview": "vite preview",
@@ -30,8 +31,10 @@
 		"format": "prettier . --write"
 	},
 	"devDependencies": {
+		"@csstools/postcss-bundler": "^2.0.6",
 		"@eslint/js": "^9.21.0",
 		"@tailwindcss/vite": "^4.0.9",
+		"@tailwindcss/postcss": "^4.0.5",
 		"@types/bun": "^1.2.1",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
@@ -43,6 +46,7 @@
 		"eslint-plugin-react-hooks": "^5.1.0",
 		"eslint-plugin-react-refresh": "^0.4.19",
 		"msw": "^2.7.0",
+		"postcss-cli": "^11.0.0",
 		"prettier": "^3.5.2",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    '@csstools/postcss-bundler': {},
+  },
+};

postcss.config.cjs

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useMemo } from 'react';
-import './index.css';
+import './index.bundled.css';
 import useAppLogic from './hooks/useAppLogic';
 import Banner from './components/Banner';
 import Menu from './components/Menu';

src/Decorator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import './index.css';
+import './index.bundled.css';
 import classNames from 'classnames';
 import useAppLogic from './hooks/useAppLogic';
 import { AppProps } from './types/AppProps';

src/LandingPage.tsx

@@ -1,5 +1,6 @@
+@import url('node_modules:@navikt/ds-css') scope(.dekorator);
+@import '@navikt/ds-css/dist/global/tokens.css';
 @import 'tailwindcss' prefix(dr);
-@import '@navikt/ds-css' layer(dr-aksel);
 
 @config '../tailwind.config.js';
 

src/index.css

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@navikt/ds-css';
 import LandingPage from '../LandingPage';
 
 const FullScreenWrapper = () => {

src/wrapper/FullScreenWrapper.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, TextField } from '@navikt/ds-react';
+import '@navikt/ds-css';
 import { useTempValue } from './hooks/useTempValue';
 import { WebSocketWrapper } from '../api/WebSocketWrapper';
 import { ContextHolderAPI } from '../api/ContextHolderAPI';

src/wrapper/Wrapper.tsx

@@ -1,9 +1,8 @@
-import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react()],
   build: {
     minify: true,
     manifest: 'asset-manifest.json',