simplify postcss

Author: AugustinMauroy

COLLABORATOR_GUIDE.md

@@ -75,11 +75,6 @@ The Node.js Website is built upon [React][] and [Next.js][] respectively, the UI
 The Website also uses several other Open Source libraries (not limited to) listed below:
 
 - Styling is done with [PostCSS][] and CSS Modules
-  - We use a combination of PostCSS plugins to create a [Sass](https://sass-lang.com/) alike environment
-  - We recommend reading the documentation of our plugins in case of doubt
-    - [PostCSS Mixins](https://github.com/postcss/postcss-mixins)
-    - [PostCSS Import](https://github.com/postcss/postcss-import)
-    - [PostCSS Simple Vars](https://github.com/postcss/postcss-simple-vars)
 - [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
 - [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
 - [Radix UI][] is a collection of customizable UI components
@@ -577,15 +572,11 @@ We currently use a set of PostCSS plugins that create a SCSS-a-like environment.
 
 #### What PostCSS Plugins we use?
 
-- `postcss-mixins`: Allows us to use Sass-like Mixins
-- `postcss-import`: Allows us to use Sass-like Imports
-- `postcss-simple-vars`: Allows us to use Sass-like Variables
-- `postcss-nested`: Allows us to use Sass-like Nesting
 - `postcss-calc`: Strips `calc` expressions and replaces them with the result
+- `@tailwindcss/postcss`: Allows us to use Tailwind within PostCSS
 
 It is important to mention that even though we use SCSS-like syntax, we do not use SCSS, and some of these plugins
 are not 100% compatible with the SCSS syntax.
-For example, `postcss-mixins` does not support `@include` and `@extend` directives (and it uses `@define-mixin` for defining Mixins and `@mixin` for including Mixins).
 
 #### Do we use a CSS Framework?
 

apps/site/.postcssrc.json

@@ -1,7 +1,5 @@
 {
   "plugins": {
-    "postcss-mixins": {},
-    "postcss-simple-vars": {},
     "postcss-calc": {},
     "@tailwindcss/postcss": {}
   }

apps/site/.stylelintrc.mjs

@@ -11,9 +11,6 @@ const CUSTOM_AT_RULES = [
   'screen',
   'tailwind',
   'variants',
-  // PostCSS-specific at-rules
-  'define-mixin',
-  'mixin',
 ];
 
 // Enforces certain selectors to be only in camelCase notation

apps/site/package.json

@@ -49,10 +49,7 @@
     "next-themes": "~0.4.4",
     "postcss": "~8.5.3",
     "postcss-calc": "~10.1.1",
-    "postcss-import": "~16.1.0",
     "postcss-loader": "~8.1.1",
-    "postcss-mixins": "~11.0.3",
-    "postcss-simple-vars": "~7.0.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rehype-autolink-headings": "~7.1.0",