fix format

Author: bjohansebas

apps/site/.stylelintrc.mjs

@@ -4,6 +4,10 @@ const CUSTOM_AT_RULES = [
   'apply',
   'layer',
   'responsive',
+  'reference',
+  'utility',
+  'theme',
+  'custom-variant',
   'screen',
   'tailwind',
   'variants',
@@ -42,8 +46,6 @@ export default {
     // Adopts the import notation from `postcss-import`
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
-    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
-    'at-rule-no-unknown': null,
-    'function-no-unknown': null,
+    'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
   },
 };

apps/site/components/Common/Button/index.module.css

@@ -1,12 +1,12 @@
 @reference "../../../styles/index.css";
 
 .button {
-  @apply px-4.5
-    relative
+  @apply relative
     inline-flex
     items-center
     justify-center
     gap-2
+    px-4.5
     py-2.5
     text-center
     font-semibold
@@ -47,12 +47,12 @@
   }
 
   &.primary {
-    @apply shadow-xs
-      rounded-sm
+    @apply rounded-sm
       border
       border-green-600
       bg-green-600
-      text-white;
+      text-white
+      shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-green-700
@@ -97,13 +97,13 @@
   }
 
   &.special {
-    @apply shadow-xs
-      before:bg-gradient-glow-backdrop
+    @apply before:bg-gradient-glow-backdrop
       rounded-lg
       border
       border-green-600/30
       bg-green-600/10
       text-white
+      shadow-xs
       after:bg-gradient-to-r
       after:from-green-600/0
       after:via-green-600
@@ -112,9 +112,9 @@
 
     &::before {
       @apply absolute
-        left-0
-        right-0
         top-0
+        right-0
+        left-0
         -z-10
         mx-auto
         h-full
@@ -126,8 +126,8 @@
     &::after {
       @apply absolute
         -top-px
-        left-0
         right-0
+        left-0
         mx-auto
         h-px
         w-2/5;

apps/site/components/Common/GlowingBackdrop/index.module.css

@@ -2,8 +2,8 @@
 
 .glowingBackdrop {
   @apply absolute
-    left-0
     top-0
+    left-0
     -z-10
     size-full
     opacity-50

apps/site/components/Common/Preview/index.module.css

@@ -1,8 +1,8 @@
 @reference "../../../styles/index.css";
 
 .root {
-  @apply @container/preview
-    after:bg-gradient-radial
+  @apply after:bg-gradient-radial
+    @container/preview
     relative
     flex
     aspect-[1.90/1]
@@ -13,15 +13,15 @@
     bg-neutral-950;
 
   &::after {
-    @apply @md/preview:blur-3xl
-      absolute
+    @apply absolute
       inset-0
       m-auto
       aspect-square
       w-1/3
       rounded-full
       blur-2xl
-      content-[''];
+      content-['']
+      @md/preview:blur-3xl;
   }
 
   &.announcements {
@@ -37,15 +37,7 @@
   }
 
   .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
+    @apply z-10
       mx-auto
       flex
       w-2/3
@@ -55,29 +47,37 @@
       text-center
       text-xs
       font-semibold
-      text-white;
+      text-white
+      @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl;
 
     .hexagon {
-      @apply @md/preview:h-3/5
+      @apply absolute
+        inset-0
+        m-auto
+        size-full
+        @md/preview:h-3/5
         @md/preview:w-3/5
         @lg/preview:h-2/3
         @lg/preview:w-2/3
         @xl/preview:h-3/5
         @xl/preview:w-3/5
         @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
+        @2xl/preview:w-2/3;
     }
 
     .logo {
-      @apply @md/preview:size-14
+      @apply mx-auto
+        size-6
+        @md/preview:size-14
         @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
+        @xl/preview:size-20;
     }
   }
 }

apps/site/components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -20,8 +20,8 @@
 
     &::after {
       @apply absolute
-        left-[0.45rem]
         top-0
+        left-[0.45rem]
         z-10
         h-full
         w-px
@@ -45,8 +45,8 @@
 
       &:last-child::after {
         @apply absolute
-          left-0
           top-[calc(50%+0.25rem)]
+          left-0
           h-20
           w-4
           content-[''];

apps/site/styles/effects.css

@@ -27,18 +27,18 @@
 
   &::after {
     @apply absolute
-    -left-full
     top-[20%]
+    -left-full
     -z-10
     block
     h-36
     w-36
     -rotate-90
-    select-none
     bg-[url('/static/images/smoke.gif')]
     opacity-[0.15]
     content-['']
-    md:-left-1/2
-    md:top-1/2;
+    select-none
+    md:top-1/2
+    md:-left-1/2;
   }
 }