From 070316cb875549541485b2eeaa070047d42a38c6 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Mon, 20 Apr 2026 13:58:01 +0200
Subject: [PATCH] chore: Migrate all `scss` files to `css` (#44268)

This pull request migrates all SCSS stylesheets in the `apps/studio` and
`apps/docs` projects to CSS, updates import paths accordingly, and
consolidates PostCSS configuration to use a shared config. The migration
includes renaming files, updating import statements, converting SCSS
comments to CSS comments, and removing redundant or legacy configuration
files. The changes improve maintainability and consistency across the
codebase.

**Migration from SCSS to CSS:**

* All SCSS stylesheets in `apps/studio/styles` and `apps/docs/styles`
have been renamed to `.css`, and their contents updated by converting
SCSS comments (`// ...`) to CSS comments (`/* ... */`). All relevant
import statements in the app entry points have been updated to reference
the new `.css` files.

**PostCSS configuration consolidation:**

* The separate `postcss.config.cjs` files in `apps/design-system`,
`apps/learn`, and `apps/studio` now all import from a shared
`config/postcss.config`, ensuring consistent PostCSS setup across
projects. The legacy `postcss.config.js` in `apps/studio` has been
removed.

**Code and style consistency improvements:**

* All instances of the SCSS-specific `#{!important}` in Tailwind
`@apply` rules have been replaced with the standard CSS `!important`
syntax.
* Minor fixes and comment updates were made throughout the stylesheets
to improve readability and maintainability, such as moving or clarifying
TODOs and notes.

These changes streamline the styling approach, reduce build complexity,
and make it easier to maintain and scale the design system and
documentation styles.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
  * Consolidated PostCSS configuration across apps
  * Migrated many stylesheet imports from SCSS to CSS
  * Standardized CSS comment and @apply syntax for consistency

* **Chores**
  * Removed SCSS (sass) dev dependency
  * Added autoprefixer and tailwindcss/nesting to PostCSS plugins
  * Removed SCSS module type declarations (cleaned up typings)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/design-system/app/layout.tsx             |  2 +-
 apps/design-system/postcss.config.cjs         |  6 +--
 apps/docs/app/layout.tsx                      |  8 ++--
 apps/docs/styles/{main.scss => main.css}      | 46 +++++++++----------
 apps/docs/styles/new-docs.css                 | 22 +++++++++
 apps/docs/styles/new-docs.scss                | 22 ---------
 .../{prism-okaidia.scss => prism-okaidia.css} |  0
 apps/docs/types/assets.d.ts                   |  4 --
 apps/learn/postcss.config.cjs                 |  6 +--
 apps/studio/pages/_app.tsx                    | 30 ++++++------
 apps/studio/postcss.config.cjs                |  1 +
 apps/studio/postcss.config.js                 |  8 ----
 apps/studio/styles/{code.scss => code.css}    | 20 ++++----
 .../studio/styles/{editor.scss => editor.css} |  2 +-
 apps/studio/styles/{focus.scss => focus.css}  |  0
 .../{graphiql-base.scss => graphiql-base.css} |  0
 apps/studio/styles/{grid.scss => grid.css}    | 12 ++---
 apps/studio/styles/{main.scss => main.css}    | 18 ++++----
 ...down-preview.scss => markdown-preview.css} |  7 +--
 .../studio/styles/{monaco.scss => monaco.css} |  0
 ...rid-logs.scss => react-data-grid-logs.css} |  6 +--
 .../styles/{reactflow.scss => reactflow.css}  |  0
 .../styles/{storage.scss => storage.css}      |  8 ++--
 .../studio/styles/{stripe.scss => stripe.css} |  2 +-
 apps/studio/styles/{toast.scss => toast.css}  |  2 +-
 .../{typography.scss => typography.css}       |  2 +-
 apps/studio/styles/{ui.scss => ui.css}        | 24 +++++-----
 apps/studio/types/assets.d.ts                 |  4 --
 apps/ui-library/postcss.config.cjs            |  6 +--
 apps/www/app/layout.tsx                       |  2 +-
 .../components/CodeBlock/CodeBlock.utils.js   |  2 +-
 apps/www/pages/_app.tsx                       |  2 +-
 apps/www/types/assets.d.ts                    |  5 --
 package.json                                  |  1 -
 .../config/{code-hike.scss => code-hike.css}  | 24 +++++-----
 packages/config/postcss.config.js             |  2 +
 packages/eslint-config-supabase/next.js       |  2 +
 pnpm-lock.yaml                                | 17 +------
 38 files changed, 142 insertions(+), 183 deletions(-)
 rename apps/docs/styles/{main.scss => main.css} (87%)
 create mode 100644 apps/docs/styles/new-docs.css
 delete mode 100644 apps/docs/styles/new-docs.scss
 rename apps/docs/styles/{prism-okaidia.scss => prism-okaidia.css} (100%)
 delete mode 100644 apps/docs/types/assets.d.ts
 create mode 100644 apps/studio/postcss.config.cjs
 delete mode 100644 apps/studio/postcss.config.js
 rename apps/studio/styles/{code.scss => code.css} (86%)
 rename apps/studio/styles/{editor.scss => editor.css} (88%)
 rename apps/studio/styles/{focus.scss => focus.css} (100%)
 rename apps/studio/styles/{graphiql-base.scss => graphiql-base.css} (100%)
 rename apps/studio/styles/{grid.scss => grid.css} (96%)
 rename apps/studio/styles/{main.scss => main.css} (95%)
 rename apps/studio/styles/{markdown-preview.scss => markdown-preview.css} (99%)
 rename apps/studio/styles/{monaco.scss => monaco.css} (100%)
 rename apps/studio/styles/{react-data-grid-logs.scss => react-data-grid-logs.css} (92%)
 rename apps/studio/styles/{reactflow.scss => reactflow.css} (100%)
 rename apps/studio/styles/{storage.scss => storage.css} (85%)
 rename apps/studio/styles/{stripe.scss => stripe.css} (95%)
 rename apps/studio/styles/{toast.scss => toast.css} (99%)
 rename apps/studio/styles/{typography.scss => typography.css} (93%)
 rename apps/studio/styles/{ui.scss => ui.css} (96%)
 delete mode 100644 apps/studio/types/assets.d.ts
 rename packages/config/{code-hike.scss => code-hike.css} (95%)

diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index e6c4f02ef17..a7d6c82e2dd 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -1,5 +1,5 @@
 import '@/styles/globals.css'
-import '../../studio/styles/typography.scss'
+import '../../studio/styles/typography.css'
 
 import type { Metadata, Viewport } from 'next'
 
diff --git a/apps/design-system/postcss.config.cjs b/apps/design-system/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/design-system/postcss.config.cjs
+++ b/apps/design-system/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index fbde324a0a4..e470d95e69b 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,9 +1,9 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import 'ui-patterns/ShimmeringLoader/index.css'
-import '../styles/main.scss'
-import '../styles/new-docs.scss'
-import '../styles/prism-okaidia.scss'
+import '../styles/main.css'
+import '../styles/new-docs.css'
+import '../styles/prism-okaidia.css'
 
 import { GlobalProviders } from '~/features/app.providers'
 import { TopNavSkeleton } from '~/layouts/MainSkeleton'
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.css
similarity index 87%
rename from apps/docs/styles/main.scss
rename to apps/docs/styles/main.css
index 02fc3958d64..48534b2397d 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.css
@@ -43,14 +43,14 @@ body {
   color: #333 !important;
 }
 
-// a {
-//   text-decoration: none !important;
-// }
+/* a { */
+/*   text-decoration: none !important; */
+/* } */
 
 article h1 {
-  // margin-bottom: 2rem !important;
-  // font-size: 3rem !important;
-  // font-weight: 400 !important;
+  /* margin-bottom: 2rem !important; */
+  /* font-size: 3rem !important; */
+  /* font-weight: 400 !important; */
 }
 
 .thin-scrollbar {
@@ -91,8 +91,8 @@ pre[class*='language-'] {
   text-shadow: none !important;
 }
 
-// Spec doc specifics ported from docusaurus
-// @TODO these should be converted to Tailwind classes
+/* Spec doc specifics ported from docusaurus */
+/* @TODO these should be converted to Tailwind classes */
 
 .method-list-item {
   @apply border-t border-gray-400;
@@ -157,18 +157,18 @@ pre[class*='language-'] {
   margin-bottom: 4px;
 }
 
-// These should move to their own components
-// wasn't able to get an import path working
+/* These should move to their own components */
+/* wasn't able to get an import path working */
 .parent-menu-toggle.active {
   svg {
     transform: rotate(90deg);
   }
 }
 
-// ToC styles
-// .toc__menu-item--active {
-//   color: hsl(var(--brand-default)) !important;
-// }
+/* ToC styles */
+/* .toc__menu-item--active { */
+/*   color: hsl(var(--brand-default)) !important; */
+/* } */
 
 .video-container {
   position: relative;
@@ -189,7 +189,7 @@ pre[class*='language-'] {
   @apply m-0;
 }
 
-// format <code> inside <p>
+/* format <code> inside <p> */
 h2 code,
 h3 code,
 h4 code {
@@ -205,7 +205,7 @@ h4 code {
   }
 }
 
-// code inside admonitions
+/* code inside admonitions */
 .admonition-content p code {
   @apply bg-control;
   word-break: keep-all !important;
@@ -216,13 +216,13 @@ article p strong {
   color: inherit !important;
 }
 
-// fix box shadow when <code> is inside <a>
+/* fix box shadow when <code> is inside <a> */
 a:has(code) {
   box-shadow: none !important;
 }
 
-// fix code line wrapping
-// need to set this to happen from medium onwards, otherwise the would cause horizontal scroll
+/* fix code line wrapping */
+/* need to set this to happen from medium onwards, otherwise the would cause horizontal scroll */
 article p code {
   &::before,
   &::after {
@@ -237,12 +237,12 @@ article p code {
   }
 }
 
-// fix firefox issue with li wrapping
+/* fix firefox issue with li wrapping */
 .doc-content-container ul li div.relative {
   display: inline-block;
 }
 
-// fix ToC links when they have <code> inside
+/* fix ToC links when they have <code> inside */
 .toc-menu li a code {
   background: none;
   border: none;
@@ -317,12 +317,12 @@ th code {
   @apply not-sr-only;
 }
 
-// Code blocks need margin applied when in content container
+/* Code blocks need margin applied when in content container */
 .prose :where(.shiki:not(.shiki-wrapper *), .shiki-wrapper) {
   margin-block: 2rem;
 }
 
-// Code block theme colors for use with Supabase Theme
+/* Code block theme colors for use with Supabase Theme */
 [data-theme='dark'],
 [data-theme='deep-dark'],
 .dark,
diff --git a/apps/docs/styles/new-docs.css b/apps/docs/styles/new-docs.css
new file mode 100644
index 00000000000..6f3047bab95
--- /dev/null
+++ b/apps/docs/styles/new-docs.css
@@ -0,0 +1,22 @@
+/* overwrite for typography */
+
+/* .prose ul { */
+/*   li { */
+/*     position: relative; */
+/*   } */
+/*   li::before { */
+/*     position: absolute; */
+/*     top: 0.75rem; */
+/*     left: -1rem; */
+/*     height: 0.125rem; */
+/*     width: 0.5rem; */
+/*     border-radius: 0.25rem; */
+/*     background-color: var(--colors-scale9); */
+/*     opacity: 0.6; */
+/*     content: ''; */
+/*   } */
+/* } */
+
+/* article { */
+/*   background: yellow !important; */
+/* } */
diff --git a/apps/docs/styles/new-docs.scss b/apps/docs/styles/new-docs.scss
deleted file mode 100644
index 10591acd3d6..00000000000
--- a/apps/docs/styles/new-docs.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// overwrite for typography
-
-// .prose ul {
-//   li {
-//     position: relative;
-//   }
-//   li::before {
-//     position: absolute;
-//     top: 0.75rem;
-//     left: -1rem;
-//     height: 0.125rem;
-//     width: 0.5rem;
-//     border-radius: 0.25rem;
-//     background-color: var(--colors-scale9);
-//     opacity: 0.6;
-//     content: '';
-//   }
-// }
-
-// article {
-//   background: yellow !important;
-// }
diff --git a/apps/docs/styles/prism-okaidia.scss b/apps/docs/styles/prism-okaidia.css
similarity index 100%
rename from apps/docs/styles/prism-okaidia.scss
rename to apps/docs/styles/prism-okaidia.css
diff --git a/apps/docs/types/assets.d.ts b/apps/docs/types/assets.d.ts
deleted file mode 100644
index 70be4aae409..00000000000
--- a/apps/docs/types/assets.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
diff --git a/apps/learn/postcss.config.cjs b/apps/learn/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/learn/postcss.config.cjs
+++ b/apps/learn/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index d753533394f..41d6d04fb9d 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -1,19 +1,19 @@
 import 'react-data-grid/lib/styles.css'
-import '@/styles/code.scss'
-import '@/styles/editor.scss'
-import '@/styles/focus.scss'
-import '@/styles/graphiql-base.scss'
-import '@/styles/grid.scss'
-import '@/styles/main.scss'
-import '@/styles/markdown-preview.scss'
-import '@/styles/monaco.scss'
-import '@/styles/react-data-grid-logs.scss'
-import '@/styles/reactflow.scss'
-import '@/styles/storage.scss'
-import '@/styles/stripe.scss'
-import '@/styles/toast.scss'
-import '@/styles/typography.scss'
-import '@/styles/ui.scss'
+import '@/styles/code.css'
+import '@/styles/editor.css'
+import '@/styles/focus.css'
+import '@/styles/graphiql-base.css'
+import '@/styles/grid.css'
+import '@/styles/main.css'
+import '@/styles/markdown-preview.css'
+import '@/styles/monaco.css'
+import '@/styles/react-data-grid-logs.css'
+import '@/styles/reactflow.css'
+import '@/styles/storage.css'
+import '@/styles/stripe.css'
+import '@/styles/toast.css'
+import '@/styles/typography.css'
+import '@/styles/ui.css'
 import 'ui-patterns/ShimmeringLoader/index.css'
 import 'ui/build/css/themes/dark.css'
 import 'ui/build/css/themes/light.css'
diff --git a/apps/studio/postcss.config.cjs b/apps/studio/postcss.config.cjs
new file mode 100644
index 00000000000..29c447cb54b
--- /dev/null
+++ b/apps/studio/postcss.config.cjs
@@ -0,0 +1 @@
+module.exports = require('config/postcss.config')
diff --git a/apps/studio/postcss.config.js b/apps/studio/postcss.config.js
deleted file mode 100644
index 2259daa8a9d..00000000000
--- a/apps/studio/postcss.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable no-restricted-exports */
-/* eslint-disable import/no-anonymous-default-export */
-
-export default {
-  plugins: {
-    tailwindcss: {},
-  },
-}
diff --git a/apps/studio/styles/code.scss b/apps/studio/styles/code.css
similarity index 86%
rename from apps/studio/styles/code.scss
rename to apps/studio/styles/code.css
index 6bc7f701e15..d536fbc52e5 100644
--- a/apps/studio/styles/code.scss
+++ b/apps/studio/styles/code.css
@@ -7,7 +7,7 @@
     white-space: normal;
     word-break: break-word;
 
-    // overflow: auto !important;
+    /* overflow: auto !important; */
   }
 
   .token-line {
@@ -16,13 +16,13 @@
 
   .token.imports,
   .token.property-access {
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.keyword.module,
   .token.function {
     font-style: normal !important;
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.plain,
@@ -35,32 +35,32 @@
   .token.doc-comment.parameter.punctuation,
   .token.doc-comment.optional-parameter.punctuation {
     font-style: normal !important;
-    @apply text-foreground-light #{!important};
+    @apply text-foreground-light !important;
   }
 
   .token.keyword,
   .token.doc-comment.keyword {
     font-style: normal !important;
-    @apply text-blue-900 #{!important};
+    @apply text-blue-900 !important;
   }
 
   .token.string {
     font-style: normal !important;
-    @apply text-brand #{!important};
+    @apply text-brand !important;
   }
 
   .token.constant {
     font-style: normal !important;
-    @apply text-blue-900 #{!important};
+    @apply text-blue-900 !important;
   }
 
   .token.comment {
     font-style: normal !important;
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.number {
-    @apply text-brand #{!important};
+    @apply text-brand !important;
   }
 
   .token.boolean,
@@ -134,7 +134,7 @@
   }
 
   .code-header {
-    // @apply bg-gray-600;
+    /* @apply bg-gray-600; */
     color: #ccc;
     padding: 5px 15px;
     border-radius: 4px 4px 0 0;
diff --git a/apps/studio/styles/editor.scss b/apps/studio/styles/editor.css
similarity index 88%
rename from apps/studio/styles/editor.scss
rename to apps/studio/styles/editor.css
index a863b40cafc..3b8df53f55a 100644
--- a/apps/studio/styles/editor.scss
+++ b/apps/studio/styles/editor.css
@@ -18,7 +18,7 @@
   @apply opacity-50;
 }
 
-// This fix should ideally be in the UI library
+/* This fix should ideally be in the UI library */
 .table-editor-search {
   input {
     @apply pr-10;
diff --git a/apps/studio/styles/focus.scss b/apps/studio/styles/focus.css
similarity index 100%
rename from apps/studio/styles/focus.scss
rename to apps/studio/styles/focus.css
diff --git a/apps/studio/styles/graphiql-base.scss b/apps/studio/styles/graphiql-base.css
similarity index 100%
rename from apps/studio/styles/graphiql-base.scss
rename to apps/studio/styles/graphiql-base.css
diff --git a/apps/studio/styles/grid.scss b/apps/studio/styles/grid.css
similarity index 96%
rename from apps/studio/styles/grid.scss
rename to apps/studio/styles/grid.css
index ee0dfa861e4..db17000aee1 100644
--- a/apps/studio/styles/grid.scss
+++ b/apps/studio/styles/grid.css
@@ -19,7 +19,7 @@
   line-height: inherit;
 }
 
-// Apply parent bg colour while editing
+/* Apply parent bg colour while editing */
 .rdg-cell.rdg-editor-container > * {
   background-color: inherit;
 }
@@ -36,13 +36,13 @@
   box-shadow: inset 0 0 0 1px #24b47e;
 }
 
-// Cell with unsaved changes - warning (amber) background/text color
+/* Cell with unsaved changes - warning (amber) background/text color */
 .rdg-cell.rdg-cell--dirty {
   background-color: hsl(var(--warning-300) / 0.75);
   color: hsl(var(--warning-default));
 }
 
-// Row pending addition - green background, green text
+/* Row pending addition - green background, green text */
 .rdg-row.rdg-row--added {
   background-color: hsl(var(--brand-200) / 0.3);
 
@@ -55,13 +55,13 @@
     color: hsl(var(--brand-link));
   }
 
-  // First cell gets a stronger left border to indicate new row
+  /* First cell gets a stronger left border to indicate new row */
   .rdg-cell:first-child {
     box-shadow: inset 2px 0 0 0 hsl(var(--brand-default));
   }
 }
 
-// Row pending deletion - red background with strikethrough effect, red text
+/* Row pending deletion - red background with strikethrough effect, red text */
 .rdg-row.rdg-row--deleted {
   background-color: hsl(var(--destructive-300) / 0.3);
 
@@ -76,7 +76,7 @@
     color: hsl(var(--destructive-default));
   }
 
-  // First cell gets a stronger left border to indicate deleted row
+  /* First cell gets a stronger left border to indicate deleted row */
   .rdg-cell:first-child {
     box-shadow: inset 2px 0 0 0 hsl(var(--destructive-default));
   }
diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.css
similarity index 95%
rename from apps/studio/styles/main.scss
rename to apps/studio/styles/main.css
index 95c54aac3e5..d432650736e 100644
--- a/apps/studio/styles/main.scss
+++ b/apps/studio/styles/main.css
@@ -1,10 +1,10 @@
-@tailwind components;
-
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
 
+@tailwind components;
+
 :root {
   --chart-1: var(--brand-default);
   --chart-2: 173 58% 39%;
@@ -89,7 +89,7 @@ input.form-control,
 .form-control textarea {
   @apply block;
   @apply box-border;
-  // @apply  w-full ;
+  /* @apply  w-full ; */
   @apply rounded-md;
   @apply shadow-sm;
   @apply transition-all;
@@ -133,7 +133,7 @@ input.form-control,
   box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
 }
 
-// icons in date / time inputs
+/* icons in date / time inputs */
 .dark input[type='date']::-webkit-calendar-picker-indicator,
 .dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
 .dark input[type='time']::-webkit-calendar-picker-indicator {
@@ -193,7 +193,7 @@ input[type='number'] {
   -moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
 }
 
-// TODO: It doesnt' work, need to check
+/* TODO: It doesnt' work, need to check */
 .hide-scrollbar {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -262,9 +262,9 @@ div[data-radix-portal]:not(.portal--toast) {
   }
 }
 
-// to do: remove this CSS and do the same thing in a reusable tooltip component
+/* to do: remove this CSS and do the same thing in a reusable tooltip component */
 [data-radix-popper-content-wrapper] {
-  @apply z-50 #{!important};
+  @apply z-50 !important;
 }
 
 .settings-container {
@@ -272,7 +272,7 @@ div[data-radix-portal]:not(.portal--toast) {
 }
 
 .react-grid-item.react-grid-placeholder {
-  @apply bg-brand-500 #{!important};
+  @apply bg-brand-500 !important;
 }
 
 .react-grid-item > .react-resizable-handle::after {
@@ -282,7 +282,7 @@ div[data-radix-portal]:not(.portal--toast) {
   bottom: 3px !important;
   width: 6px !important;
   height: 6px !important;
-  @apply border-strong dark:border-r-2 dark:border-b-2 dark:border-overlay #{!important};
+  @apply border-strong dark:border-r-2 dark:border-b-2 dark:border-overlay !important;
 }
 
 @keyframes typewriter {
diff --git a/apps/studio/styles/markdown-preview.scss b/apps/studio/styles/markdown-preview.css
similarity index 99%
rename from apps/studio/styles/markdown-preview.scss
rename to apps/studio/styles/markdown-preview.css
index 07e97c62972..343fdd0d644 100644
--- a/apps/studio/styles/markdown-preview.scss
+++ b/apps/studio/styles/markdown-preview.css
@@ -1,4 +1,4 @@
-// [Joshen] https://github.com/sindresorhus/github-markdown-css
+/* [Joshen] https://github.com/sindresorhus/github-markdown-css */
 
 @media (prefers-color-scheme: dark) {
   .markdown-body,
@@ -118,8 +118,9 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
diff --git a/apps/studio/styles/monaco.scss b/apps/studio/styles/monaco.css
similarity index 100%
rename from apps/studio/styles/monaco.scss
rename to apps/studio/styles/monaco.css
diff --git a/apps/studio/styles/react-data-grid-logs.scss b/apps/studio/styles/react-data-grid-logs.css
similarity index 92%
rename from apps/studio/styles/react-data-grid-logs.scss
rename to apps/studio/styles/react-data-grid-logs.css
index 5274dc6b14d..e1d543976ed 100644
--- a/apps/studio/styles/react-data-grid-logs.scss
+++ b/apps/studio/styles/react-data-grid-logs.css
@@ -33,7 +33,7 @@
 
     &.rdg-row--focused .rdg-cell,
     &.rdg-row--focused .rdg-cell span {
-      @apply text-foreground #{!important};
+      @apply text-foreground !important;
     }
   }
 }
@@ -48,7 +48,7 @@
 
   .rdg-cell,
   .rdg-cell span {
-    @apply text-foreground-light font-normal #{!important};
+    @apply text-foreground-light font-normal !important;
     overflow: visible;
     text-overflow: clip;
   }
@@ -73,7 +73,7 @@
 
     &.rdg-row--focused .rdg-cell,
     &.rdg-row--focused .rdg-cell span {
-      @apply text-foreground-light font-semibold #{!important};
+      @apply text-foreground-light font-semibold !important;
     }
   }
 }
diff --git a/apps/studio/styles/reactflow.scss b/apps/studio/styles/reactflow.css
similarity index 100%
rename from apps/studio/styles/reactflow.scss
rename to apps/studio/styles/reactflow.css
diff --git a/apps/studio/styles/storage.scss b/apps/studio/styles/storage.css
similarity index 85%
rename from apps/studio/styles/storage.scss
rename to apps/studio/styles/storage.css
index d6368c40fae..ac143a4c4fe 100644
--- a/apps/studio/styles/storage.scss
+++ b/apps/studio/styles/storage.css
@@ -35,10 +35,10 @@
   }
 }
 
-// May need to just comment this out, the smooth scrolling looks weird
-// .file-explorer {
-// scroll-behavior: smooth;
-// }
+/* May need to just comment this out, the smooth scrolling looks weird */
+/* .file-explorer { */
+/* scroll-behavior: smooth; */
+/* } */
 
 .storage-row:hover,
 button[aria-haspopup='menu'][data-state='open'],
diff --git a/apps/studio/styles/stripe.scss b/apps/studio/styles/stripe.css
similarity index 95%
rename from apps/studio/styles/stripe.scss
rename to apps/studio/styles/stripe.css
index 13ed536ab87..967e2ead485 100644
--- a/apps/studio/styles/stripe.scss
+++ b/apps/studio/styles/stripe.css
@@ -1,4 +1,4 @@
-// stylesheet pertaining specifically to Stripe elements
+/* stylesheet pertaining specifically to Stripe elements */
 
 @keyframes fade {
   from {
diff --git a/apps/studio/styles/toast.scss b/apps/studio/styles/toast.css
similarity index 99%
rename from apps/studio/styles/toast.scss
rename to apps/studio/styles/toast.css
index 4463dff48b1..ff58b9897e8 100644
--- a/apps/studio/styles/toast.scss
+++ b/apps/studio/styles/toast.css
@@ -88,7 +88,7 @@
   background: #3498db;
 }
 .Toastify__toast--success {
-  // background: #07bc0c;
+  /* background: #07bc0c; */
   @apply bg-green-600;
 }
 .Toastify__toast--warning {
diff --git a/apps/studio/styles/typography.scss b/apps/studio/styles/typography.css
similarity index 93%
rename from apps/studio/styles/typography.scss
rename to apps/studio/styles/typography.css
index 0f2d5569a77..f02a2e4ffcb 100644
--- a/apps/studio/styles/typography.scss
+++ b/apps/studio/styles/typography.css
@@ -79,7 +79,7 @@
     @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
   }
 
-  // Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline">
+  /* Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline"> */
   .text-code-inline {
     @apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-md px-1 py-0.5 text-foreground font-medium;
   }
diff --git a/apps/studio/styles/ui.scss b/apps/studio/styles/ui.css
similarity index 96%
rename from apps/studio/styles/ui.scss
rename to apps/studio/styles/ui.css
index f0f37298fec..1b118e74e12 100644
--- a/apps/studio/styles/ui.scss
+++ b/apps/studio/styles/ui.css
@@ -26,7 +26,7 @@
   flex-wrap: wrap;
 }
 
-// TO DO: REMOVE
+/* TO DO: REMOVE */
 .form-group label {
   @apply inline-block text-foreground-light text-sm py-2;
   width: 33%;
@@ -203,11 +203,11 @@
     );
   }
 
-  // h1,
-  // h2,
-  // h3 {
-  //   @apply p-4 m-0;
-  // }
+  /* h1, */
+  /* h2, */
+  /* h3 { */
+  /*   @apply p-4 m-0; */
+  /* } */
 
   .doc-heading {
     @apply text-foreground capitalize mt-4 px-6 w-1/2;
@@ -257,9 +257,9 @@
     @apply p-4 px-6 w-1/2;
     max-width: 50%;
 
-    // a:not(.btn-primary):not(.btn-secondary) {
-    //   @apply text-green-500;
-    // }
+    /* a:not(.btn-primary):not(.btn-secondary) { */
+    /*   @apply text-green-500; */
+    /* } */
 
     a {
       @apply transition;
@@ -340,14 +340,14 @@
     display: none !important;
   }
 
-  // for Firefox
-  scrollbar-width: none; // auto | thin | none | <length>;
+  /* for Firefox */
+  scrollbar-width: none; /* auto | thin | none | <length>; */
 }
 
 .radix-tooltip-arrow {
   polygon {
     @apply fill-background-alternative [[data-theme*=dark]_&]:fill-background-alternative;
-    // fill: #eeeeee;
+    /* fill: #eeeeee; */
   }
 }
 
diff --git a/apps/studio/types/assets.d.ts b/apps/studio/types/assets.d.ts
deleted file mode 100644
index 70be4aae409..00000000000
--- a/apps/studio/types/assets.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
diff --git a/apps/ui-library/postcss.config.cjs b/apps/ui-library/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/ui-library/postcss.config.cjs
+++ b/apps/ui-library/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 7ba2db492c7..28e9de0241c 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,5 +1,5 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import '../styles/index.css'
 
 import { Metadata } from 'next'
diff --git a/apps/www/components/CodeBlock/CodeBlock.utils.js b/apps/www/components/CodeBlock/CodeBlock.utils.js
index 4a3da382c65..797a51f0a64 100644
--- a/apps/www/components/CodeBlock/CodeBlock.utils.js
+++ b/apps/www/components/CodeBlock/CodeBlock.utils.js
@@ -229,7 +229,7 @@ const monokaiCustomTheme = {
   },
 }
 
-// CodeHike theme based on the colors from code-hike.scss
+// CodeHike theme based on the colors from code-hike.css
 const codeHikeTheme = {
   dark: {
     hljs: {
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 8125ced851e..f6f1e20afdb 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -1,5 +1,5 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import '../styles/index.css'
 
 import {
diff --git a/apps/www/types/assets.d.ts b/apps/www/types/assets.d.ts
index edf306f1b44..fd92a54f0ce 100644
--- a/apps/www/types/assets.d.ts
+++ b/apps/www/types/assets.d.ts
@@ -3,11 +3,6 @@ declare module '*.css' {
   export default styles
 }
 
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
-
 declare module 'swiper/css'
 declare module 'swiper/css/a11y'
 declare module 'swiper/css/navigation'
diff --git a/package.json b/package.json
index f1e3754fd8c..c92e579d3b9 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "prettier": "^3.8.0",
     "prettier-plugin-sql-cst": "^0.18.0",
     "rimraf": "^6.0.0",
-    "sass": "^1.72.0",
     "supabase": "^2.76.10",
     "supports-color": "^8.0.0",
     "tailwindcss": "catalog:",
diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.css
similarity index 95%
rename from packages/config/code-hike.scss
rename to packages/config/code-hike.css
index 97b97fee0ae..85997070341 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.css
@@ -16,7 +16,7 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  // --ch-16: hsl(var(--foreground-lighter));
+  /* --ch-16: hsl(var(--foreground-lighter)); */
   --ch-16: #2a2929;
   --ch-17: #264f78;
   --ch-18: #3794ff;
@@ -47,7 +47,7 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  // --ch-16: hsl(var(--foreground-lighter));
+  /* --ch-16: hsl(var(--foreground-lighter)); */
   --ch-16: #eeeeee;
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
@@ -69,8 +69,8 @@
   overflow: hidden;
   padding: 0 8px 8px;
   font-family: 'Courier New', Courier, monospace;
-  //   font-family: Ubuntu, Droid Sans, -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
-  // sans-serif;
+  /*   font-family: Ubuntu, Droid Sans, -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, */
+  /* sans-serif; */
 }
 .ch-code-wrapper {
   background-color: var(--ch-16) !important;
@@ -168,8 +168,8 @@
 .ch-code-browser {
   display: flex;
   height: 100%;
-  //   font-family: 'Courier New', Courier, monospace;
-  //   font-family: Ubuntu, Droid Sans, -apple-system;
+  /*   font-family: 'Courier New', Courier, monospace; */
+  /*   font-family: Ubuntu, Droid Sans, -apple-system; */
 }
 .ch-code-browser-sidebar {
   border-right: 1px solid;
@@ -268,7 +268,7 @@
   break-inside: avoid;
   --ch-title-bar-height: 32px;
   height: 100%;
-  //   border: 1px solid red;
+  /*   border: 1px solid red; */
 }
 .ch-editor-frame .ch-frame-title-bar {
   background-color: var(--ch-21) !important;
@@ -390,8 +390,8 @@
   flex-shrink: 0;
   height: 1em;
   width: 4.16em;
-  //   display: flex;
-  display: none; // @mildtomato
+  /*   display: flex; */
+  display: none; /* @mildtomato */
 }
 .ch-frame-button {
   width: 1em;
@@ -622,8 +622,8 @@
   height: -webkit-max-content;
   height: -moz-max-content;
   height: max-content;
-  // box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3),
-  //   0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+  /* box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), */
+  /*   0 -6px 16px -6px rgba(0, 0, 0, 0.025); */
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
@@ -638,7 +638,7 @@
 .ch-codegroup {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
-  border: 1px solid hsl(var(--border-default)); // @mildtomato
+  border: 1px solid hsl(var(--border-default)); /* @mildtomato */
   box-shadow: none;
 }
 .ch-inline-code > code {
diff --git a/packages/config/postcss.config.js b/packages/config/postcss.config.js
index 08a01d4d167..74892551be5 100644
--- a/packages/config/postcss.config.js
+++ b/packages/config/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
+    autoprefixer: {},
   },
 }
diff --git a/packages/eslint-config-supabase/next.js b/packages/eslint-config-supabase/next.js
index 339e5bbcea1..8de68d8cb2c 100644
--- a/packages/eslint-config-supabase/next.js
+++ b/packages/eslint-config-supabase/next.js
@@ -86,6 +86,8 @@ module.exports = defineConfig([
       'app/**/*.tsx',
       'components/interfaces/**/content/**/content.tsx',
       'vitest.config.ts',
+      'postcss.config.js',
+      'postcss.config.cjs',
     ],
     rules: {
       'no-restricted-exports': [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1a8aae31df..bf3a8c26057 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,9 +135,6 @@ importers:
       rimraf:
         specifier: ^6.0.0
         version: 6.0.1
-      sass:
-        specifier: ^1.72.0
-        version: 1.72.0
       supabase:
         specifier: ^2.76.10
         version: 2.76.14(supports-color@8.1.1)
@@ -16902,11 +16899,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.72.0:
-    resolution: {integrity: sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   sass@1.77.4:
     resolution: {integrity: sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==}
     engines: {node: '>=14.0.0'}
@@ -31503,7 +31495,8 @@ snapshots:
 
   immutable@3.8.3: {}
 
-  immutable@4.3.8: {}
+  immutable@4.3.8:
+    optional: true
 
   import-fresh@3.3.0:
     dependencies:
@@ -36337,12 +36330,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.72.0:
-    dependencies:
-      chokidar: 3.6.0
-      immutable: 4.3.8
-      source-map-js: 1.2.1
-
   sass@1.77.4:
     dependencies:
       chokidar: 3.6.0