Update site

packages/eslint-plugin/src/config.ts

@@ -3,6 +3,11 @@ const config = {
         '@master/css/class-order': 'warn',
         '@master/css/class-validation': 'error',
         '@master/css/class-collision': 'warn'
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        }
     }
 } as const
 

packages/react/src/CSSProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import MasterCSS, { Config } from '@master/css'
+import MasterCSS, { Config, initRuntime } from '@master/css'
 import { useEffect, useLayoutEffect, createContext, useContext, useState } from 'react'
 
 export const CSSContext = createContext<MasterCSS | undefined>(undefined)
@@ -20,14 +20,16 @@ export function CSSProvider({
 }) {
     const [css, setCSS] = useState<MasterCSS>();
     (typeof window !== 'undefined' ? useLayoutEffect : useEffect)(() => {
-        let newCSS: MasterCSS
-        if (!css) {
+        let newCSS: MasterCSS = window.masterCSSs?.find((eachCSS) => eachCSS.root === root)
+        if (newCSS) {
+            setCSS(newCSS)
+        } else if (!css) {
             const init = (resolvedConfig?: Config) => {
-                const existingCSS = globalThis.masterCSSs.find((eachCSS) => eachCSS.root === root)
+                const existingCSS = window.masterCSSs.find((eachCSS) => eachCSS.root === root)
                 if (existingCSS) {
                     setCSS(existingCSS)
                 } else {
-                    newCSS = new MasterCSS(resolvedConfig).observe(root)
+                    newCSS = initRuntime(resolvedConfig, root)
                     setCSS(newCSS)
                 }
             }

tsconfig.json

@@ -1,5 +1,4 @@
 {
-    "extends": "../../tsconfig.json",
     "compilerOptions": {
         "experimentalDecorators": true,
         "baseUrl": ".",

website/app/[locale]/(root)/docs/text-align/components/Basic.tsx

@@ -7,7 +7,7 @@ export default ({ className }: any) =>
     <Demo $py={0}>
         <DemoPanel>
             <p className={l('my:0 fg:major', className)}>
-                <span className='bg-stripe-pink box:slice rounded'>
+                <span className='bg-stripe-pink rounded'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.
                 </span>
             </p>

website/app/[locale]/(root)/sponsor/components/Donors.tsx

@@ -1,14 +1,16 @@
+/* eslint-disable @master/css/class-validation */
+
 import { Fragment } from 'react';
 import Link from 'websites/components/Link'
 
 export default function Donors({ sponsorTiers, sponsorsOfLevel }: any) {
     return sponsorTiers.map((eachSponsorTier: any) => (
         <Fragment key={eachSponsorTier.name}>
-            <div className="flex gap:10 align-items:center mt:80 mb:30">
-                <h2 id={eachSponsorTier.name} className="m:0! capitalize">
+            <div className="flex align-items:center gap:10 mb:30 mt:80">
+                <h2 id={eachSponsorTier.name} className="capitalize m:0!">
                     {eachSponsorTier.name}
                 </h2>
-                <hr className="my:0! flex:1|1|auto" />
+                <hr className="flex:1|1|auto my:0!" />
             </div>
             <div className={`grid-cols:${eachSponsorTier.columns} gap:${eachSponsorTier.gap - 20} gap:${eachSponsorTier.gap}@sm align-items:center`}>
                 {sponsorsOfLevel[eachSponsorTier.name] &&
@@ -18,10 +20,10 @@ export default function Donors({ sponsorTiers, sponsorsOfLevel }: any) {
                             key={'sponsor-' + i}
                             alt={'sponsor-' + i}
                             src={eachSponsor.avatarUrl}
-                            className={`object:contain full max-h:${eachSponsorTier.height}`}
+                            className={`max-h: full object:contain${eachSponsorTier.height}`}
                         />
                     ))}
-                <Link className="app-object app-object-interactive flex:col full r:5 aspect:1/1" href="#become-a-sponsor">
+                <Link className="app-object app-object-interactive full aspect:1/1 flex:col r:5" href="#become-a-sponsor">
                     <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" fill="currentColor">
                         <path d="M0 0h24v24H0V0z" fill="none" />
                         <path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" />

website/app/api/generate-page-cache/route.ts

@@ -1,5 +1,5 @@
 import * as cheerio from 'cheerio'
-import app from '../../../../../../shared/firebase-admin-app'
+import app from 'websites/firebase-admin-app'
 import { getStorage } from 'firebase-admin/storage'
 import path from 'path'
 import fs from 'fs'

website/og-image.tsx

@@ -11,13 +11,13 @@ import { queryDictionary } from 'websites/dictionaries';
 import stringWidth from 'string-width'
 import fs from 'fs'
 import path from 'path';
-import mime from 'mime'
+import mime from 'mime-types'
 
 const readImage = (filename: string) => {
-    const sharedFolderPath = path.join(process.cwd(), '../../../shared')
+    const sharedFolderPath = path.join(process.cwd(), '../../../')
     const filepath = path.join(sharedFolderPath, filename.replace('websites/', ''))
     const extname = path.extname(filepath);
-    const mimeType = mime.getType(extname);
+    const mimeType = mime.lookup(extname);
     return `data:${mimeType};base64,` + fs.readFileSync(filepath, { encoding: 'base64' })
 }
 const cssLogotypeSrc = readImage('websites/images/[email protected]')
@@ -45,15 +45,15 @@ const fonts = [
     },
     {
         name: 'NotoSansTC Regular',
-        data: fs.readFileSync(path.resolve('../../../shared/fonts/NotoSansTC-Regular.ttf'))
+        data: fs.readFileSync(path.resolve('../../../fonts/NotoSansTC-Regular.ttf'))
     },
     {
         name: 'NotoSansTC Medium',
-        data: fs.readFileSync(path.resolve('../../../shared/fonts/NotoSansTC-Medium.ttf'))
+        data: fs.readFileSync(path.resolve('../../../fonts/NotoSansTC-Medium.ttf'))
     },
     {
         name: 'NotoSansTC Black',
-        data: fs.readFileSync(path.resolve('../../../shared/fonts/NotoSansTC-Black.ttf'))
+        data: fs.readFileSync(path.resolve('../../../fonts/NotoSansTC-Black.ttf'))
     }
 ]