feat(css): make styles layered by default

This commit is contained in:
saberzero1
2026-04-28 17:25:37 +02:00
parent f3a549a68d
commit c8f6e6dc14
2 changed files with 6 additions and 4 deletions

View File

@@ -5,7 +5,8 @@ import { QuartzEmitterPlugin } from "../types"
import spaRouterScript from "../../components/scripts/spa.inline" import spaRouterScript from "../../components/scripts/spa.inline"
// @ts-ignore // @ts-ignore
import popoverScript from "../../components/scripts/popover.inline" import popoverScript from "../../components/scripts/popover.inline"
import styles from "../../styles/custom.scss" import baseStyles from "../../styles/base.scss"
import customStyles from "../../styles/custom.scss"
import popoverStyle from "../../components/styles/popover.scss" import popoverStyle from "../../components/styles/popover.scss"
import { BuildCtx } from "../../util/ctx" import { BuildCtx } from "../../util/ctx"
import { QuartzComponent } from "../../components/types" import { QuartzComponent } from "../../components/types"
@@ -329,12 +330,13 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
// that everyone else had the chance to register a listener for it // that everyone else had the chance to register a listener for it
addGlobalPageResources(ctx, componentResources) addGlobalPageResources(ctx, componentResources)
const stylesheet = joinStyles( const quartzBase = joinStyles(
ctx.cfg.configuration.theme, ctx.cfg.configuration.theme,
googleFontsStyleSheet, googleFontsStyleSheet,
...componentResources.css, ...componentResources.css,
styles, baseStyles,
) )
const stylesheet = `@layer quartz-base {\n${quartzBase}\n}\n${customStyles}`
const [prescript, postscript] = await Promise.all([ const [prescript, postscript] = await Promise.all([
joinScripts(componentResources.beforeDOMLoaded), joinScripts(componentResources.beforeDOMLoaded),

View File

@@ -1,3 +1,3 @@
@use "./base.scss"; @use "./variables.scss" as *;
// put your custom CSS here! // put your custom CSS here!