feat: add option to include styles in CSS export and update settings UI

src/compiler.ts

@@ -5,10 +5,11 @@ import {
 	type PluginManifest,
 	type TAbstractFile,
 } from "obsidian";
-import type {
-	Prefix,
-	SimpleColoredFolderSettings,
-	StyleSettingValue,
+import {
+	type Prefix,
+	type SimpleColoredFolderSettings,
+	STYLE_SPLIT,
+	type StyleSettingValue,
 } from "./interfaces";
 import type SimpleColoredFolder from "./main";
 import { convertStyleSettings, convertToCSS, generateName, themes } from "./template";
@@ -94,13 +95,28 @@ export class ColorCompiler {
 	}
 
 	async injectToSnippets(content: string) {
-		const obsidianDir = normalizePath(`${this.app.vault.configDir}/snippets`);
-		if (!(await this.app.vault.adapter.exists(obsidianDir))) {
+		const snippetsDir = normalizePath(`${this.app.vault.configDir}/snippets`);
+		if (!(await this.app.vault.adapter.exists(snippetsDir))) {
 			//create
 			console.log("Creating snippets directory");
-			await this.app.vault.adapter.mkdir(obsidianDir);
+			await this.app.vault.adapter.mkdir(snippetsDir);
+		}
+		let rules = `/* This file is generated by Simple Colored Folder. Do not edit it manually */\n${content}`;
+		if (this.settings.includeStyleInExport) {
+			//get the styles.css file
+			const pluginDir = normalizePath(
+				`${this.app.vault.configDir}/plugins/${this.manifest.id}`
+			);
+			const stylesPath = normalizePath(`${pluginDir}/styles.css`);
+			if (await this.app.vault.adapter.exists(stylesPath)) {
+				const styles = (await this.app.vault.adapter.read(stylesPath))
+					.split(STYLE_SPLIT)
+					.filter((x) => x.length > 0)[0];
+				rules += `\n\n/* ---- */\n${styles}`;
+			} else {
+				await this.app.vault.adapter.write(this.snippetPath, rules);
+			}
 		}
-		const rules = `/* This file is generated by Simple Colored Folder. Do not edit it manually */\n${content}`;
 		await this.app.vault.adapter.write(this.snippetPath, rules);
 		//enable the snippet
 		this.app.customCss.setCssEnabledStatus("generated.colored-folder", true);

src/interfaces.ts

@@ -11,6 +11,11 @@ export interface SimpleColoredFolderSettings {
 	customStyleSettings: string;
 	exportToCSS: boolean;
 	defaultColors: Colors;
+	/**
+	 * Allow to includes some other style in the export to CSS file
+	 * See the first part of the style.css file for more information.
+	 */
+	includeStyleInExport: boolean;
 }
 
 export type ThemedColors = {
@@ -42,6 +47,9 @@ export const DEFAULT_SETTINGS: SimpleColoredFolderSettings = {
 	customStyleSettings: "",
 	exportToCSS: false,
 	defaultColors: DEFAULT_COLORS,
+	includeStyleInExport: false,
 };
 
 export type StyleSettingValue = number | string | boolean;
+
+export const STYLE_SPLIT = "/** ---- **/";

src/settings.ts

@@ -31,8 +31,22 @@ export class SimpleColoredFolderSettingTab extends PluginSettingTab {
 					this.settings.exportToCSS = value;
 					await this.plugin.saveSettings();
 					await this.compiler.injectStyles();
+					this.display();
 				})
 			);
+		if (this.settings.exportToCSS) {
+			new Setting(containerEl)
+				.setName(i18next.t("settings.export.title"))
+				.setDesc(i18next.t("settings.export.desc"))
+				.setClass("no-border")
+				.addToggle((cb) =>
+					cb.setValue(this.settings.includeStyleInExport).onChange(async (value) => {
+						this.settings.includeStyleInExport = value;
+						await this.plugin.saveSettings();
+						await this.compiler.injectStyles();
+					})
+				);
+		}
 		this.containerEl.createEl("hr");
 		new Setting(containerEl).setName("Default color").setClass("no-border").setHeading();
 

src/styles.css

@@ -1,3 +1,4 @@
+/** ---- **/
 :root {
 	--FolderRadius: 5px;
 	--space-between: 1px;
@@ -46,8 +47,6 @@ body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
 	margin-bottom: 0;
 }
 
-/*& Set up explorer container margins */
-
 .nav-files-container {
 	margin: 0 5px;
 }
@@ -81,7 +80,8 @@ body:not(.is-grabbing) .nav-folder-title:hover {
 	margin-bottom: var(--space-between) !important;
 }
 
-/** ---- Settings ---- **/
+/** ---- **/
+/* ---- Settings ---- */
 
 .spf textarea {
 	width: 100%;
@@ -109,14 +109,14 @@ body:not(.is-grabbing) .nav-folder-title:hover {
 	--hr-thickness: 1px;
 }
 
-/* Aligne le composant avec les autres settings */
+/* Settings alignments */
 .spf .picker-settings-component .setting-item-control {
 	display: flex;
 	gap: 16px;
 	align-items: center;
 }
 
-/* Le wrapper des deux pickers */
+/* Picker wrapper */
 .spf .dual-alpha-picker-controls {
 	display: flex;
 	gap: 4px;
@@ -129,7 +129,7 @@ body:not(.is-grabbing) .nav-folder-title:hover {
 	position: relative;
 }
 
-/* Conteneur individuel d’un picker + bouton reset */
+/* Picker + reset button */
 .spf .alpha-picker-wrapper {
 	display: flex;
 	flex-direction: column;
@@ -148,7 +148,7 @@ body:not(.is-grabbing) .nav-folder-title:hover {
 	background-color: #1e1e1e;
 }
 
-/* Boutons de reset (↺) */
+/* Reset button */
 .spf .alpha-picker-wrapper .clickable-icon {
 	font-size: 14px;
 	opacity: 0.6;