Bruk postcss-bundler til å scope css til dekorator

.github/workflows/main-v3.yaml

@@ -45,7 +45,7 @@ jobs:
 
       - name: Upload build
         uses: actions/upload-artifact@v4
-        if: github.ref == 'refs/heads/master'
+        if: github.ref == 'refs/heads/master' || github.event_name == 'workflow_dispatch'
         with:
           name: app-dist
           path: dist

.gitignore

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

eslint.config.js

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

package.json

@@ -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": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -43,6 +46,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "msw": "^2.7.0",
+    "postcss-cli": "^11.0.0",
     "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

postcss.config.cjs

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

src/Decorator.tsx

@@ -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/LandingPage.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/index.css

@@ -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/wrapper/FullScreenWrapper.tsx

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

src/wrapper/Wrapper.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';

vite.config.ts

@@ -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',