src/app/components/nav/styles.css.ts

@@ -1,7 +1,8 @@
 import { ComplexStyleRule, StyleRule, createVar, globalStyle, style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
-import { skyLabelInk, surfaceInk } from '../../features/scene/sceneShell.css';
+import { surfaceInk } from '../../features/scene/sceneShell.css';
+import { skyLabelInk } from '../../features/scene/skyLabelInk';
 
 // Wash strengths over the scene: rows and labels are faint, and hover, selected and pressed rows
 // are three distinct steps above them.

src/app/features/room-nav/styles.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { config } from 'folds';
-import { skyLabelInk, surfaceInk } from '../scene/sceneShell.css';
+import { surfaceInk } from '../scene/sceneShell.css';
+import { skyLabelInk } from '../scene/skyLabelInk';
 
 export const CategoryButton = style({
   flexGrow: 1,

src/app/features/room/RoomTimeline.tsx

@@ -124,7 +124,7 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useSkyInk, useTheme } from '../../hooks/useTheme';
-import { skyLabelInk } from '../scene/sceneShell.css';
+import { skyLabelInk } from '../scene/skyLabelInk';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 

src/app/features/scene/cssModules.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { compile, processVanillaFile } from '@vanilla-extract/integration';
+
+// vitest imports a .css.ts through the vanilla plugin, which is lenient; `vite build` compiles it with
+// vanilla-extract's integration, which refuses a function export. Compile the scene's .css.ts files the build's way.
+const FILES = [
+  'src/app/features/scene/sceneShell.css.ts',
+  'src/app/features/room-nav/styles.css.ts',
+  'src/app/components/nav/styles.css.ts',
+];
+
+describe('scene .css.ts files, compiled as the production build compiles them', () => {
+  it.each(FILES)('%s compiles with exports vanilla-extract accepts', async (file) => {
+    const filePath = `${process.cwd()}/${file}`;
+    const { source } = await compile({ filePath, cwd: process.cwd(), identOption: 'debug' });
+    await expect(processVanillaFile({ source, filePath, identOption: 'debug' })).resolves.toBeTypeOf('string');
+  });
+});

src/app/features/scene/sceneShell.css.ts

@@ -28,10 +28,3 @@ globalStyle(':root[data-scene] #root', {
 const surfaceInkVar = createVar();
 globalStyle(':root[data-scene] body', { vars: { [surfaceInkVar]: color.Surface.Container } });
 export const surfaceInk = fallbackVar(surfaceInkVar, color.Surface.Container);
-
-/**
- * The sky's label ink (skyInk.ts `labelInk`), set on <html> by the theme manager (ThemeManager.tsx) only where it
- * differs from the theme's; unset, `skyLabelInk(fallback)` is the fallback, so a person's own theme keeps its ink.
- */
-export const SKY_LABEL_INK = '--sky-label-ink';
-export const skyLabelInk = (fallback: string) => `var(${SKY_LABEL_INK}, ${fallback})`;

src/app/features/scene/skyLabelInk.ts

@@ -0,0 +1,7 @@
+/**
+ * The sky's label ink (skyInk.ts `labelInk`), set on <html> by the theme manager (ThemeManager.tsx) only where it
+ * differs from the theme's; unset, `skyLabelInk(fallback)` is the fallback, so a person's own theme keeps its ink.
+ * Not in sceneShell.css.ts: vanilla-extract refuses a function exported from a .css.ts file.
+ */
+export const SKY_LABEL_INK = '--sky-label-ink';
+export const skyLabelInk = (fallback: string) => `var(${SKY_LABEL_INK}, ${fallback})`;

src/app/pages/ThemeManager.tsx

@@ -11,7 +11,7 @@ import {
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { labelInk } from '../features/scene/skyInk';
-import { SKY_LABEL_INK } from '../features/scene/sceneShell.css';
+import { SKY_LABEL_INK } from '../features/scene/skyLabelInk';
 
 export function UnAuthRouteThemeManager() {
   // Signed-out pages are Midnight Sky unless the sky state picks otherwise; they ignore the