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

@@ -1,5 +1,5 @@
 import '@/styles/globals.css'
-import '../../studio/styles/typography.scss'
+import '../../studio/styles/typography.css'
 
 import type { Metadata, Viewport } from 'next'
 

apps/design-system/postcss.config.cjs

@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')

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'

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,

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; */
+/* } */

apps/docs/styles/new-docs.scss

@@ -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;
-// }

apps/docs/types/assets.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}

apps/learn/postcss.config.cjs

@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')

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'

apps/studio/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = require('config/postcss.config')

apps/studio/postcss.config.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-restricted-exports */
-/* eslint-disable import/no-anonymous-default-export */
-
-export default {
-  plugins: {
-    tailwindcss: {},
-  },
-}

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;

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;

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));
   }

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 {

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;

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;
     }
   }
 }

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'],

apps/studio/styles/stripe.css

@@ -1,4 +1,4 @@
-// stylesheet pertaining specifically to Stripe elements
+/* stylesheet pertaining specifically to Stripe elements */
 
 @keyframes fade {
   from {

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 {

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;
   }

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; */
   }
 }
 

apps/studio/types/assets.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}

apps/ui-library/postcss.config.cjs

@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')

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'

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: {

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 {

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'

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:",

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 {

packages/config/postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
+    autoprefixer: {},
   },
 }

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': [

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