add postcss to ues css modules and apply

Ferlab-Ste-Justine · Jan 10, 2025 · 78af561 · 78af561
1 parent 698ecd2
commit 78af561
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/frontend/apps/variant/postcss.config.js → frontend/apps/variant/postcss.config.cjs b/frontend/apps/variant/postcss.config.js → 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-nested': {},
+  },
+}
+