From 78af5611b45a737c7c5712697e2ec81b6114a538 Mon Sep 17 00:00:00 2001
From: Francis Lavoie <lav.francis+gh@gmail.com>
Date: Fri, 10 Jan 2025 14:44:17 -0500
Subject: [PATCH] add postcss to ues css modules and apply

---
 .../variant/{postcss.config.js => postcss.config.cjs}     | 1 +
 frontend/apps/variant/src/App.module.css                  | 7 +++++++
 frontend/apps/variant/src/App.tsx                         | 6 ++++--
 frontend/portals/radiant/app/types/css-modules.d.ts       | 4 ++++
 frontend/portals/radiant/postcss.config.cjs               | 8 ++++++++
 5 files changed, 24 insertions(+), 2 deletions(-)
 rename frontend/apps/variant/{postcss.config.js => postcss.config.cjs} (75%)
 create mode 100644 frontend/apps/variant/src/App.module.css
 create mode 100644 frontend/portals/radiant/app/types/css-modules.d.ts
 create mode 100644 frontend/portals/radiant/postcss.config.cjs

diff --git a/frontend/apps/variant/postcss.config.js b/frontend/apps/variant/postcss.config.cjs
similarity index 75%
rename from frontend/apps/variant/postcss.config.js
rename to frontend/apps/variant/postcss.config.cjs
index 33ad091..9ae82e8 100644
--- a/frontend/apps/variant/postcss.config.js
+++ b/frontend/apps/variant/postcss.config.cjs
@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-nested': {},
   },
 }
diff --git a/frontend/apps/variant/src/App.module.css b/frontend/apps/variant/src/App.module.css
new file mode 100644
index 0000000..d8662eb
--- /dev/null
+++ b/frontend/apps/variant/src/App.module.css
@@ -0,0 +1,7 @@
+.appLayout {
+  @apply flex flex-1;
+
+  aside {
+    @apply w-1/4 p-4;
+  }
+}
diff --git a/frontend/apps/variant/src/App.tsx b/frontend/apps/variant/src/App.tsx
index 922d676..f66e3d1 100644
--- a/frontend/apps/variant/src/App.tsx
+++ b/frontend/apps/variant/src/App.tsx
@@ -1,4 +1,6 @@
 import "./App.css";
+import styles from "./App.module.css";
+
 import {
   Accordion,
   AccordionContent,
@@ -21,8 +23,8 @@ export interface AppProps {
 function App({ api }: AppProps) {
   console.log(api);
   return (
-    <div className="flex flex-1">
-      <aside className="w-1/4 p-4">
+    <div className={styles.appLayout}>
+      <aside >
         <ul>
           <li>
             <Accordion type="single" collapsible>
diff --git a/frontend/portals/radiant/app/types/css-modules.d.ts b/frontend/portals/radiant/app/types/css-modules.d.ts
new file mode 100644
index 0000000..3d673e2
--- /dev/null
+++ b/frontend/portals/radiant/app/types/css-modules.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/frontend/portals/radiant/postcss.config.cjs b/frontend/portals/radiant/postcss.config.cjs
new file mode 100644
index 0000000..a57a8e2
--- /dev/null
+++ b/frontend/portals/radiant/postcss.config.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-nested': {},
+  },
+}
+