@xingwangzhe/stalux 1.29.7 → 1.30.0

package/src/components/stalux/posts/postToc.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
-import style from "@styles/components/posts/postToc.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -30,16 +31,16 @@ const tocItems = headings
 
 <nav
     transition:name="toc-container"
-    data-toc-active-class={style.active}
+    data-toc-active-class="stalux-toc-active"
     aria-label={t("taxonomy.toc")}
 >
-    <h3 class={style.title}>{title}</h3>
+    <h3 class="stalux-toc-title">{title}</h3>
     {tocItems.length > 0 ? (
-    <ul class={style.list} transition:name="toc-content">
+    <ul class="stalux-toc-list" transition:name="toc-content">
         {tocItems.map((heading) => (
             <li>
                 <a
-                    class={`${style.item} ${style[`depth-${heading.depth}`] || ""} a-none`}
+                    class={`stalux-toc-item ${({ 1: "stalux-toc-depth-1", 2: "stalux-toc-depth-2", 3: "stalux-toc-depth-3", 4: "stalux-toc-depth-4", 5: "stalux-toc-depth-5", 6: "stalux-toc-depth-6" } as Record<number, string>)[heading.depth] || ""} a-none`}
                     href={`#${heading.slug}`}
                     data-toc-link
                 >
@@ -49,21 +50,8 @@ const tocItems = headings
         ))}
     </ul>
 ) : (
-    <div class={style.empty}>{t("taxonomy.noToc")}</div>
+    <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
 )}
 </nav>
 
 <script src="../../../scripts/toc-scrollspy.ts"></script>
-
-<style is:global>
-@keyframes fadeSlideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-</style>

package/src/components/stalux/posts/randomPost.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-article.css";
 import { getCollection } from "astro:content";
-import style from "@styles/components/posts/randomPost.module.css";
+
 import { createTranslator } from "@utils/i18n";
 
 interface Props {
@@ -17,7 +18,7 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
 ---
 
 <aside
-    class={style.container}
+    class="stalux-random-container"
     transition:persist-props
     aria-label={t("randomPost.title")}
     data-stalux-random-posts
@@ -26,12 +27,12 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
     data-load-failed={t("randomPost.loadFailed")}
     data-load-error={t("randomPost.loadError")}
 >
-    <div class={style.header}>
-        <h3 class={style.title}>{title}</h3>
+    <div class="stalux-random-header">
+        <h3 class="stalux-random-title">{title}</h3>
         <button
             type="button"
             id="refresh-random-posts"
-            class={style.refreshButton}
+            class="stalux-random-refresh"
             title={t("randomPost.refresh")}
             aria-label={t("randomPost.refresh")}
         >
@@ -53,8 +54,8 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
             </svg>
         </button>
     </div>
-    <ul class={style.list} id="random-posts-list">
-        <li class={style.loading}>{t("randomPost.loading")}</li>
+    <ul class="stalux-random-list" id="random-posts-list">
+        <li class="stalux-random-loading">{t("randomPost.loading")}</li>
     </ul>
 </aside>
 <script src="../../../scripts/random-posts.ts"></script>

package/src/components/stalux/tags/tagHeader.astro

@@ -1,4 +1,6 @@
 ---
+import "../../../styles/generated-tags.css";
+
 interface Props {
     type: string;
     typeKey?: string;
@@ -8,7 +10,7 @@ interface Props {
 const props = Astro.props as Props;
 
 import { getCollection } from "astro:content";
-import styles from "@styles/components/tags/tagHeader.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -25,9 +27,9 @@ if (typeKey === "category" || typeKey === "categories" || typeKey === "分类")
 }
 ---
 
-<header class={styles.pageHeader}>
-    <h1 class={styles.pageTitle}>
-        <span class={styles.categoryIcon}>
+<header class="stalux-tag-header">
+    <h1 class="stalux-tag-page-title">
+        <span class="stalux-tag-category-icon">
             <svg
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
@@ -47,8 +49,10 @@ if (typeKey === "category" || typeKey === "categories" || typeKey === "分类")
         </span>
         {props.type}: {props.name}
     </h1>
-    <p class={styles.pageDescription}>{t("taxonomy.foundPosts", { count: props.count })}</p>
-    <a href={typeUrl} class={styles.backLink} data-astro-prefetch
+    <p class="stalux-tag-page-description">
+        {t("taxonomy.foundPosts", { count: props.count })}
+    </p>
+    <a href={typeUrl} class="stalux-tag-back-link" data-astro-prefetch
         >{t("taxonomy.backToList", { type: props.type })}</a
     >
 </header>

package/src/components/stalux/tags/tagsCloud.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-tags.css";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/tags/tagsCloud.module.css";
+
 import { getTagCountList } from "@utils/collections-stats";
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
@@ -21,32 +22,32 @@ const tagLinks = tagList.map((t) => ({
 ---
 
 <!-- 移动端：SSR 卡片 -->
-<div class={styles.cards} id="tags-cards">
+<div class="stalux-cloud-cards" id="tags-cards">
     {tagList.length > 0 ? (
     tagGroups.map((group) => (
-        <div class={styles.tagGroup}>
+        <div class="stalux-cloud-tag-group">
             {group.map(({ name, count }) => (
                 <a
                     href={`/tags/${name}/`}
-                    class={styles.tagCard}
+                    class="stalux-cloud-tag-card"
                     data-stalux-tag-card
                     data-count={count}
                     data-astro-prefetch
                 >
-                    <span class={styles.tagName}>{name}</span>
-                    <span class={styles.tagCount}>{count}</span>
+                    <span class="stalux-cloud-tag-name">{name}</span>
+                    <span class="stalux-cloud-tag-count">{count}</span>
                 </a>
             ))}
         </div>
     ))
 ) : (
-    <div class={styles.noTags}>{t("tags.noTags")}</div>
+    <div class="stalux-cloud-no-tags">{t("tags.noTags")}</div>
 )}
 </div>
 
 <!-- 桌面端：Canvas 标签云 -->
-<div class={styles.canvasFrame} style={{ "--cloud-density": cloudDensity }}>
-    <div class={styles.canvas} id="tags-canvas" data-tags={JSON.stringify(tagLinks)}></div>
+<div class="stalux-cloud-canvas-frame" style={{ "--cloud-density": cloudDensity }}>
+    <div class="stalux-cloud-canvas" id="tags-canvas" data-tags={JSON.stringify(tagLinks)}></div>
 </div>
 
 <script>

package/src/components/stalux/words/wordCard.astro

@@ -1,8 +1,9 @@
 ---
+import "../../../styles/generated-prose.css";
+import "../../../styles/generated-words.css";
 import type { CollectionEntry } from "astro:content";
 import { render } from "astro:content";
-import styles from "@styles/components/words/wordCard.module.css";
-import "@styles/components/markdown.css";
+
 import { toMachineDateTime } from "@utils/semantic-time";
 
 interface Props {
@@ -17,34 +18,34 @@ const { source, link, sourceDate, date, abbrlink } = entry.data;
 const machineDate = date && timezone ? toMachineDateTime(date, timezone) : date;
 ---
 
-<article class={styles.card} id={abbrlink ? `word-${abbrlink}` : undefined}>
-    <div class={styles.body} data-pagefind-body>
+<article class="stalux-word-card" id={abbrlink ? `word-${abbrlink}` : undefined}>
+    <div class="stalux-word-body stalux-prose" data-pagefind-body>
         <Content />
     </div>
     {(date || source || sourceDate) && (
-    <footer class={styles.footer}>
+    <footer class="stalux-word-footer">
         {date ? (
-            <time class={styles.date} datetime={machineDate}>
+            <time class="stalux-word-date" datetime={machineDate}>
                 {date}
             </time>
         ) : (
             <span />
         )}
         {(source || sourceDate) && (
-            <div class={styles.sourceMeta}>
-                {sourceDate && <span class={styles.sourceDate}>{sourceDate}</span>}
+            <div class="stalux-word-source-meta">
+                {sourceDate && <span class="stalux-word-source-date">{sourceDate}</span>}
                 {source &&
                     (link ? (
                         <a
                             href={link}
                             target="_blank"
                             rel="noopener noreferrer"
-                            class={styles.sourceLink}
+                            class="stalux-word-source-link"
                         >
                             — {source}
                         </a>
                     ) : (
-                        <span class={styles.sourceText}>— {source}</span>
+                        <span class="stalux-word-source-text">— {source}</span>
                     ))}
             </div>
         )}

package/src/components/stalux/words/wordList.astro

@@ -1,7 +1,8 @@
 ---
+import "../../../styles/generated-words.css";
 import type { CollectionEntry } from "astro:content";
 import WordCard from "@components/stalux/words/wordCard.astro";
-import styles from "@styles/components/words/wordList.module.css";
+
 import { toTimestamp } from "@utils/dayjs";
 
 interface Props {
@@ -18,11 +19,11 @@ const sorted = [...entries].sort((a, b) => {
 });
 ---
 
-<ul class={styles.list}>
+<ul class="stalux-word-list-list">
     {sorted.map((entry) => {
     const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
     return (
-        <li class={styles.item}>
+        <li class="stalux-word-list-item">
             {hash ? (
                 <a
                     href={hash}

package/src/index.ts

@@ -175,15 +175,16 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 const runtimeCacheKey = createRuntimeCacheKey(
                     path.join(srcDir, "scripts"),
                     path.resolve(srcDir, "../package.json"),
+                    path.join(srcDir, "styles"),
                 );
 
                 // 1. 注入 Vite 别名 + 组件覆盖插件 + Vue 特性标记（Waline 依赖）
                 updateConfig({
-                    // Keep route CSS on the first-response path. Search UI CSS is
-                    // a separate prefetched asset; respect explicit external CSS.
+                    // Reuse shared theme CSS across routes instead of embedding the full bundle.
+                    // Respect callers that explicitly request inline styles.
                     build: {
                         inlineStylesheets:
-                            config.build.inlineStylesheets === "never" ? "never" : "always",
+                            config.build.inlineStylesheets === "always" ? "always" : "never",
                     },
                     vite: {
                         build: { target: config.vite.build?.target ?? "esnext" },
@@ -207,7 +208,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 });
 
                 // 2. 注入全局 CSS
-                injectScript("page-ssr", `import "${srcDir}/styles/base/init.css";`);
+                injectScript("page-ssr", `import "${srcDir}/styles/generated.css";`);
                 injectScript("page", `import "${srcDir}/scripts/core-runtime.ts";`);
 
                 // 2.5 同步背景 SVG 到用户项目 public/background/

package/src/internal/runtime-cache-key.ts

@@ -25,9 +25,21 @@ function collectFiles(directory: string, root = directory): Array<readonly [stri
     });
 }
 
-export function createRuntimeCacheKey(scriptsDirectory: string, packageJson: string): string {
+export function createRuntimeCacheKey(
+    scriptsDirectory: string,
+    packageJson: string,
+    stylesDirectory?: string,
+): string {
     return hashRuntimeSources([
         ...collectFiles(scriptsDirectory),
+        ...(stylesDirectory
+            ? readdirSync(stylesDirectory)
+                  .filter((name) => /^generated(?:-[a-z]+)?\.css$/u.test(name))
+                  .map((name): readonly [string, string] => [
+                      `styles/${name}`,
+                      readFileSync(path.join(stylesDirectory, name), "utf8"),
+                  ])
+            : []),
         ["package.json", readFileSync(packageJson, "utf8")],
     ]);
 }

package/src/layouts/PostLayout.astro

@@ -1,4 +1,5 @@
 ---
+import "../styles/generated-article.css";
 import { getCollection } from "astro:content";
 import PostCC from "@components/stalux/posts/postCC.astro";
 import PostContent from "@components/stalux/posts/postContent.astro";
@@ -9,8 +10,6 @@ import WalineComment from "@components/stalux/posts/WalineComment.astro";
 import { getCommentData } from "@utils/config-utils";
 import { getPostTitleTransitionName } from "@utils/view-transitions";
 import { buildWalineProps } from "@utils/waline";
-import "@styles/base/math.css";
-import layoutStyle from "@styles/components/posts/postLayout.module.css";
 
 interface Props {
     title: string;
@@ -51,8 +50,8 @@ const walineConfig = walineSection?.serverURL
     : undefined;
 ---
 
-<div class={layoutStyle.postLayout}>
-    <div class={layoutStyle.container}>
+<div class="stalux-post-page">
+    <div class="stalux-post-layout">
         <!-- Left Sidebar -->
         <PostLeft author={author} authorAvatar={props.authorAvatar} />
 

package/src/layouts/Stalux.astro

@@ -2,7 +2,6 @@
 import { getCollection } from "astro:content";
 import Footer from "@components/stalux/layout/footer.astro";
 import Head from "@components/stalux/layout/head.astro";
-import "@styles/shared/view-transitions.css";
 import { getAccentColorStyle } from "@utils/accent-color";
 import {
     getAiDiscoveryData,
@@ -106,19 +105,3 @@ const routeAnimation = getRouteAnimation(routeKind);
         <Footer />
     </body>
 </html>
-
-<style></style>
-
-<style>
-.stalux-ai-prompt {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: pre-wrap;
-    border: 0;
-}
-</style>

package/src/pages/404.astro

@@ -16,8 +16,8 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 >
     <div style="height: 3em;"></div>
     <Navs />
-    <div class="error-container" data-pagefind-ignore>
-        <div class="error-content">
+    <div class="stalux-404-error-container" data-pagefind-ignore>
+        <div class="stalux-404-error-content">
             <h1>404</h1>
             <p>{t("page404.pageNotFound")}</p>
             <p class="agent-recovery">
@@ -29,87 +29,16 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
             </p>
             <p
                 id="countdown"
-                class="countdown-text"
+                class="stalux-404-countdown-text"
                 data-countdown-template={t("page404.countdown", { n: "{n}" })}
             >
                 {t("page404.countdown", { n: 5 })}
             </p>
-            <a href="/" class="home-btn" data-astro-prefetch>{t("page404.backHome")}</a>
+            <a href="/" class="stalux-404-home-btn home-btn" data-astro-prefetch
+                >{t("page404.backHome")}</a
+            >
         </div>
     </div>
 
     <script src="../scripts/countdown.ts"></script>
 </Stalux>
-
-<style>
-.error-container {
-    text-align: center;
-    padding: 2rem;
-    min-height: 60vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.error-content h1 {
-    font-size: 6rem;
-    font-weight: bold;
-    margin: 0;
-    color: var(--white-90p);
-}
-
-.error-content p {
-    font-size: 1.5rem;
-    margin: 1rem 0 2rem 0;
-    color: var(--white-70p);
-}
-
-.countdown-text {
-    font-size: 0.95rem !important;
-    color: var(--white-50p) !important;
-    margin: -0.5rem 0 1.5rem 0 !important;
-}
-
-.agent-recovery {
-    max-width: 42rem;
-    margin: 0 auto 1.5rem !important;
-    font-size: 1rem !important;
-    line-height: 1.7;
-}
-
-.agent-recovery a {
-    color: inherit;
-    text-decoration: underline;
-}
-
-.home-btn {
-    display: inline-block;
-    padding: var(--space-md) var(--space-lg);
-    background: var(--black-20p);
-    color: var(--white-90p);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    border: var(--border-thin) solid var(--white-20p);
-    transition:
-        background-color var(--transition-normal),
-        transform var(--transition-normal),
-        box-shadow var(--transition-normal);
-    font-size: var(--font-size-base);
-}
-
-.home-btn:hover {
-    background: var(--accent-20p);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px var(--shadow-dark);
-}
-
-@media (max-width: 768px) {
-    .error-content h1 {
-        font-size: 4rem;
-    }
-
-    .error-content p {
-        font-size: 1.2rem;
-    }
-}
-</style>

package/src/pages/archives.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import ArchivesList from "@components/stalux/archives/archivesList.astro";
 import Navs from "@components/stalux/layout/navs.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/archives.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -19,8 +19,8 @@ const posts = await getCollection("posts", ({ data }) => !data.draft);
 >
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.h1}>{t("archives.heading")}</h1>
-    <div class={styles.description}>
+    <h1 class="stalux-page-title">{t("archives.heading")}</h1>
+    <div class="stalux-page-description">
         {t("archives.desc", { n: posts.length })}
     </div>
     <ArchivesList posts={posts} />

package/src/pages/categories/index.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import CategoriesList from "@components/stalux/categories/categoriesList.astro";
 import Navs from "@components/stalux/layout/navs.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/categories.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -18,7 +18,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 >
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.title}>{t("categories.heading")}</h1>
-    <div class={styles.description}>{t("categories.browseByTopic")}</div>
+    <h1 class="stalux-page-title">{t("categories.heading")}</h1>
+    <div class="stalux-page-description">{t("categories.browseByTopic")}</div>
     <CategoriesList />
 </Stalux>

package/src/pages/index.astro

@@ -15,16 +15,16 @@ import TextType from "@components/stalux/common/textType.astro";
 import Navs from "@components/stalux/layout/navs.astro";
 import SocialMedia from "@components/stalux/links/socialMedia.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/home.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 ---
 
 <Stalux title={siteTitle} description={siteDescription}>
-    <div class={styles.homeBody}>
-        <div class={styles.homeNavs}>
+    <div class="stalux-home-body">
+        <div class="stalux-home-navs">
             <Navs />
         </div>
-        <h1 class={styles.homeTitle}>{siteTitle}</h1>
+        <h1 class="stalux-home-title">{siteTitle}</h1>
         <h2
             class="sr-only"
             style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
@@ -54,17 +54,3 @@ import { getSiteData } from "@utils/config-utils";
         <ToArchive />
     </div>
 </Stalux>
-
-<style>
-.agent-home-summary {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: normal;
-    border: 0;
-}
-</style>

package/src/pages/tags/index.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import Navs from "@components/stalux/layout/navs.astro";
 import TagsCloud from "@components/stalux/tags/tagsCloud.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/tags.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -18,7 +18,7 @@ const { t } = createTranslator(siteConfig.lang || "zh-CN");
 >
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.title}>{t("tags.heading")}</h1>
-    <div class={styles.description}>{t("tags.explore")}</div>
+    <h1 class="stalux-page-title">{t("tags.heading")}</h1>
+    <div class="stalux-page-description">{t("tags.explore")}</div>
     <TagsCloud />
 </Stalux>

package/src/pages/words.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import Navs from "@components/stalux/layout/navs.astro";
 import WordList from "@components/stalux/words/wordList.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/words.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -16,8 +16,8 @@ const entries = await getCollection("words", ({ data }) => !data.draft);
 <Stalux title={`${t("words.title")} | ${siteConfig.title}`} description={t("words.description")}>
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.title}>{t("words.heading")}</h1>
-    <div class={styles.description}>
+    <h1 class="stalux-page-title">{t("words.heading")}</h1>
+    <div class="stalux-page-description">
         {t("words.desc", { n: entries.length })}
     </div>
     <WordList entries={entries} timezone={siteConfig.timezone} />

package/src/scripts/analytics-runtime.ts

@@ -1,5 +1,5 @@
 /**
- * Keep third-party code in Partytown. This small main-thread bridge owns the
+ * Keep analytics trackers in Partytown. This small main-thread bridge owns the
  * Astro navigation lifecycle and tells the worker about each completed page.
  */
 declare global {
@@ -116,12 +116,15 @@ function trackUmamiPage(): void {
 }
 
 function trackVercountPage(): void {
-    // Vercount captures its display elements at startup. A new Astro body needs
-    // a new worker execution so the counters refer to the incoming DOM.
+    // Visible counters need the current window's URL, cookie and DOM nodes.
+    // Avoid worker startup and synchronous DOM bridges; bind fresh nodes once
+    // per completed Astro navigation using the small upstream async script.
     document.querySelector("script[data-stalux-vercount]")?.remove();
-    appendWorkerScript("https://events.vercount.one/js", {
-        "data-stalux-vercount": "true",
-    });
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = "https://events.vercount.one/js";
+    script.dataset.staluxVercount = "true";
+    document.head.appendChild(script);
 }
 
 if (!state.installed) {

package/src/scripts/waline-client.ts

@@ -1,6 +1,6 @@
 import { init, type WalineInitOptions } from "@waline/client";
 import walineCss from "@waline/client/style?inline";
-import staluxWalineCss from "../styles/components/posts/waline.css?inline";
+import staluxWalineCss from "../styles/generated-waline.css?inline";
 
 export function mountWaline(config: Record<string, unknown>, element: HTMLElement): () => void {
     const style = document.createElement("style");

package/src/styles/archives.css

@@ -0,0 +1,2 @@
+@layer theme, base, components, utilities;
+@import "./theme/archives.css";

package/src/styles/article.css

@@ -0,0 +1,2 @@
+@layer theme, base, components, utilities;
+@import "./theme/article.css";

package/src/styles/categories.css

@@ -0,0 +1,2 @@
+@layer theme, base, components, utilities;
+@import "./theme/categories.css";