[feat](styles): implement modular CSS architecture for upcoming feature

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

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": {

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": {

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"
 

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"))
     }
   }
 }

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)

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 =
     '<path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>'
 

extensions/chrome/public/styles.css → 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);
-}

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()

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";

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
+          },
         },
       ],
     }),