improvement(platform): simplify the CSS audit and the notice bridge

Author: waleedlatif1

apps/sim/platform/app/(shell)/_components/notification-tray/notification-tray.tsx

@@ -3,8 +3,6 @@ import type { ShellNotice } from '@/platform/app/(shell)/_components/model'
 
 type Notice = Omit<ShellNotice, 'href'> & { onAction?: () => void }
 
-const ERROR_ICON = 'I047'
-
 /** The notices a toast is showing, so re-raising or dismissing a notice id reaches its toast. */
 const toastIdByNotice = new Map<string, string>()
 
@@ -13,12 +11,11 @@ function dismiss(id: string) {
   if (toastId) toast.dismiss(toastId)
 }
 
-function notify({ id, title, description, icon, action, onAction }: Notice) {
+function notify({ id, title, description, action, onAction }: Notice) {
   dismiss(id)
   const toastId = toast({
     message: title,
     description,
-    variant: icon === ERROR_ICON ? 'error' : 'default',
     action: action && onAction ? { label: action, onClick: onAction } : undefined,
     onDismiss: () => {
       if (toastIdByNotice.get(id) === toastId) toastIdByNotice.delete(id)

scripts/check-platform-css.test.ts

@@ -13,15 +13,15 @@ const scoped = async (css: string, from = ENTRY) =>
 
 describe('findEntryEscapes', () => {
   it.each([
-    [':root { --spacing: 1px; }'],
-    ['html { color: red; }'],
-    ['[data-platform-ui] html { color: red; }'],
-    ['.flex { display: flex; }'],
-    ['[data-material="shell"] { color: red; }'],
-    ['@layer utilities { [data-platform-ui] .flex { display: flex; } }'],
-    ['@property --tw-shadow { syntax: "*"; inherits: false; }'],
-    ['@keyframes spin { to { rotate: 1turn; } }'],
-    ['@media (width > 1px) { .flex { display: flex; } }'],
+    ':root { --spacing: 1px; }',
+    'html { color: red; }',
+    '[data-platform-ui] html { color: red; }',
+    '.flex { display: flex; }',
+    '[data-material="shell"] { color: red; }',
+    '@layer utilities { [data-platform-ui] .flex { display: flex; } }',
+    '@property --tw-shadow { syntax: "*"; inherits: false; }',
+    '@keyframes spin { to { rotate: 1turn; } }',
+    '@media (width > 1px) { .flex { display: flex; } }',
   ])('flags %s', (css) => {
     expect(findEntryEscapes(css, '')).not.toEqual([])
   })
@@ -50,13 +50,13 @@ describe('findEntryEscapes', () => {
 
 describe('findModuleEscapes', () => {
   it.each([
-    ['button { color: red; }'],
-    ['[data-platform-ui] { color: red; }'],
-    [':global(.flex) { display: flex; }'],
-    ['.local, body { color: red; }'],
-    ['@layer base { .local { color: red; } }'],
-    ['@font-face { font-family: "X"; }'],
-    ['@property --x { syntax: "*"; inherits: false; }'],
+    'button { color: red; }',
+    '[data-platform-ui] { color: red; }',
+    ':global(.flex) { display: flex; }',
+    '.local, body { color: red; }',
+    '@layer base { .local { color: red; } }',
+    '@font-face { font-family: "X"; }',
+    '@property --x { syntax: "*"; inherits: false; }',
   ])('flags %s', (css) => {
     expect(findModuleEscapes(css, 'x.module.css')).not.toEqual([])
   })

scripts/check-platform-css.ts

@@ -33,12 +33,12 @@ const SCOPED = /^(?::where\(html\.dark\) )?(?:\[data-platform-ui\]|:where\(\[dat
 const GLOBAL_TARGET = /(?:^|[\s>+~(,])(?::root|:host|html|body)(?![\w-])/
 const ENTRY_AT_RULES = new Set(['media', 'container', 'supports', 'font-face'])
 const MODULE_AT_RULES = new Set(['media', 'container', 'supports', 'keyframes'])
-const KEYFRAMES = /keyframes$/
 const ORGANIZATION_ROUTES = path.join('app', 'o', '[organizationId]') + path.sep
 const NEXT_ENTRY =
   /^(?:page|layout|template|loading|error|global-error|not-found|default|route)\.[jt]sx?$/
 const ROOT_ENTRIES = ['proxy.ts', 'instrumentation.ts', 'instrumentation-node.ts', 'bootstrap.ts']
-const SOURCE = /\.(?:[jt]sx?|css)$/
+const CODE_FILE = /\.[jt]sx?$/
+const CSS_MODULE = /\.module\.css$/
 const TEST_FILE = /\.(?:test|spec)\.[jt]sx?$|\.integration\.ts$/
 const SKIPPED_FOLDERS = new Set(['node_modules', '.next', 'dist', 'public'])
 const RESOLVE_SUFFIXES = ['', '.ts', '.tsx', '.js', '.jsx', '.cjs', '/index.ts', '/index.tsx']
@@ -48,11 +48,6 @@ export interface Finding {
   detail: string
 }
 
-function isInsideKeyframes(node: { parent?: unknown }): boolean {
-  const parent = node.parent as AtRule | undefined
-  return parent?.type === 'atrule' && KEYFRAMES.test(parent.name)
-}
-
 /** Checks compiled entry CSS. `hostGlobals` is the host stylesheet a new font face must not alter. */
 export function findEntryEscapes(css: string, hostGlobals: string): Finding[] {
   const findings: Finding[] = []
@@ -93,8 +88,8 @@ export function findModuleEscapes(css: string, file: string): Finding[] {
     }
   })
   root.walkRules((rule) => {
-    if (isInsideKeyframes(rule)) return
-    if (rule.parent?.type === 'rule') return
+    const { parent } = rule
+    if (parent?.type === 'rule' || (parent as AtRule | undefined)?.name === 'keyframes') return
     for (const selector of rule.selectors) {
       if (selector.includes(':global') || !/\.-?[_a-zA-Z]/.test(selector)) {
         findings.push({ rule: 'module-escape', detail: `${file}: ${selector}` })
@@ -104,12 +99,12 @@ export function findModuleEscapes(css: string, file: string): Finding[] {
   return findings
 }
 
-function walk(directory: string, files: string[] = []): string[] {
-  for (const name of readdirSync(directory)) {
-    if (SKIPPED_FOLDERS.has(name)) continue
-    const full = path.join(directory, name)
-    if (statSync(full).isDirectory()) walk(full, files)
-    else if (SOURCE.test(name) && !TEST_FILE.test(name)) files.push(full)
+function walk(directory: string, pattern: RegExp, files: string[] = []): string[] {
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    if (SKIPPED_FOLDERS.has(entry.name)) continue
+    const full = path.join(directory, entry.name)
+    if (entry.isDirectory()) walk(full, pattern, files)
+    else if (pattern.test(entry.name) && !TEST_FILE.test(entry.name)) files.push(full)
   }
   return files
 }
@@ -123,35 +118,33 @@ function resolveSpecifier(specifier: string, from: string): string | null {
   if (!base) return null
   for (const suffix of RESOLVE_SUFFIXES) {
     const candidate = `${base}${suffix}`
-    try {
-      if (statSync(candidate).isFile()) return candidate
-    } catch {}
+    if (statSync(candidate, { throwIfNoEntry: false })?.isFile()) return candidate
   }
   return null
 }
 
-function readImports(file: string): string[] {
-  if (file.endsWith('.css')) return []
-  return new Bun.Transpiler({ loader: file.endsWith('x') ? 'tsx' : 'ts' })
-    .scan(readFileSync(file, 'utf8'))
-    .imports.flatMap(({ path: specifier }) => resolveSpecifier(specifier, file) ?? [])
-}
-
 /** Walks importers back from `platform/`, so each module is visited once however the graph cycles. */
 function findRouteReach(): Finding[] {
   const insidePlatform = (file: string) => file.startsWith(`${PLATFORM}${path.sep}`)
-  const files = walk(APP).filter((file) => !insidePlatform(file))
+  const files = walk(APP, CODE_FILE).filter((file) => !insidePlatform(file))
+  const tsTranspiler = new Bun.Transpiler({ loader: 'ts' })
+  const tsxTranspiler = new Bun.Transpiler({ loader: 'tsx' })
   const importers = new Map<string, string[]>()
   const queue: string[] = []
   /** Maps a module that reaches `platform/` to its next step on the way there. */
   const nextStep = new Map<string, string>()
   for (const file of files) {
-    for (const target of readImports(file)) {
+    const transpiler = file.endsWith('x') ? tsxTranspiler : tsTranspiler
+    for (const { path: specifier } of transpiler.scan(readFileSync(file, 'utf8')).imports) {
+      const target = resolveSpecifier(specifier, file)
+      if (!target) continue
       if (insidePlatform(target)) {
         if (!nextStep.has(file)) queue.push(file)
         nextStep.set(file, target)
+      } else if (importers.has(target)) {
+        importers.get(target)?.push(file)
       } else {
-        importers.set(target, [...(importers.get(target) ?? []), file])
+        importers.set(target, [file])
       }
     }
   }
@@ -200,7 +193,7 @@ if (import.meta.main) {
   })
   const findings = findEntryEscapes(entryCss, readFileSync(HOST_GLOBALS, 'utf8'))
 
-  const modules = walk(PLATFORM).filter((file) => file.endsWith('.module.css'))
+  const modules = walk(PLATFORM, CSS_MODULE)
   for (const file of modules) {
     findings.push(...findModuleEscapes(await compile(file), path.relative(APP, file)))
   }