From c496778f40bb0a8738ed41f9fdc366c3b91b09b3 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 7 Nov 2025 15:48:23 -0600 Subject: [PATCH 1/6] fix: adjust css file paths --- src/core/Panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/Panel.js b/src/core/Panel.js index 466fb20..44ddf82 100644 --- a/src/core/Panel.js +++ b/src/core/Panel.js @@ -13,14 +13,14 @@ class Panel { const configs = { welcome: { htmlFile: 'src/panels/welcome/welcome.html', - cssFile: 'src/styles/styles.css', + cssFile: 'src/styles/welcome.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', + cssFile: 'src/styles/results.css', jsFile: 'src/panels/results/results.js', containerId: 'carbon-visualizer-results-panel', className: 'cv-panel--results' From 5c01feb4534a6edc3deb0f6be097b59a61a6032e Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 11 Nov 2025 13:00:48 -0600 Subject: [PATCH 2/6] fix: load all the things --- src/core/ExtensionManager.js | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/core/ExtensionManager.js b/src/core/ExtensionManager.js index 8d78c35..2a5c50e 100644 --- a/src/core/ExtensionManager.js +++ b/src/core/ExtensionManager.js @@ -53,17 +53,33 @@ class ExtensionManager { } async loadCoreCSS() { - if (document.getElementById('carbon-visualizer-core-css')) return; + if (document.getElementById('carbon-visualizer-core-css-bundle')) return; try { - const cssUrl = this.browserAPI.runtime.getURL('src/styles/core.css'); - const response = await fetch(cssUrl); - const css = await response.text(); - - const style = document.createElement('style'); - style.id = 'carbon-visualizer-core-css'; - style.textContent = css; - document.head.appendChild(style); + const files = [ + 'src/styles/tokens/color.css', + 'src/styles/tokens/size.css', + 'src/styles/tokens/typography.css', + 'src/styles/themes/default.css', + 'src/styles/generic/typography.css', + 'src/styles/core.css' + ]; + + for (const file of files) { + const cssUrl = this.browserAPI.runtime.getURL(file); + const response = await fetch(cssUrl); + const css = await response.text(); + + const style = document.createElement('style'); + style.textContent = css; + document.head.appendChild(style); + } + + // Add a marker to indicate core CSS bundle is loaded + const marker = document.createElement('style'); + marker.id = 'carbon-visualizer-core-css-bundle'; + marker.textContent = '/* Core CSS bundle loaded */'; + document.head.appendChild(marker); } catch (error) { console.error(error); } From 9584dc8a11fe95c1631ade0fea0a77264e19b9cb Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 11 Nov 2025 13:01:02 -0600 Subject: [PATCH 3/6] chore: delete styles.css --- src/styles/styles.css | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 src/styles/styles.css diff --git a/src/styles/styles.css b/src/styles/styles.css deleted file mode 100644 index af33af0..0000000 --- a/src/styles/styles.css +++ /dev/null @@ -1,16 +0,0 @@ -/* - * the chrome-extension://* prefix lets us import from extension files - * it will probably be best to have some sort of build step to output a single - * file so we don't have to deal with browser compatibility issues - */ -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/color.css'); -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/size.css'); -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/typography.css'); - -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/themes/default.css'); - -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/generic/typography.css'); - -/* keep existing styles for now, rework when building components */ -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/core.css'); -@import url('chrome-extension://__MSG_@@extension_id__/src/styles/welcome.css'); From 83b614347f93658ebbfa5edb20cf16fec3cf78d3 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 18 Nov 2025 16:34:31 -0600 Subject: [PATCH 4/6] fix: load styles one time only --- src/core/Panel.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/core/Panel.js b/src/core/Panel.js index 44ddf82..6e7255e 100644 --- a/src/core/Panel.js +++ b/src/core/Panel.js @@ -51,12 +51,18 @@ class Panel { async loadPanelCSS() { try { + // Check if this panel's CSS is already loaded + const styleId = `carbon-visualizer-${this.type}-css`; + if (document.getElementById(styleId)) { + return; // CSS already loaded, skip + } + 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.id = styleId; style.textContent = css; document.head.appendChild(style); } catch (error) { From 1ac1059fcfc594a15f34bf7fad9ca6f41f447053 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 19 Nov 2025 08:25:52 -0600 Subject: [PATCH 5/6] chore: bundle styles during build --- build.js | 62 ++++++++++++++++++++++++++++++++++-- src/core/ExtensionManager.js | 41 +++++++++--------------- 2 files changed, 74 insertions(+), 29 deletions(-) diff --git a/build.js b/build.js index 46e5e84..8841568 100644 --- a/build.js +++ b/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,53 @@ function createZips() { }); } +// Bundle core CSS files +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' + ]; + + // 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(); diff --git a/src/core/ExtensionManager.js b/src/core/ExtensionManager.js index 2a5c50e..ac250dd 100644 --- a/src/core/ExtensionManager.js +++ b/src/core/ExtensionManager.js @@ -53,35 +53,24 @@ class ExtensionManager { } async loadCoreCSS() { - if (document.getElementById('carbon-visualizer-core-css-bundle')) return; + // Check if core CSS bundle is already loaded + if (document.getElementById('carbon-visualizer-core-css-bundle')) { + return; + } try { - const files = [ - 'src/styles/tokens/color.css', - 'src/styles/tokens/size.css', - 'src/styles/tokens/typography.css', - 'src/styles/themes/default.css', - 'src/styles/generic/typography.css', - 'src/styles/core.css' - ]; - - for (const file of files) { - const cssUrl = this.browserAPI.runtime.getURL(file); - const response = await fetch(cssUrl); - const css = await response.text(); - - const style = document.createElement('style'); - style.textContent = css; - document.head.appendChild(style); - } - - // Add a marker to indicate core CSS bundle is loaded - const marker = document.createElement('style'); - marker.id = 'carbon-visualizer-core-css-bundle'; - marker.textContent = '/* Core CSS bundle loaded */'; - document.head.appendChild(marker); + // 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-bundle'; + style.textContent = css; + document.head.appendChild(style); } catch (error) { - console.error(error); + console.error('Failed to load core CSS bundle:', error); } } From c1d72da8d0ddf12e6d64997ec73fdeddce13acc1 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 21 Nov 2025 15:59:51 -0600 Subject: [PATCH 6/6] chore: remove panel css from configs, load in bundle --- build.js | 6 ++++-- src/core/Panel.js | 28 +--------------------------- 2 files changed, 5 insertions(+), 29 deletions(-) diff --git a/build.js b/build.js index 8841568..e007ced 100644 --- a/build.js +++ b/build.js @@ -153,7 +153,7 @@ function createZips() { }); } -// Bundle core CSS files +// Bundle all CSS files (core + panels) function bundleCoreCss() { const srcCssDir = 'src/styles'; const buildCssDir = path.join(buildDir, 'css'); @@ -163,7 +163,9 @@ function bundleCoreCss() { 'tokens/typography.css', 'themes/default.css', 'generic/typography.css', - 'core.css' + 'core.css', + 'welcome.css', + 'results.css' ]; // Create build/css directory if it doesn't exist diff --git a/src/core/Panel.js b/src/core/Panel.js index 6e7255e..2dde2a1 100644 --- a/src/core/Panel.js +++ b/src/core/Panel.js @@ -13,14 +13,12 @@ class Panel { const configs = { welcome: { htmlFile: 'src/panels/welcome/welcome.html', - cssFile: 'src/styles/welcome.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/styles/results.css', jsFile: 'src/panels/results/results.js', containerId: 'carbon-visualizer-results-panel', className: 'cv-panel--results' @@ -39,37 +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 { - // Check if this panel's CSS is already loaded - const styleId = `carbon-visualizer-${this.type}-css`; - if (document.getElementById(styleId)) { - return; // CSS already loaded, skip - } - - 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 = styleId; - style.textContent = css; - document.head.appendChild(style); - } catch (error) { - console.error(error); - } - } - async loadPanelHTML() { try { const htmlUrl = this.browserAPI.runtime.getURL(this.config.htmlFile);