fix: improve scss imports and legacy compiler

Author: TorstenDittmann

src/lib/animations/Products/Products.svelte

@@ -158,7 +158,6 @@
     import { postController } from './post';
     import Post from './post/post.svelte';
     import { anyify } from '$lib/utils/anyify';
-    import Badge from '$lib/components/ui/Badge.svelte';
 
     /* Basic Animation setup */
     let scrollInfo = {
@@ -508,10 +507,6 @@
                     display: flex;
                     align-items: center;
                     gap: 0.75rem;
-
-                    .web-label {
-                        margin-block-start: 0.25rem;
-                    }
                 }
 
                 h4 {

src/lib/animations/Products/ProductsMobile.svelte

@@ -108,10 +108,6 @@
                 display: flex;
                 align-items: center;
                 gap: 0.75rem;
-
-                .web-label {
-                    margin-block-start: 0.25rem;
-                }
             }
 
             h4 {

src/lib/animations/Products/functions/phone.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { flip } from '$lib/utils/flip';
-    import { crossfade, scale, slide } from 'svelte/transition';
+    import { scale, slide } from 'svelte/transition';
     import { functionsController } from '.';
 
     const { state } = functionsController;

src/lib/animations/Products/post/index.ts

@@ -1,4 +1,4 @@
-import { safeAnimate, sleep } from '$lib/animations';
+import { safeAnimate } from '$lib/animations';
 import { createResettable } from '$lib/utils/resettable';
 import { animate } from 'motion';
 import { getElSelector } from '../Products.svelte';

src/lib/components/IsLoggedIn.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import Button from './ui/Button.svelte';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { classNames } from '$lib/utils/classnames';
     import { trackEvent } from '$lib/actions/analytics';

src/lib/components/LogoList.svelte

@@ -87,7 +87,7 @@
         <ul
             class="web-u-padding-block-start-80 grid grid-cols-3 text-center md:grid-cols-6 md:gap-10"
         >
-            {#each logos as { src, alt, width, height }, i}
+            {#each logos as { src, alt, width, height }}
                 <li class="grid place-content-center">
                     <img {src} {alt} {width} {height} />
                 </li>

src/lib/components/carousel/CarouselSlide.svelte

@@ -5,21 +5,19 @@
 </li>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .slide {
         cursor: grab;
-
-        &:active {
-            cursor: grabbing;
-        }
+        flex: 0 0 50%;
+        min-width: 0;
+        margin-right: f.pxToRem(16);
 
         @media (max-width: 768px) {
             flex: 0 0 100%;
         }
-
-        flex: 0 0 50%;
-        min-width: 0;
-        margin-right: pxToRem(16);
+        &:active {
+            cursor: grabbing;
+        }
     }
 </style>

src/lib/layouts/Main.svelte

@@ -25,7 +25,6 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
     import InitBanner from '$lib/components/InitBanner.svelte';
-    import Button from '$lib/components/ui/Button.svelte';
     import { trackEvent } from '$lib/actions/analytics';
 
     export let omitMainId = false;

src/markdoc/layouts/Integration.svelte

@@ -2,7 +2,6 @@
     import { Root, Slide } from '$lib/components/carousel';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
-    import ProductsGrid from '$lib/components/ProductsGrid.svelte';
     import { Main } from '$lib/layouts';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import type { Integration } from '$routes/integrations/+page';
@@ -181,13 +180,8 @@
 </Main>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
-
-    .cta {
-        min-height: pxToRem(560);
-        display: flex;
-        align-items: center;
-    }
+    @use '$scss/abstract/functions' as f;
+    @use '$scss/abstract/variables/devices';
 
     .web-pre-footer-bg {
         position: absolute;
@@ -199,24 +193,15 @@
         max-inline-size: unset;
         max-block-size: unset;
     }
-    /* more tha 9 items */
-
-    .l-side-column {
-        display: flex;
-        gap: pxToRem(16);
-        @media #{$break1} {
-            flex-direction: column;
-        }
-    }
 
     .l-grid-2-1 {
-        @media #{$break1} {
+        @media #{devices.$break1} {
             display: flex;
             flex-direction: column;
         }
-        @media #{$break2open} {
+        @media #{devices.$break2open} {
             display: grid;
-            gap: pxToRem(64);
+            gap: f.pxToRem(64);
             grid-template-columns: repeat(12, 1fr);
         }
 

src/routes/+page.svelte

@@ -129,9 +129,7 @@
                         <span class="web-icon-star shrink-0" aria-hidden="true" />
                         <span class="text-caption shrink-0 font-medium">New</span>
                         <div class="web-hero-banner-button-sep" />
-                        <span class="text-caption web-u-trim-1"
-                            >Introducing Database Backups</span
-                        >
+                        <span class="text-caption web-u-trim-1">Introducing Database Backups</span>
 
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>

src/routes/contact-us/enterprise/+page.svelte

@@ -77,15 +77,11 @@
 <Main>
     <div class="web-big-padding-section">
         <div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
-            <div
-                class="web-big-padding-section-level-2 is-margin-replace-padding relative"
-            >
+            <div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
                 <div class="relative">
                     <div class="web-container relative">
                         <!-- before submit -->
-                        <div
-                            class="relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
-                        >
+                        <div class="u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0 relative">
                             <div>
                                 <div
                                     class="web-u-max-inline-size-none-mobile"

src/routes/docs/+page.svelte

@@ -385,10 +385,6 @@
         }
     }
 
-    .bg-blur {
-        inset-block-start: -100px;
-    }
-
     .tech-hero {
         @include gradients.border-block-gradient;
 

src/routes/heroes/+page.svelte

@@ -355,6 +355,7 @@
 </Main>
 
 <style lang="scss">
+    @use '$scss/abstract/functions' as f;
     @use '$scss/abstract/mixins/border-gradient' as gradients;
 
     .hero {
@@ -456,7 +457,7 @@
             padding-inline: 4rem;
 
             display: flex;
-            gap: pxToRem(32);
+            gap: f.pxToRem(32);
             flex-shrink: 0;
 
             > * {

src/routes/init-0/(components)/CountdownCard.svelte

@@ -34,12 +34,4 @@
         justify-content: center;
         align-items: center;
     }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>

src/routes/init-0/(components)/Ticket.svelte

@@ -413,12 +413,6 @@
         z-index: -1;
     }
 
-    .text-title font-aeonik-pro {
-        font-size: adjusted(2.5);
-        line-height: #{math.div(44, 40)}em;
-        overflow-wrap: break-word;
-    }
-
     .text-label {
         font-size: adjusted(1.5);
         line-height: #{math.div(28, 24)}em;

src/routes/init/(components)/CountdownCard.svelte

@@ -33,12 +33,4 @@
         align-items: center;
         background-color: hsl(var(--web-color-subtle));
     }
-
-    .text-title font-aeonik-pro {
-        margin-block-start: 0.75rem;
-    }
-
-    .text-sub-body font-medium {
-        margin-block-start: 0.5rem;
-    }
 </style>

src/routes/init/(components)/TicketScroll.svelte

@@ -58,12 +58,12 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .col {
         display: flex;
         flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
 
         @keyframes scroll {
             0% {

src/routes/init/(components)/VideoDialog.svelte

@@ -56,7 +56,7 @@
         pointer-events: none;
         transition: 200ms ease;
 
-        &[data-state='open'] {
+        :global(&[data-state='open']) {
             opacity: 1;
             pointer-events: all;
         }
@@ -82,7 +82,7 @@
         pointer-events: none;
         transition: 200ms ease;
 
-        &[data-state='open'] {
+        :global(&[data-state='open']) {
             opacity: 1;
             transform: scale(1);
             pointer-events: all;

src/routes/init/(components)/grid/Cell.svelte

@@ -8,12 +8,12 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .cell {
         display: flex;
         flex-direction: column;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
         height: 100%;
 
         @media screen and (min-width: 768px) {

src/routes/init/(components)/grid/Root.svelte

@@ -8,11 +8,11 @@
 </div>
 
 <style lang="scss">
-    @use '$scss/abstract' as *;
+    @use '$scss/abstract/functions' as f;
 
     .grid {
         display: flex;
-        gap: pxToRem(32);
+        gap: f.pxToRem(32);
         flex-direction: column;
 
         @media screen and (min-width: 768px) {