layout_css.ts (1111B)
1 import type { ThemeVariable } from "../layout/types.js"; 2 import { 3 collect_layout_variables, 4 select_theme_layout_keys 5 } from "./theme_utils.js"; 6 7 export const build_layout_css = (variables: ThemeVariable[]): string => { 8 const sorted = [...variables].sort((a, b) => { 9 if (a.namespace !== b.namespace) { 10 return a.namespace.localeCompare(b.namespace); 11 } 12 return a.name.localeCompare(b.name); 13 }); 14 15 const lines: string[] = []; 16 lines.push('@import "tailwindcss";'); 17 lines.push(""); 18 lines.push("@theme {"); 19 20 for (const variable of sorted) { 21 const css_var_name = `--${variable.namespace}-${variable.name}`; 22 lines.push(` ${css_var_name}: ${variable.value};`); 23 } 24 25 lines.push("}"); 26 lines.push(""); 27 28 return lines.join("\n"); 29 }; 30 31 export const build_layout_css_from_presets = ( 32 presets: string[] | undefined 33 ): string => { 34 const selected_layout_keys = select_theme_layout_keys(presets); 35 const layout_variables = collect_layout_variables(selected_layout_keys); 36 return build_layout_css(layout_variables); 37 };