diff --git a/.changeset/small-carpets-count.md b/.changeset/small-carpets-count.md
new file mode 100644
index 00000000..044793cc
--- /dev/null
+++ b/.changeset/small-carpets-count.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/moss": minor
+---
+
+move some css class helpers
diff --git a/src/lib/css_class_helpers.ts b/src/lib/css_class_helpers.ts
index 9fbf868a..883b949b 100644
--- a/src/lib/css_class_helpers.ts
+++ b/src/lib/css_class_helpers.ts
@@ -142,3 +142,36 @@ export class Css_Classes {
 		this.#all_sorted = null;
 	}
 }
+
+export type Css_Class_Declaration = Css_Class_Declaration_Item | Css_Class_Declaration_Group;
+
+export interface Css_Class_Declaration_Item {
+	declaration: string;
+}
+export interface Css_Class_Declaration_Group {
+	ruleset: string;
+}
+
+export const generate_classes_css = (
+	classes: Iterable<string>,
+	css_classes_by_name: Record<string, Css_Class_Declaration | undefined>,
+): string => {
+	let css = '';
+	for (const c of classes) {
+		const v = css_classes_by_name[c];
+		if (!v) {
+			// diagnostic
+			// if (!/^[a-z_0-9]+$/.test(c)) {
+			// 	console.error('invalid class detected, fix the regexps', c);
+			// }
+			continue;
+		}
+		if ('declaration' in v) {
+			css += `.${c} { ${v.declaration} }\n`;
+		} else {
+			css += v.ruleset + '\n';
+		}
+	}
+
+	return css;
+};
diff --git a/src/lib/css_classes.ts b/src/lib/css_classes.ts
index bd4e2b37..96faf0ff 100644
--- a/src/lib/css_classes.ts
+++ b/src/lib/css_classes.ts
@@ -1,13 +1,7 @@
-export type Css_Class_Declaration = Css_Class_Declaration_Item | Css_Class_Declaration_Group;
-
-export interface Css_Class_Declaration_Item {
-	declaration: string;
-}
-export interface Css_Class_Declaration_Group {
-	ruleset: string;
-}
+import type {Css_Class_Declaration} from './css_class_helpers.js';
 
 // TODO add animation support, either as a separate thing or rename `css_classes_by_name` to be more generic, like `css_by_name` - need to collect `animation: foo ...` names like we do classes
+
 // TODO think about variable support (much harder problem, need dependency graph)
 export const css_classes_by_name: Record<string, Css_Class_Declaration | undefined> = {
 	relative: {declaration: 'position: relative;'},
diff --git a/src/routes/package.ts b/src/routes/package.ts
index c6fbebc4..1a795727 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -93,17 +93,16 @@ export const src_json = {
 				{name: 'Css_Extractor', kind: 'type'},
 				{name: 'collect_css_classes', kind: 'function'},
 				{name: 'Css_Classes', kind: 'class'},
-			],
-		},
-		'./css_classes.js': {
-			path: 'css_classes.ts',
-			declarations: [
 				{name: 'Css_Class_Declaration', kind: 'type'},
 				{name: 'Css_Class_Declaration_Item', kind: 'type'},
 				{name: 'Css_Class_Declaration_Group', kind: 'type'},
-				{name: 'css_classes_by_name', kind: 'variable'},
+				{name: 'generate_classes_css', kind: 'function'},
 			],
 		},
+		'./css_classes.js': {
+			path: 'css_classes.ts',
+			declarations: [{name: 'css_classes_by_name', kind: 'variable'}],
+		},
 		'./style.css': {path: 'style.css', declarations: []},
 		'./theme.css': {path: 'theme.css', declarations: []},
 		'./theme.gen.css.js': {