Fjern tailwind preflight & spesifiser css

Author: LudvigHz

bun.lockb

@@ -33,6 +33,7 @@
     "concurrently": "^9.0.0",
     "msw": "^2.2.13",
     "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",

packages/internarbeidsflate-decorator-v3/package.json

@@ -1,3 +1,8 @@
 module.exports = () => ({
-  plugins: [require('tailwindcss')(), require('autoprefixer')()],
+  plugins: [
+    require('postcss-import')(),
+    require('tailwindcss/nesting')(),
+    require('tailwindcss')(),
+    require('autoprefixer')(),
+  ],
 });

packages/internarbeidsflate-decorator-v3/postcss.config.cjs

@@ -1,7 +1,8 @@
-@import 'tailwindcss/base';
-@import '@navikt/ds-css';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@layer tw-base, aksel-dr, tw-dr;
+@import 'tailwindcss/base' layer(tw-base-dr);
+@import '@navikt/ds-css' layer(aksel-dr);
+@import 'tailwindcss/components' layer(tw-dr);
+@import 'tailwindcss/utilities' layer(tw-dr);
 
 [data-theme='internarbeidsflatedecorator-theme'] {
   --ac-select-bg: var(--a-gray-900);
@@ -22,3 +23,37 @@
   --ac-button-tertiary-neutral-text: var(--a-gray-900);
   --a-shadow-focus-inverted: 0 0 0 3px var(--a-orange-500);
 }
+
+.dekorator {
+  @layer tw-base {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
+    ol,
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    *,
+    ::before,
+    ::after {
+      border-width: 0;
+      border-style: solid;
+      border-color: theme('borderColor.DEFAULT', currentColor);
+    }
+
+    ::before,
+    ::after {
+      --tw-content: '';
+    }
+  }
+}

packages/internarbeidsflate-decorator-v3/src/index.css

@@ -55,7 +55,10 @@ const Wrapper: React.FC = () => {
       <div className="dr-w-full dr-top-0">
         <Decorator
           appName="Test app"
-          markup={{ etterSokefelt: '<button>Min knapp</button>' }}
+          markup={{
+            etterSokefelt:
+              '<button class="dr-font-black dr-bg-none dr-border-none">Min knapp</button>',
+          }}
           enableHotkeys
           showEnheter={true}
           showSearchArea={true}

packages/internarbeidsflate-decorator-v3/src/wrapper/Wrapper.tsx

@@ -21,6 +21,9 @@ export default {
       },
     },
   },
+  corePlugins: {
+    preflight: false,
+  },
   presets: [dsTailwind],
   plugins: [],
 };