Update postcss-import to version 16.0.0

Author: fichtnerma

web/package-lock.json

@@ -26,6 +26,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "postcss": "^8",
+    "postcss-import": "^16.0.0",
     "tailwindcss": "^3",
     "typescript": "^5"
   }

web/package.json

@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        'postcss-import': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

web/postcss.config.js

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import './globals.css';
+import '../styles/globals.css';
 import Layout from '@/components/Layout/Layout';
 
 const inter = Inter({ subsets: ['latin'] });

web/src/app/layout.tsx

@@ -1,4 +1,3 @@
-// Example request to cms
 const cmsContentType = 'announcements';
 fetch(`${process.env.CMS_API}/${cmsContentType}`, {
     headers: {
@@ -12,6 +11,7 @@ export default function Home() {
     return (
         <main className="flex min-h-screen flex-col items-center justify-between p-24">
             <h1>Vim Landing Page</h1>
+            <button className="btn inverted">Download</button>
         </main>
     );
 }

web/src/app/page.tsx

@@ -0,0 +1,9 @@
+@layer components {
+    .btn {
+        @apply border-2 rounded-xl px-2 py-1;
+    }
+
+    .btn.inverted {
+        @apply text-primary border-primary;
+    }
+}

web/src/styles/components.css

@@ -1,3 +1,4 @@
+@import "./components.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;