fix: use lang="postcss" instead of "pcss"

Author: TheAlexLichter

components/Consent.vue

@@ -19,7 +19,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .cookie-consent {
     @apply .w-full .py-2 .relative .flex .items-center .justify-center .bg-developmint-darker .text-developmint-lightest .text-xs;
 

components/ContactUsModal.vue

@@ -228,7 +228,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   textarea:focus, input:focus {
     outline: none;
   }

components/Footer.vue

@@ -64,7 +64,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .bg-footer {
     background-image: linear-gradient(rgba(9, 0, 16, 1), rgba(11, 7, 16, 0.97));
     background-size: cover;

components/work/AnimatedNumber.vue

@@ -53,6 +53,7 @@ export default {
       if (this.state > 0) {
         return
       }
+
       this.state = 1
       const options = {
         from: { x: this.from, y: 0 },

layouts/error.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .bg-404 {
     background-image: linear-gradient(config('colors.rains-dark'), rgba(11, 7, 35, 0.65)), url("~assets/img/bg/404.jpg");
     background-size: cover;

pages/about.vue

@@ -10,9 +10,9 @@
     </section>
     <section class="md:mx-16 my-24 bg-rains-light xl:flex">
       <TeamMember
-        v-for="member in $options.members"
         :key="member.slug"
         v-bind="member"
+        v-for="member in $options.members"
       />
     </section>
   </div>
@@ -57,15 +57,15 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .bg-about-us {
     background-image: linear-gradient(rgba(11, 7, 16, 0.6), config('colors.rains-dark')), url("~assets/img/bg/about-us_sm.jpg");
     background-size: cover;
     background-position: top;
 
-  @screen md {
-    background-image: linear-gradient(rgba(11, 7, 16, .6), rgba(11, 7, 16, .6) 80%, config('colors.rains-dark')), url("~assets/img/bg/about-us.jpg");
-    background-position: top;
-  }
+    @screen md {
+      background-image: linear-gradient(rgba(11, 7, 16, .6), rgba(11, 7, 16, .6) 80%, config('colors.rains-dark')), url("~assets/img/bg/about-us.jpg");
+      background-position: top;
+    }
   }
 </style>

pages/index.vue

@@ -69,11 +69,11 @@
         </p>
         <div class="lg:flex justify-center items-center my-16">
           <ExpertiseCategory
-            v-for="(expertise, index) in $t('index.expertises.content')"
-            :key="index"
             :is-first="!index"
+            :key="index"
             :list-items="expertise.listItems"
             :title="expertise.title"
+            v-for="(expertise, index) in $t('index.expertises.content')"
           />
         </div>
         <p
@@ -88,11 +88,11 @@
           <Transition name="slide-fade">
             <div class="lg:flex flex-row justify-around lg:my-8 md:p-4">
               <InformationIcon
-                v-for="(data,index) in $t('index.informationIcons')"
-                :key="index"
                 :class="{'opacity-0': !showIcons}"
                 :content="data.content"
+                :key="index"
                 :title="data.title"
+                v-for="(data,index) in $t('index.informationIcons')"
               >
                 <Component
                   :is="data.img"
@@ -181,7 +181,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .bg-gradient-developmint-lighter-rains-lighter-rains-lightest {
     background-image: linear-gradient(23deg, config('colors.developmint-lighter'), config('colors.rains-lighter'), config('colors.rains-lightest'));
   }
@@ -194,18 +194,18 @@ export default {
     background-size: cover;
     background-image: linear-gradient(config('colors.rains-dark'), rgba(11, 7, 16, 0.65)), url("~assets/img/bg/hero_sm.jpg");
 
-  @screen md {
-    background-image: linear-gradient(config('colors.rains-dark'), rgba(11, 7, 16, 0.65)), url("~assets/img/bg/hero.jpg");
-  }
+    @screen md {
+      background-image: linear-gradient(config('colors.rains-dark'), rgba(11, 7, 16, 0.65)), url("~assets/img/bg/hero.jpg");
+    }
   }
 
   .bg-cta-end {
     background-size: cover;
     background-image: linear-gradient(rgba(9, 0, 16, 0.25), rgba(11, 7, 16, 1)), url("~assets/img/bg/contact_sm.jpg");
 
-  @screen md {
-    background-image: linear-gradient(rgba(9, 0, 16, 0.25), rgba(11, 7, 16, 1)), url("~assets/img/bg/contact.jpg");
-    background-position: bottom;
-  }
+    @screen md {
+      background-image: linear-gradient(rgba(9, 0, 16, 0.25), rgba(11, 7, 16, 1)), url("~assets/img/bg/contact.jpg");
+      background-position: bottom;
+    }
   }
 </style>

pages/work/index.vue

@@ -32,9 +32,9 @@
         >
           <AnimatedNumber
             :duration="duration"
+            :precision="precision"
             :should-start="isVisible"
             :to="to"
-            :precision="precision"
             class="text-2xl font-bold pl-4"
             style="font-variant-numeric: tabular-nums"
           />
@@ -123,7 +123,7 @@ export default {
 }
 </script>
 
-<style lang="pcss">
+<style lang="postcss">
   .bg-work {
     background-size: cover;
     background-image: linear-gradient(config('colors.rains-dark'), rgba(11, 7, 16, 0.6)), url("~assets/img/bg/work_sm.jpg");