Convert to normal CSS with handtree- prefix for better user customization

BREAKING CHANGE: CSS modules replaced with prefixed CSS classes for easier user overrides

- Rename TreeNode.module.scss → TreeNode.scss with handtree- prefixed classes
- Update component to use string class names instead of CSS modules
- Change tsup config from 'local-css' to 'css' loader
- Update type declarations for regular CSS imports

Benefits:
- Users can easily override styles: .handtree-head { color: red; }
- Better debugging - class names visible in DevTools
- More standard approach for component libraries
- No hashed class names in production

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: naivefun

.claude/settings.local.json

@@ -12,7 +12,8 @@
       "Bash(pnpm publish:*)",
       "Bash(git init:*)",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(mv:*)"
     ],
     "defaultMode": "acceptEdits"
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "handtree",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A React tree component for hand-crafted hierarchical interfaces",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/TreeNode.module.scss src/TreeNode.scsssrc/TreeNode.module.scss renamed to src/TreeNode.scss

@@ -1,16 +1,16 @@
-.root {
+.handtree-root {
   /* Layout structure */
-  .node {
+  .handtree-node {
   }
-  .content {
+  .handtree-content {
     flex-grow: 1;
   }
-  .title {
+  .handtree-title {
     /* Title container - no specific styles needed */
   }
 
   /* Head/chevron area with tree connecting lines */
-  .head {
+  .handtree-head {
     position: relative;
     display: flex;
     align-items: center;
@@ -20,7 +20,7 @@
     min-width: var(--head-width);
     max-width: var(--head-width);
 
-    &.headless {
+    &.handtree-headless {
       width: 0px;
       &::before {
         content: none;
@@ -50,21 +50,21 @@
       background-color: var(--outline-color);
     }
 
-    &.lastNode {
+    &.handtree-last-node {
       &::before {
         height: 50%;
       }
     }
 
-    &.expandable {
+    &.handtree-expandable {
       &::after {
         width: calc(100% - 20px);
       }
     }
   }
 
   /* Details section with continuation lines */
-  .details {
+  .handtree-details {
     position: relative;
     padding-left: var(--head-width);
 
@@ -78,13 +78,13 @@
       background-color: var(--outline-color);
     }
 
-    &.lastNode {
+    &.handtree-last-node {
       &::before {
         content: none;
       }
     }
 
-    &.expandable {
+    &.handtree-expandable {
       padding-left: calc(var(--indent-width) + var(--head-width));
       &::after {
         content: '';
@@ -95,7 +95,7 @@
         height: 100%;
         background-color: var(--outline-color);
       }
-      &.collpased {
+      &.handtree-collapsed {
         padding-left: 28px;
         &::after {
           content: none;
@@ -105,7 +105,7 @@
   }
 
   /* Indentation guides for tree structure */
-  .indent {
+  .handtree-indent {
     position: relative;
     width: var(--indent-width);
     min-width: var(--indent-width);
@@ -121,11 +121,11 @@
       background-color: var(--outline-color);
     }
 
-    &.ignore {
+    &.handtree-ignore {
       &::before {
         width: 0;
         height: 0;
       }
     }
   }
-}
+}

src/TreeNode.tsx

@@ -3,7 +3,7 @@ import range from 'lodash-es/range'
 import { PropsWithChildren, ReactNode, useContext } from 'react'
 import { VscChevronDown, VscChevronRight } from 'react-icons/vsc'
 import { TreeContext } from './TreeContext'
-import styles from './TreeNode.module.scss'
+import './TreeNode.scss'
 
 export interface TreeNodeProps {
   level: number // start from 0
@@ -40,14 +40,14 @@ export default function TreeNode({
   }
   return (
     <div
-      className={styles.root}
+      className="handtree-root"
       // @ts-ignore
       style={{
         ...cssVars,
       }}
     >
       <div
-        className={styles.node}
+        className="handtree-node"
         style={{
           display: 'flex',
           position: 'relative',
@@ -59,7 +59,7 @@ export default function TreeNode({
           return (
             <div
               key={i}
-              className={clsx([styles.indent, ignoreIndentOutline && styles.ignore])}
+              className={clsx(['handtree-indent', ignoreIndentOutline && 'handtree-ignore'])}
               style={{
                 width: indent,
               }}
@@ -68,15 +68,15 @@ export default function TreeNode({
         })}
 
         {/* content with title and main */}
-        <div className={styles.content}>
-          <div className={styles.title} style={{ display: 'flex' }}>
+        <div className="handtree-content">
+          <div className="handtree-title" style={{ display: 'flex' }}>
             {/* head */}
             <div
               className={clsx([
-                styles.head,
-                isRoot && styles.headless,
-                lastNode && styles.lastNode,
-                expandable && styles.expandable,
+                'handtree-head',
+                isRoot && 'handtree-headless',
+                lastNode && 'handtree-last-node',
+                expandable && 'handtree-expandable',
                 options.classNames?.chevron,
               ])}
               onClick={onToggleExpanded}
@@ -88,10 +88,10 @@ export default function TreeNode({
           {details && (
             <div
               className={clsx([
-                styles.details,
-                !!children && styles.expandable,
-                lastNode && styles.lastNode,
-                !expanded && styles.collpased,
+                'handtree-details',
+                !!children && 'handtree-expandable',
+                lastNode && 'handtree-last-node',
+                !expanded && 'handtree-collapsed',
               ])}
             >
               <div>{details}</div>
@@ -112,7 +112,7 @@ export default function TreeNode({
             classNames: options.classNames,
           }}
         >
-          <div className={styles.children}>{children}</div>
+          <div className="handtree-children">{children}</div>
         </TreeContext.Provider>
       )}
     </div>

src/global.d.ts

@@ -1,9 +1,9 @@
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module '*.scss' {
+  const content: any;
+  export default content;
 }
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module '*.css' {
+  const content: any;
+  export default content;
 }

src/index.ts

@@ -1,4 +1,4 @@
-import './TreeNode.module.scss'
+import './TreeNode.scss'
 
 export * from './TreeContext'
 export { default as TreeNode, type TreeNodeProps } from './TreeNode'

tsup.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   esbuildOptions(options) {
     options.loader = {
       ...options.loader,
-      '.scss': 'local-css',
+      '.scss': 'css',
     }
   },
 })