[bugfix] Plugins(VRCT Subtitles as testing one): Apply styles by importing css file.

src-ui/app/_app_controllers/PluginsController.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import { usePlugins } from "@logics_configs";
+import clsx from "clsx";
 
 if (typeof window !== "undefined") {
     window.React = React;
+    window.clsx = clsx;
 }
 
 export const PluginsController = ({ fetchPluginsHasRunRef }) => {

src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx

@@ -2,7 +2,7 @@ import styles from "./HotkeysEntry.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef, useEffect } from "react";
 import DeleteSvg from "@images/cancel.svg?react";
-import { clsx } from "clsx";
+import clsx from "clsx";
 
 export const HotkeysEntry = (props) => {
     const [isAcceptingInput, setIsAcceptingInput] = useState(false);

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
-import { clsx } from "clsx";
+import clsx from "clsx";
 
 export const Slider = (props) => {
     return (

src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.jsx

@@ -3,7 +3,7 @@ import fanbox_logo from "@images/supporters/fanbox_logo.png";
 import kofi_logo from "@images/supporters/kofi_logo.png";
 import patreon_logo from "@images/supporters/patreon_logo.png";
 import styles from "./SupportUsContainer.module.scss";
-import { clsx } from "clsx";
+import clsx from "clsx";
 
 export const SupportUsContainer = () => {
     return (

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import styles from "./Vr.module.scss";
 import { ui_configs } from "@ui_configs";
 import { Slider } from "../_components/";

src-ui/app/config_page/version_label/VersionLabel.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import styles from "./VersionLabel.module.scss";
 
 import { useSoftwareVersion } from "@logics_configs";

src-ui/app/snackbar_controller/SnackbarController.jsx

@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import clsx from "clsx";
 import Snackbar from "@mui/material/Snackbar";
 import Slide from "@mui/material/Slide";
 

src-ui/common_components/checkbox/Checkbox.jsx

@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import clsx from "clsx";
 import styles from "./Checkbox.module.scss";
 export const Checkbox = ({
     checkboxId,

src-ui/logics/configs/plugins/usePlugins.js

@@ -59,6 +59,7 @@ export const usePlugins = () => {
     const asyncLoadPlugin = async (plugin_folder_relative_path) => {
         const init_path = "plugins/" + plugin_folder_relative_path + "/index.esm.js";
         const plugin_info_path = "plugins/" + plugin_folder_relative_path + "/plugin_info.json";
+        const plugin_css_path = "plugins/" + plugin_folder_relative_path + "/main.css";
         try {
             const plugin_info_json = await readTextFile(plugin_info_path, { dir: BaseDirectory.Resource, recursive: true });
             const plugin_info = JSON.parse(plugin_info_json);
@@ -80,6 +81,8 @@ export const usePlugins = () => {
             if (plugin_module && plugin_module.init) {
                 plugin_module.init(generatePluginContext(plugin_info));
             }
+            await loadPluginCSS(plugin_css_path);
+
         } catch (error) {
             console.error("Failed to load plugin from", plugin_folder_relative_path, error);
         }
@@ -290,3 +293,22 @@ const removeImportStatements = (code) => {
         .filter(line => !line.match(/^import\s+.*['"]react['"]/))
         .join("\n");
 };
+
+// import { readTextFile, BaseDirectory } from "@tauri-apps/api/fs";
+
+const loadPluginCSS = async (plugin_css_path) => {
+    try {
+        // プラグインフォルダのルートにある main.css を読み込む
+        const css_content = await readTextFile(plugin_css_path, { dir: BaseDirectory.Resource });
+        // style タグを作成して head に挿入する
+        const style_tag = document.createElement("style");
+        style_tag.id = `plugin-css-${plugin_css_path.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+        style_tag.textContent = css_content;
+        document.head.appendChild(style_tag);
+        console.log("Plugin CSS loaded for:", plugin_css_path);
+    } catch (error) {
+        console.error("Failed to load plugin CSS from", plugin_css_path, error);
+    }
+};
+
+export { loadPluginCSS };

src-ui/plugins/dev_plugin_subtitles/index.jsx

@@ -1,11 +1,13 @@
 import { initStore, StoreContext } from "./store/store.js";
 import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
-import { SubtitlesController } from "./subtitle_system_container/_controllers/subtitlesController.jsx";
+import { SubtitlesController } from "./subtitle_system_container/_controllers/SubtitlesController.jsx";
 
 export const init = (plugin_context) => {
     initStore(plugin_context.createAtomWithHook);
     const { logic_configs } = plugin_context;
 
+    loadPluginCSS("./main.css");
+
     const EntryComponents = () => {
         return (
             <StoreContext.Provider value={logic_configs}>
@@ -19,4 +21,17 @@ export const init = (plugin_context) => {
     plugin_context.registerComponent(EntryComponents);
 };
 
-export default init;
+export default init;
+
+
+// CSS を動的に読み込む関数
+const loadPluginCSS = (cssUrl) => {
+    if (typeof document === "undefined") return;
+    // すでに読み込まれているかチェック
+    if (document.getElementById("plugin-main-css")) return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = cssUrl;
+    link.id = "plugin-main-css";
+    document.head.appendChild(link);
+};

src-ui/plugins/dev_plugin_subtitles/plugin_info.json

@@ -3,7 +3,7 @@
     "plugin_id": "vrct_plugin_subtitles",
     "asset_name": "vrct_plugin_subtitles.zip",
     "location": "main_section",
-    "plugin_version": "0.0.1",
+    "plugin_version": "0.0.0",
     "min_supported_vrct_version": "3.0.4",
     "max_supported_vrct_version": "3.0.6"
 }

src-ui/plugins/dev_plugin_subtitles/subtitle_system_container/play_control_container/PlayControlContainer.jsx

@@ -1,7 +1,7 @@
 // import React, { useState, useRef, useEffect } from "react";
 import styles from "./PlayControlContainer.module.scss";
 import { useSubtitles } from "../_logics/useSubtitles";
-import { clsx } from "clsx";
+import clsx from "clsx";
 
 export const PlayControlContainer = () => {
     const {

src-ui/plugins/index.js

@@ -1,5 +1,5 @@
-import plugin_index_1 from "./plugin_examples/index.jsx";
+import plugin_index_1 from "./dev_plugin_subtitles/index.jsx";
-import plugin_info_1 from "./plugin_examples/plugin_info.json";
+import plugin_info_1 from "./dev_plugin_subtitles/plugin_info.json";
 
 export const dev_plugins = [
     {