integrading new css build

package.json

@@ -17,8 +17,6 @@
     "@types/node": "^20.13.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "sass": "^1.77.4",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
     "vite": "^5.2.12",
     "vite-tsconfig-paths": "^4.3.2"
   },

tools/parse.ts

@@ -1,43 +1,72 @@
-import * as fs from 'fs';
+import * as fs from "fs";
-import * as path from 'path';
+import * as path from "path";
-const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
+const appConfig = JSON.parse(fs.readFileSync("./app.config.json", "utf8"));
 const DEPLOY_TARGET = "./dist/";
 
+function findCssFileNames(source: string): string[] {
+	let files: string[] = [];
+	const dir = fs.readdirSync(source);
+	dir.forEach(function (file: string) {
+		const sourceFile = path.join(source, file);
+		const stat = fs.lstatSync(sourceFile);
+		if (stat.isDirectory()) {
+			files = files.concat(findCssFileNames(sourceFile));
+		} else {
+			if (path.extname(sourceFile) == ".css") {
+				files.push(file);
+			}
+		}
+	});
+	return files;
+}
+
 function findHtmlFilesRecursive(source: string): string[] {
-  let files: string[] = [];
+	let files: string[] = [];
-  const dir = fs.readdirSync(source);
+	const dir = fs.readdirSync(source);
-  dir.forEach(function (file: string) {
+	dir.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
+		const sourceFile = path.join(source, file);
-    const stat = fs.lstatSync(sourceFile);
+		const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
+		if (stat.isDirectory()) {
-      files = files.concat(findHtmlFilesRecursive(sourceFile));
+			files = files.concat(findHtmlFilesRecursive(sourceFile));
-    } else {
+		} else {
-      if (path.extname(sourceFile) == '.html') {
+			if (path.extname(sourceFile) == ".html") {
-        files.push(sourceFile);
+				files.push(sourceFile);
-      }
+			}
-    }
+		}
-  });
+	});
-  return files;
+	return files;
 }
 
 function replaceKeywordsInHtmlFile(file: string) {
-  let content = fs.readFileSync(file, 'utf8');
+	let content = fs.readFileSync(file, "utf8");
-  const pairs: { key: string, value: string }[] = appConfig.htmlTemplatePairs;
+	const pairs: { key: string; value: string }[] = appConfig.htmlTemplatePairs;
-  pairs.forEach(function (pair: { key: string, value: string }) {
+	pairs.forEach(function (pair: { key: string; value: string }) {
-    //@ts-ignore
+		//@ts-ignore
-    content = content.replaceAll(pair.key, pair.value);
+		content = content.replaceAll(pair.key, pair.value);
-  });
+	});
-  file = file.replace("public\\", DEPLOY_TARGET);
+	file = file.replace("public\\", DEPLOY_TARGET);
-  fs.writeFileSync(file, content);
+	fs.writeFileSync(file, content);
 }
 
 function buildHtmlFiles(source: string) {
-  const files = findHtmlFilesRecursive(source);
+	const files = findHtmlFilesRecursive(source);
-  files.forEach(function (file: string) {
+	files.forEach(function (file: string) {
-    replaceKeywordsInHtmlFile(file);
+		replaceKeywordsInHtmlFile(file);
-  });
+	});
 }
 
+findCssFileNames(DEPLOY_TARGET).forEach((file: string) => {
+	const files = findHtmlFilesRecursive(DEPLOY_TARGET);
+	files.forEach(function (htmlFile: string) {
+		let content = fs.readFileSync(htmlFile, "utf8");
+		content = content.replace(
+			"</head>",
+			`<link rel="stylesheet" href="./assets/${file}">\n</head>`
+		);
+		fs.writeFileSync(htmlFile, content);
+	});
+});
+
 buildHtmlFiles(DEPLOY_TARGET);
 
 console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));

tsconfig.json

@@ -6,7 +6,7 @@
         // "incremental": true,                         /* Enable incremental compilation */
         "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
         "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-        "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
+        "lib": ["ESNext", "DOM"],                                   /* Specify library files to be included in the compilation. */
         // "allowJs": true,                             /* Allow javascript files to be compiled. */
         // "checkJs": true,                             /* Report errors in .js files. */
         // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */

vite.config.js

@@ -1,43 +0,0 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  build: {
-    rollupOptions: {
-      input: {
-        app: resolve(__dirname, 'src/app.ts'),
-        settings: resolve(__dirname, 'src/settings.ts'),
-        background: resolve(__dirname, 'src/background.ts'),
-      },
-      output: {
-        entryFileNames: '[name].js',
-        dir: resolve(__dirname, 'dist'),
-      },
-    },
-    sourcemap: true,
-  },
-  plugins: [
-    tsconfigPaths(),
-  ],
-  resolve: {
-    extensions: ['.tsx', '.ts', '.scss', '.sass'],
-  },
-  css: {
-    preprocessorOptions: {
-      sass: {
-        additionalData: `@import "@/src/sass/app.sass"`, // optional
-      },
-    },
-  },
-  esbuild: {
-    include: /.*\.tsx?$/,
-    exclude: [
-      /node_modules/,
-      /dist/,
-    //   /src\/background\.ts/,
-    //   /src\/settings\.ts/,
-    //   /src\/app\.ts/,
-    ],
-  },
-});

vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: {
+				app: resolve(__dirname, "src/app.ts"),
+				settings: resolve(__dirname, "src/settings.ts"),
+				background: resolve(__dirname, "src/background.ts"),
+			},
+			output: {
+				entryFileNames: "[name].js",
+				dir: resolve(__dirname, "dist"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts", ".scss", ".sass"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [/node_modules/, /dist/],
+	},
+});