diff --git a/extensions/changelog.md b/extensions/changelog.md index ec99043..5cfb19d 100644 --- a/extensions/changelog.md +++ b/extensions/changelog.md @@ -2,6 +2,23 @@ # Changelog of the extensions +## feat: CSS Architecture - 12/1/2024 - @lumpinif + +### Modular CSS Architecture Implementation + +- Established new modular CSS architecture for better feature isolation + - Introduced feature-specific CSS modules starting with thinking-block + - Set up base styles directory for shared Tailwind utilities + - Improved organization and maintainability of styles + - Added support for future feature-specific styling needs + +### Build System Updates + +- Enhanced webpack configuration for CSS handling + - Integrated MiniCssExtractPlugin for optimized CSS delivery + - Updated manifest.json to reflect new CSS structure + - Removed legacy styles.css in favor of modular approach + ## ci: - 11/30/2024 - @lumpinif ### Chrome Extension CI Improvements diff --git a/extensions/chrome/package.json b/extensions/chrome/package.json index bb5026b..8f7b772 100644 --- a/extensions/chrome/package.json +++ b/extensions/chrome/package.json @@ -1,6 +1,6 @@ { "name": "thinking-claude", - "version": "3.1.4", + "version": "3.1.5", "description": "Chrome extension for letting Claude think like a real human", "type": "module", "scripts": { diff --git a/extensions/chrome/public/manifest.json b/extensions/chrome/public/manifest.json index 7754eb9..ff4bad9 100644 --- a/extensions/chrome/public/manifest.json +++ b/extensions/chrome/public/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Thinking Claude", - "version": "3.1.4", + "version": "3.1.5", "description": "Chrome extension for letting Claude think like a real human", "background": { "service_worker": "background.js" @@ -10,7 +10,7 @@ { "matches": ["https://*.claude.ai/*"], "js": ["content.js"], - "css": ["styles.css"] + "css": ["content.css"] } ], "icons": { diff --git a/extensions/chrome/src/content/index.ts b/extensions/chrome/src/content/index.ts index d1df735..21750ab 100644 --- a/extensions/chrome/src/content/index.ts +++ b/extensions/chrome/src/content/index.ts @@ -1,4 +1,4 @@ -import "@/styles/globals.css" +import "@/styles/index.css" import { ExtensionManager } from "./v3/managers/extension-manager" diff --git a/extensions/chrome/src/content/v3/features/thinking-block/index.ts b/extensions/chrome/src/content/v3/features/thinking-block/index.ts index 368b1b8..b65c887 100644 --- a/extensions/chrome/src/content/v3/features/thinking-block/index.ts +++ b/extensions/chrome/src/content/v3/features/thinking-block/index.ts @@ -18,7 +18,7 @@ export class TCThinkingBlock extends BaseFeature { /** * Initialize the thinking block feature * Sets up mutation observer to watch for new thinking blocks - * @returns Cleanup function to unsubscribe from mutation observer + * @returns Cleanup function to unsubscribe from mutation observer and remove custom attributes */ initialize(): void | (() => void) { this.mutationObserver.initialize() @@ -28,6 +28,14 @@ export class TCThinkingBlock extends BaseFeature { return () => { // Unsubscribe from mutation observer unsubscribe() + + // Clean up all feature-specific attributes + document + .querySelectorAll("[data-tc-processed]") + .forEach((el) => el.removeAttribute("data-tc-processed")) + document + .querySelectorAll("[data-tc-thinking-block-state]") + .forEach((el) => el.removeAttribute("data-tc-thinking-block-state")) } } } diff --git a/extensions/chrome/src/content/v3/features/thinking-block/process-thinking-block.ts b/extensions/chrome/src/content/v3/features/thinking-block/process-thinking-block.ts index 775b743..7cd89c0 100644 --- a/extensions/chrome/src/content/v3/features/thinking-block/process-thinking-block.ts +++ b/extensions/chrome/src/content/v3/features/thinking-block/process-thinking-block.ts @@ -20,8 +20,8 @@ function processControl(control: Element) { ?.querySelector(".code-block__code") if (!thinkingBlock) return - if (!resContainer.hasAttribute("data-thinking-block-state")) { - resContainer.setAttribute("data-thinking-block-state", "expanded") + if (!resContainer.hasAttribute("data-tc-thinking-block-state")) { + resContainer.setAttribute("data-tc-thinking-block-state", "expanded") } setupControls(control as HTMLElement, thinkingBlock, resContainer) diff --git a/extensions/chrome/src/content/v3/features/thinking-block/setup-controls.ts b/extensions/chrome/src/content/v3/features/thinking-block/setup-controls.ts index a48e33a..1c7d765 100644 --- a/extensions/chrome/src/content/v3/features/thinking-block/setup-controls.ts +++ b/extensions/chrome/src/content/v3/features/thinking-block/setup-controls.ts @@ -4,9 +4,10 @@ export function setupControls( resContainer: Element ) { const copyButton = control.querySelector("button") - if (!copyButton) return + copyButton.classList.add("tc-select-none") + copyButton.addEventListener( "click", async (e) => { @@ -17,11 +18,13 @@ export function setupControls( ) control.addEventListener("click", () => { - const currentState = resContainer.getAttribute("data-thinking-block-state") + const currentState = resContainer.getAttribute( + "data-tc-thinking-block-state" + ) // Update the collapse state of thinking block in the response container const newState = currentState === "expanded" ? "collapsed" : "expanded" - resContainer.setAttribute("data-thinking-block-state", newState) + resContainer.setAttribute("data-tc-thinking-block-state", newState) // Toggle the collapse state of the thinking block as fallback thinkingBlock.classList.toggle("collapsed") @@ -48,7 +51,8 @@ function updateCopyButtonUI(copyButton: Element) { const originalText = textSpan.textContent const originalSvgPath = svg.innerHTML - textSpan.textContent = "Copied" + // textSpan.textContent = "Copied" + svg.innerHTML = '' diff --git a/extensions/chrome/public/styles.css b/extensions/chrome/src/content/v3/features/thinking-block/styles.css similarity index 94% rename from extensions/chrome/public/styles.css rename to extensions/chrome/src/content/v3/features/thinking-block/styles.css index 486c051..18c2576 100644 --- a/extensions/chrome/public/styles.css +++ b/extensions/chrome/src/content/v3/features/thinking-block/styles.css @@ -17,9 +17,7 @@ div[data-is-streaming] pre:first-child .code-block__code { transition: all 0.3s ease-out !important; } -/* collapsed states */ - -/* Collapsed state */ +/* Collapsed states */ div[data-is-streaming] pre:first-child .code-block__code.collapsed { height: 0 !important; padding: 0 !important; @@ -28,7 +26,7 @@ div[data-is-streaming] pre:first-child .code-block__code.collapsed { } /* Collapsed state */ -[data-thinking-block-state="collapsed"] +[data-tc-thinking-block-state="collapsed"] div[data-is-streaming] pre:first-child .code-block__code { @@ -39,7 +37,7 @@ div[data-is-streaming] pre:first-child .code-block__code.collapsed { } /* Expanded state */ -/* [data-thinking-block-state="expanded"] div[data-is-streaming] pre:first-child .code-block__code { +/* [data-tc-thinking-block-state="expanded"] div[data-is-streaming] pre:first-child .code-block__code { height: 50vh !important; padding: 1em !important; visibility: visible !important; @@ -105,7 +103,7 @@ div[data-is-streaming] /* Update the text of the header */ -div[data-thinking-block-state="collapsed"] +div[data-tc-thinking-block-state="collapsed"] pre:first-child .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after { content: "View Claude's thinking" !important; @@ -127,7 +125,7 @@ div[data-is-streaming] /* Hover state */ /* This implementation is limited. We can consider to disable this hover state. */ -[data-thinking-block-state="expanded"] +[data-tc-thinking-block-state="expanded"] pre:first-child .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty):hover::after { color: hsl(var(--text-100)); @@ -175,6 +173,13 @@ pre:first-child transition: transform 0.25s ease-out; } +/* Chevron animation */ +[data-tc-thinking-block-state="collapsed"] + pre:first-child + .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before { + transform: rotate(180deg) !important; +} + /* --------------------------------- */ /* Shimmer animation for streaming state */ @@ -188,11 +193,3 @@ pre:first-child } /* --------------------------------- */ - -/* Chevron animation */ - -[data-thinking-block-state="collapsed"] - pre:first-child - .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before { - transform: rotate(180deg); -} diff --git a/extensions/chrome/src/content/v3/managers/feature-manager.ts b/extensions/chrome/src/content/v3/managers/feature-manager.ts index 8e99581..762dfee 100644 --- a/extensions/chrome/src/content/v3/managers/feature-manager.ts +++ b/extensions/chrome/src/content/v3/managers/feature-manager.ts @@ -36,11 +36,6 @@ export class FeatureManager { * Clean up all features */ cleanup(): void { - // Remove data-tc-processed attributes from thinking block controls - document.querySelectorAll("[data-tc-processed]").forEach((element) => { - element.removeAttribute("data-tc-processed") - }) - this.cleanupFunctions.forEach((cleanup, id) => { try { cleanup() diff --git a/extensions/chrome/src/styles/index.css b/extensions/chrome/src/styles/index.css new file mode 100644 index 0000000..c1841f5 --- /dev/null +++ b/extensions/chrome/src/styles/index.css @@ -0,0 +1,4 @@ +@import "./globals.css"; + +/* Import feature styles after Tailwind layers to ensure they have highest specificity */ +@import "@/content/v3/features/thinking-block/styles.css"; diff --git a/extensions/chrome/webpack/webpack.common.js b/extensions/chrome/webpack/webpack.common.js index c5a9f6b..6c20301 100644 --- a/extensions/chrome/webpack/webpack.common.js +++ b/extensions/chrome/webpack/webpack.common.js @@ -2,6 +2,7 @@ import path from "path" import { fileURLToPath } from "url" import CopyPlugin from "copy-webpack-plugin" +import MiniCssExtractPlugin from "mini-css-extract-plugin" const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) @@ -30,21 +31,14 @@ export default { { test: /\.css$/, use: [ - "style-loader", + MiniCssExtractPlugin.loader, { loader: "css-loader", options: { importLoaders: 1, }, }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - config: path.resolve(__dirname, "..", "postcss.config.cjs"), - }, - }, - }, + "postcss-loader", ], }, ], @@ -61,11 +55,16 @@ export default { clean: true, }, plugins: [ + new MiniCssExtractPlugin(), new CopyPlugin({ patterns: [ { from: path.resolve(__dirname, "..", "public"), to: path.resolve(__dirname, "..", "dist"), + globOptions: { + ignore: ["**/*.css"], // Ignore CSS files + patterns: ["**/*.{html,json,png,svg,ico}"], // Only copy specific file types + }, }, ], }),