feat: use css cascade layer to control style conveniently

Author: byronogis

docs/package.json

@@ -9,6 +9,9 @@
     "preview": "astro preview",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "browserslist": [
+    "fully supports css-cascade-layers"
+  ],
   "dependencies": {
     "astro": "catalog:build",
     "astro-friday": "workspace:*"

packages/astro-friday/package.json

@@ -40,12 +40,14 @@
   "peerDependencies": {
     "@astrojs/mdx": "catalog:deps",
     "@astrojs/sitemap": "catalog:seo",
+    "@byronogis/postcss-global-data": "catalog:deps",
     "@iconify-json/lucide": "catalog:icons",
     "@vercel/og": "catalog:seo",
     "astro": "catalog:build",
     "astro-seo": "catalog:seo",
     "dayjs": "catalog:deps",
     "pixi.js": "catalog:frontend",
+    "postcss-preset-env": "catalog:deps",
     "rehype-parse": "catalog:unified",
     "rehype-remark": "catalog:unified",
     "remark-gfm": "catalog:unified",

packages/astro-friday/src/config.ts

@@ -15,8 +15,11 @@ import type { ArtConfig, NavItem, ProjectItem } from './types'
 import type { CollectionEntry } from './types/content'
 import type { Appearance } from './utils/appearance'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defu } from 'defu'
 
+const _dirname = path.dirname(fileURLToPath(import.meta.url))
+
 type GlobOptions = Parameters<typeof glob>[0]
 
 export function getDefaultConfig(userConfig: Config, astroConfig: AstroConfig): Config {
@@ -127,6 +130,21 @@ export function getDefaultConfig(userConfig: Config, astroConfig: AstroConfig):
     viewTransition: {
       enable: true,
     },
+    postcss: {
+      postcssGlobalData: {
+        files: [
+          {
+            file: path.resolve(_dirname, './styles/global-data.css'),
+            remove: false,
+            position: 'prepend',
+          },
+        ],
+      },
+      postcssPresetEnv: {
+        stage: 2,
+        minimumVendorImplementations: 2,
+      },
+    },
     integrations: {
       nprogress: {
         showSpinner: false,
@@ -482,6 +500,13 @@ export interface Config {
      */
     enable?: boolean
   }
+  /**
+   * Built-in PostCSS plugins configuration options
+   */
+  postcss?: {
+    postcssGlobalData?: import('@byronogis/postcss-global-data').pluginOptions
+    postcssPresetEnv?: import('postcss-preset-env').pluginOptions
+  }
   /**
    * Integrations configuration, you can configure or disable built-in integrations here.
    */
@@ -572,6 +597,9 @@ export type ResolvedConfig = SetRequiredDeep<
   | 'components.NavbarBrand'
   | 'viewTransition'
   | 'viewTransition.enable'
+  | 'postcss'
+  | 'postcss.postcssGlobalData'
+  | 'postcss.postcssPresetEnv'
   | 'integrations'
   | 'integrations.nprogress'
   | 'integrations.sitemap'

packages/astro-friday/src/integration.ts

@@ -5,6 +5,8 @@ import type { AstroIntegration, InjectedRoute } from 'astro'
 import type { Config } from './config'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import postcssGlobalData from '@byronogis/postcss-global-data'
+import postcssPresetEnv from 'postcss-preset-env'
 import Inspect from 'vite-plugin-inspect'
 import { resolveConfig } from './config'
 import { mdx } from './integrations/mdx'
@@ -57,6 +59,14 @@ export function integration(userConfig: Config = {}): AstroIntegration {
               vitePluginAstroFridayComponents(resolvedConfig),
               Inspect(),
             ],
+            css: {
+              postcss: {
+                plugins: [
+                  postcssGlobalData(resolvedConfig.postcss.postcssGlobalData),
+                  postcssPresetEnv(resolvedConfig.postcss.postcssPresetEnv),
+                ],
+              },
+            },
           },
         })
 

packages/astro-friday/src/integrations/unocss/uno.config.ts

@@ -13,6 +13,13 @@ import {
 import { presetScrollbar } from 'unocss-preset-scrollbar'
 
 export default defineConfig({
+  outputToCssLayers: {
+    cssLayerName(layer) {
+      return layer === 'default'
+        ? 'uno-default'
+        : `uno`
+    },
+  },
   shortcuts: [
     {
       'hoverable-text': 'opacity-60 hover:opacity-100 transition-(opacity 200 ease)',

packages/astro-friday/src/layouts/Basic.astro

@@ -5,7 +5,7 @@ import config from 'virtual:astro-friday-config'
 import Art from '../components/Art/Art.astro'
 import HeadContent from '../components/HeadContent.astro'
 import 'virtual:astro-friday-unocss-extract'
-import '../styles/main.css'
+import '../styles/index.css'
 
 interface Props {
   seo?: import('astro-seo').Props

packages/astro-friday/src/styles/global-data.css

@@ -0,0 +1 @@
+@layer uno, astro, astro-friday, uno-default;

packages/astro-friday/src/styles/index.css

@@ -0,0 +1 @@
+@import "./main.css" layer(astro-friday);

pnpm-workspace.yaml

@@ -7,12 +7,14 @@ catalogs:
     astro: ^5.14.8
   deps:
     '@astrojs/mdx': ^4.3.7
+    '@byronogis/postcss-global-data': ^1.0.1
     astro-color-scheme: ^1.1.5
     astro-integration-kit: ^0.19.1
     c12: ^3.3.1
     dayjs: ^1.11.18
     defu: ^6.1.4
     jiti: ^2.6.1
+    postcss-preset-env: ^10.4.0
     type-fest: ^5.1.0
     typescript: ^5.9.3
     unocss: ^66.5.4