修复 expressive-code 折叠效果和 details 样式冲突问题

Author: CatCodeMe

bun.lock

@@ -31,7 +31,7 @@
     "astro": "5.5.3",
     "astro-expressive-code": "^0.41.3",
     "astro-icon": "^1.1.5",
-    "astro-pure": "1.3.2",
+    "astro-pure": "1.3.1",
     "font-carrier": "^0.3.1",
     "katex": "^0.16.22",
     "rehype-katex": "^7.0.1",

package.json

@@ -6,10 +6,10 @@ import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro'
 // Integrations
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
+import rehypeExternalLinks from 'rehype-external-links'
 import UnoCSS from 'unocss/astro'
-
-import rehypeExternalLinks from './plugins/rehype-external-links'
 import rehypeTable from './plugins/rehype-table'
+
 import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins'
 import { vitePluginUserConfig } from './plugins/virtual-user-config'
 import { UserConfigSchema, type UserInputConfig } from './types/user-config'

packages/pure/bun.lock

@@ -1,6 +1,6 @@
 {
   "name": "astro-pure",
-  "version": "1.3.2",
+  "version": "1.3.1",
   "description": "A simple, clean but powerful blog theme build by astro.",
   "type": "module",
   "author": "CWorld",
@@ -35,14 +35,14 @@
     "./libs": "./libs/index.ts"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.1",
-    "@astrojs/sitemap": "^3.4.1",
+    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/sitemap": "^3.4.0",
     "@pagefind/default-ui": "^1.3.0",
-    "@unocss/reset": "^66.3.3",
-    "astro": "^5.12.0",
+    "astro": "^5.8.1",
     "hast-util-select": "^6.0.4",
     "node-html-parser": "^7.0.1",
     "pagefind": "^1.3.0",
-    "unocss": "^66.3.3"
+    "rehype-external-links": "^3.0.0",
+    "unocss": "^66.1.3"
   }
 }

packages/pure/index.ts

@@ -80,64 +80,7 @@ a {
 }
 
 /* Details/Summary Styles */
-details {
-  border-radius: 8px;
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid hsl(var(--border));
-  background-color: hsl(var(--muted) / var(--un-bg-opacity, 1)) !important;
-  transition: background-color 0.2s ease, border-color 0.2s ease; 
-}
 
-details summary {
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  list-style: none;
-  color: hsl(var(--foreground));
-  transition: color 0.2s ease;
-}
-
-details summary::-webkit-details-marker {
-  display: none;
-}
-
-details summary::before {
-  content: ''; /* No character content */
-  display: inline-block;
-  width: 1em; /* Adjust size as needed */
-  height: 1em; /* Adjust size as needed */
-  margin-right: 0.5rem;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='hsl(240 10% 3.9%)' d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  transition: background-image 0.2s ease;
-}
-
-html.dark details summary::before {
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='hsl(0 0% 98%)' d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/></svg>");
-}
-
-
-details[open] summary::before {
-  transform: none;
-}
-
-details .details-content {
-  margin-top: 1rem;
-  color: hsl(var(--muted-foreground));
-}
-
-details .details-content > :first-child {
-  margin-top: 0;
-}
-details .details-content > :last-child {
-  margin-bottom: 0;
-}
 
 /* inline code css*/
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {

packages/pure/package.json

@@ -27,4 +27,11 @@
 .expressive-code .frame.has-title:not(.is-terminal) .title {
         /* copy from expressive border css*/
         border-bottom: var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol) !important;
+}
+
+/* 修复 details 样式冲突, 未知 css 来源 */
+.prose :where(details):not(:where(.not-prose, .not-prose *)) {
+        margin: 0 !important;
+        padding: 0 !important;
+        /* background: var(--un-prose-bg-soft);*/
 }