From b679d0afe1d229dcf9526a905c58e928d4988e19 Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Wed, 16 Jul 2025 00:13:55 +0800
Subject: [PATCH] perf: tweak css performance

---
 astro.config.ts                               |  8 ++---
 src/components/layout/TransitionWrapper.astro |  2 +-
 src/components/ui/CopyCode.astro              |  2 +-
 src/components/ui/GitHubCard.astro            | 34 +++++++++----------
 src/components/ui/TableOfContents.astro       |  2 +-
 src/components/ui/XPOST.astro                 |  8 ++---
 src/components/widgets/FormattedDate.astro    |  6 +++-
 7 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 1cf6020..3409ce7 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -32,11 +32,11 @@ export default defineConfig({
     rehypePlugins: [rehypeKatex, rehypeCleanup, rehypeImageProcessor, rehypeCopyCode]
   },
   integrations: [
-    mdx(),
-    sitemap(),
     playformInline({
-      Path: ['./src/styles']
-    })
+      Exclude: [(file) => file.toLowerCase().includes('katex')]
+    }),
+    mdx(),
+    sitemap()
   ],
   vite: {
     resolve: {
diff --git a/src/components/layout/TransitionWrapper.astro b/src/components/layout/TransitionWrapper.astro
index 2360d63..be02c6f 100644
--- a/src/components/layout/TransitionWrapper.astro
+++ b/src/components/layout/TransitionWrapper.astro
@@ -52,7 +52,7 @@ const transitionName = type === 'post' ? 'post-content' : 'page-content'
   document.addEventListener('touchstart', cleanupHover, { passive: true })
 </script>
 
-<style is:global>
+<style is:inline>
   @supports (view-transition-name: none) {
     @media not (prefers-reduced-motion: reduce) {
       ::view-transition-old(post-content),
diff --git a/src/components/ui/CopyCode.astro b/src/components/ui/CopyCode.astro
index e301c2a..0c0be7b 100644
--- a/src/components/ui/CopyCode.astro
+++ b/src/components/ui/CopyCode.astro
@@ -120,7 +120,7 @@ import { themeConfig } from '@/config'
   document.addEventListener('DOMContentLoaded', initCopyCode)
 </script>
 
-<style is:global>
+<style is:inline>
   .copy-code-block {
     position: relative !important;
   }
diff --git a/src/components/ui/GitHubCard.astro b/src/components/ui/GitHubCard.astro
index 63d378c..0934f9d 100644
--- a/src/components/ui/GitHubCard.astro
+++ b/src/components/ui/GitHubCard.astro
@@ -147,8 +147,8 @@
   document.addEventListener('astro:page-load', lazySetupGithubCards)
 </script>
 
-<style>
-  :global(.prose .gc-container) {
+<style is:inline>
+  .prose .gc-container {
     display: block;
     border: 0.5px solid var(--border);
     border-radius: 10px;
@@ -160,19 +160,19 @@
     background: var(--astro-code-background);
   }
 
-  :global(.prose .gc-container:hover) {
-    background: var(--code-bg);
+  .prose .gc-container:hover {
+    background: color-mix(in srgb, var(--selection) 60%, transparent);
     text-decoration: none;
   }
 
-  :global(.prose .gc-title-bar) {
+  .prose .gc-title-bar {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 0.75rem;
   }
 
-  :global(.prose .gc-owner-avatar) {
+  .prose .gc-owner-avatar {
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
@@ -180,30 +180,30 @@
     flex-shrink: 0;
   }
 
-  :global(.prose .gc-repo-title) {
+  .prose .gc-repo-title {
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-regular);
     color: var(--text-primary);
     flex-grow: 1;
   }
 
-  :global(.prose .gc-repo-title strong) {
+  .prose .gc-repo-title strong {
     font-weight: var(--font-weight-bold);
   }
 
-  :global(.prose .gc-slash) {
+  .prose .gc-slash {
     color: var(--text-secondary);
     margin: 0 0.375rem;
   }
 
-  :global(.prose .gc-github-icon) {
+  .prose .gc-github-icon {
     width: 1.5rem;
     height: 1.5rem;
     color: var(--text-primary);
     flex-shrink: 0;
   }
 
-  :global(.prose .gc-repo-description) {
+  .prose .gc-repo-description {
     font-size: var(--font-size-m);
     color: var(--text-primary);
     opacity: 0.75;
@@ -211,7 +211,7 @@
     line-height: 1.4;
   }
 
-  :global(.prose .gc-info-bar) {
+  .prose .gc-info-bar {
     display: flex;
     align-items: center;
     color: var(--text-primary);
@@ -219,16 +219,14 @@
     gap: 0.35rem;
   }
 
-  :global(
-    .prose .gc-info-bar .gc-stars-count,
-    .prose .gc-info-bar .gc-forks-count,
-    .prose .gc-info-bar .gc-license-info
-  ) {
+  .prose .gc-info-bar .gc-stars-count,
+  .prose .gc-info-bar .gc-forks-count,
+  .prose .gc-info-bar .gc-license-info {
     margin-right: 0.675rem;
     font-size: var(--font-size-s);
   }
 
-  :global(.prose .gc-info-icon) {
+  .prose .gc-info-icon {
     color: var(--text-primary);
     width: 0.875rem;
     height: 0.875rem;
diff --git a/src/components/ui/TableOfContents.astro b/src/components/ui/TableOfContents.astro
index d8764b3..2551c29 100644
--- a/src/components/ui/TableOfContents.astro
+++ b/src/components/ui/TableOfContents.astro
@@ -247,7 +247,7 @@ const { toc = [] }: TOCProps = Astro.props
   })()
 </script>
 
-<style is:global>
+<style is:inline>
   .toc-container {
     width: 12rem;
     position: relative;
diff --git a/src/components/ui/XPOST.astro b/src/components/ui/XPOST.astro
index 1d063be..f8d27ab 100644
--- a/src/components/ui/XPOST.astro
+++ b/src/components/ui/XPOST.astro
@@ -23,20 +23,20 @@
   document.addEventListener('astro:page-load', loadXCards)
 </script>
 
-<style>
-  :global(.prose .x-card) {
+<style is:inline>
+  .prose .x-card {
     width: 100%;
     margin: 1em auto;
     text-align: center;
   }
 
-  :global(.prose .x-card > *) {
+  .prose .x-card > * {
     display: inline-block;
     max-width: 100%;
     margin: 0 auto;
   }
 
-  :global(.prose .x-card iframe) {
+  .prose .x-card iframe {
     max-width: 100%;
     width: auto;
   }
diff --git a/src/components/widgets/FormattedDate.astro b/src/components/widgets/FormattedDate.astro
index 1757db3..7062e56 100644
--- a/src/components/widgets/FormattedDate.astro
+++ b/src/components/widgets/FormattedDate.astro
@@ -3,7 +3,11 @@ import { themeConfig } from '@/config'
 import { formatDate } from '@/utils/date'
 import type { FormattedDateProps } from '@/types'
 
-const { date, format, context = 'default' } = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
+const {
+  date,
+  format,
+  context = 'default'
+} = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
 ---
 
 <time
-- 
2.51.2