fix: adjust css file loading (#7)

* fix: adjust css file paths

* fix: load all the things

* chore: delete styles.css

* fix: load styles one time only

* chore: bundle styles during build

* chore: remove panel css from configs, load in bundle

Author: rise-erpelding

build.js

@@ -39,7 +39,7 @@ function createDirectories() {
 }
 
 // Copy common files
-function copyCommonFiles() {
+function copyCommonFiles(bundlePath) {
   commonFiles.forEach(file => {
     const source = file;
     const chromeDest = path.join(chromeDir, file);
@@ -55,6 +55,22 @@ function copyCommonFiles() {
       fs.copyFileSync(source, firefoxDest);
     }
   });
+
+  // Copy the bundled CSS to the extension's src/styles directory
+  if (bundlePath && fs.existsSync(bundlePath)) {
+    const chromeStylesDir = path.join(chromeDir, 'src/styles');
+    const firefoxStylesDir = path.join(firefoxDir, 'src/styles');
+
+    if (!fs.existsSync(chromeStylesDir)) {
+      fs.mkdirSync(chromeStylesDir, { recursive: true });
+    }
+    if (!fs.existsSync(firefoxStylesDir)) {
+      fs.mkdirSync(firefoxStylesDir, { recursive: true });
+    }
+
+    fs.copyFileSync(bundlePath, path.join(chromeStylesDir, 'core-bundle.css'));
+    fs.copyFileSync(bundlePath, path.join(firefoxStylesDir, 'core-bundle.css'));
+  }
 }
 
 function copyDirectoryRecursive(src, dest) {
@@ -137,13 +153,55 @@ function createZips() {
   });
 }
 
+// Bundle all CSS files (core + panels)
+function bundleCoreCss() {
+  const srcCssDir = 'src/styles';
+  const buildCssDir = path.join(buildDir, 'css');
+  const files = [
+    'tokens/color.css',
+    'tokens/size.css',
+    'tokens/typography.css',
+    'themes/default.css',
+    'generic/typography.css',
+    'core.css',
+    'welcome.css',
+    'results.css'
+  ];
+
+  // Create build/css directory if it doesn't exist
+  if (!fs.existsSync(buildCssDir)) {
+    fs.mkdirSync(buildCssDir, { recursive: true });
+  }
+
+  let bundledCss = '/* Core CSS Bundle for Carbon Visualizer Extension */\n';
+  bundledCss += '/* This file combines all design system CSS files in the correct dependency order */\n\n';
+
+  files.forEach(file => {
+    const filePath = path.join(srcCssDir, file);
+    try {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      bundledCss += `/* ===== ${file} ===== */\n`;
+      bundledCss += content;
+      bundledCss += '\n\n';
+    } catch (error) {
+      console.error(`⚠️  Warning: Could not read CSS file ${filePath}:`, error.message);
+    }
+  });
+
+  const bundleOutputPath = path.join(buildCssDir, 'core-bundle.css');
+  fs.writeFileSync(bundleOutputPath, bundledCss);
+  console.log(`✅ Bundled core CSS: ${bundleOutputPath}`);
+  return bundleOutputPath;
+}
+
 // Main build function
 async function build() {
   try {
     console.log('🚀 Building Carbon Visualizer extension for Chrome and Firefox...');
-    
+
+    const bundlePath = bundleCoreCss();
     createDirectories();
-    copyCommonFiles();
+    copyCommonFiles(bundlePath);
     copyManifests();
     patchFirefoxManifest();
 

src/core/ExtensionManager.js

@@ -53,19 +53,24 @@ class ExtensionManager {
   }
 
   async loadCoreCSS() {
-    if (document.getElementById('carbon-visualizer-core-css')) return;
+    // Check if core CSS bundle is already loaded
+    if (document.getElementById('carbon-visualizer-core-css-bundle')) {
+      return;
+    }
 
     try {
-      const cssUrl = this.browserAPI.runtime.getURL('src/styles/core.css');
+      // Load the bundled core CSS file
+      const cssUrl = this.browserAPI.runtime.getURL('src/styles/core-bundle.css');
       const response = await fetch(cssUrl);
       const css = await response.text();
 
+      // Create and append the style tag
       const style = document.createElement('style');
-      style.id = 'carbon-visualizer-core-css';
+      style.id = 'carbon-visualizer-core-css-bundle';
       style.textContent = css;
       document.head.appendChild(style);
     } catch (error) {
-      console.error(error);
+      console.error('Failed to load core CSS bundle:', error);
     }
   }
 

src/core/Panel.js

@@ -13,14 +13,12 @@ class Panel {
     const configs = {
       welcome: {
         htmlFile: 'src/panels/welcome/welcome.html',
-        cssFile: 'src/styles/styles.css',
         jsFile: 'src/panels/welcome/welcome.js',
         containerId: 'carbon-visualizer-welcome-panel',
         className: 'cv-panel--welcome'
       },
       results: {
         htmlFile: 'src/panels/results/results.html',
-        cssFile: 'src/panels/results/results.css',
         jsFile: 'src/panels/results/results.js',
         containerId: 'carbon-visualizer-results-panel',
         className: 'cv-panel--results'
@@ -39,31 +37,13 @@ class Panel {
     // Reset visibility state
     this.isVisible = false;
 
-    // Load panel-specific CSS
-    await this.loadPanelCSS();
-
-    // Load and inject HTML
+    // Load and inject HTML (CSS is already bundled and loaded by ExtensionManager)
     await this.loadPanelHTML();
 
     // Load panel-specific JavaScript
     await this.loadPanelJS();
   }
 
-  async loadPanelCSS() {
-    try {
-      const cssUrl = this.browserAPI.runtime.getURL(this.config.cssFile);
-      const response = await fetch(cssUrl);
-      const css = await response.text();
-
-      const style = document.createElement('style');
-      style.id = `carbon-visualizer-${this.type}-css`;
-      style.textContent = css;
-      document.head.appendChild(style);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
   async loadPanelHTML() {
     try {
       const htmlUrl = this.browserAPI.runtime.getURL(this.config.htmlFile);