scss-variable-extractor 1.6.4 → 1.6.6

package/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+coverage
+dist
+*.log
+.git
+test/fixtures
+templates

package/.prettierrc.json

@@ -0,0 +1,18 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/.scssextractrc.example.json

@@ -1,35 +1,31 @@
-{
-  "src": "./apps/subapp/src",
-  "output": "./libs/styles/_variables.scss",
-  "threshold": 2,
-  "categories": {
-    "colors": true,
-    "spacing": true,
-    "fontSizes": true,
-    "fontWeights": true,
-    "fontFamilies": true,
-    "borderRadius": true,
-    "shadows": true,
-    "zIndex": true,
-    "sizing": true,
-    "lineHeight": true,
-    "opacity": true,
-    "transitions": true
-  },
-  "spacingScale": {
-    "xxs": "2px",
-    "xs": "4px",
-    "sm": "8px",
-    "md": "16px",
-    "lg": "24px",
-    "xl": "32px",
-    "xxl": "48px"
-  },
-  "ignore": [
-    "**/node_modules/**",
-    "**/dist/**",
-    "**/_variables.scss"
-  ],
-  "importStyle": "use",
-  "reportFormat": "table"
-}
+{
+  "src": "./apps/subapp/src",
+  "output": "./libs/styles/_variables.scss",
+  "threshold": 2,
+  "categories": {
+    "colors": true,
+    "spacing": true,
+    "fontSizes": true,
+    "fontWeights": true,
+    "fontFamilies": true,
+    "borderRadius": true,
+    "shadows": true,
+    "zIndex": true,
+    "sizing": true,
+    "lineHeight": true,
+    "opacity": true,
+    "transitions": true
+  },
+  "spacingScale": {
+    "xxs": "2px",
+    "xs": "4px",
+    "sm": "8px",
+    "md": "16px",
+    "lg": "24px",
+    "xl": "32px",
+    "xxl": "48px"
+  },
+  "ignore": ["**/node_modules/**", "**/dist/**", "**/_variables.scss"],
+  "importStyle": "use",
+  "reportFormat": "table"
+}

package/MULTI-APP-GUIDE.md

@@ -0,0 +1,262 @@
+# Multi-App Dependency Analysis Guide
+
+## Your Scenario: Cafe Library Submodule + Unified App
+
+This guide shows how to use the new `analyze-dependencies` command for your specific setup with:
+
+- Multiple apps (unified, customer, admin, etc.)
+- Git submodule: fluffySubby library
+- Apps that reference each other's styles
+
+## Step 1: Create Configuration File
+
+Create `multi-app-config.json` in your workspace root:
+
+```json
+{
+  "workspaceRoot": ".",
+  "apps": [
+    {
+      "name": "unified-app",
+      "path": "./apps/unified/src",
+      "type": "app",
+      "description": "Unified app that references other apps"
+    },
+    {
+      "name": "customer-app",
+      "path": "./apps/customer/src",
+      "type": "app",
+      "description": "Customer-facing app"
+    },
+    {
+      "name": "admin-app",
+      "path": "./apps/admin/src",
+      "type": "app",
+      "description": "Admin dashboard"
+    }
+  ],
+  "sharedLibraries": [
+    {
+      "name": "fluffySubby-lib",
+      "path": "./libs/fluffySubby",
+      "type": "library",
+      "isSubmodule": true,
+      "description": "Git submodule fluffySubby library - shared across apps"
+    }
+  ]
+}
+```
+
+## Step 2: Run Analysis
+
+```bash
+npx scss-extract analyze-dependencies --config multi-app-config.json
+```
+
+## What You'll See
+
+### App Overview
+
+```
+📱 unified-app: 45 files, 127 classes, 38 variables
+📱 customer-app: 32 files, 89 classes, 25 variables
+📱 admin-app: 28 files, 76 classes, 22 variables
+📚 fluffySubby-lib: 15 files, 54 classes, 31 variables (submodule)
+```
+
+### Dependencies Detected
+
+```
+Dependencies:
+  Strong (explicit imports):
+    unified-app → fluffySubby-lib (@use)       ← Unified uses fluffySubby library
+    customer-app → fluffySubby-lib (@use)      ← Customer uses fluffySubby library
+    unified-app → customer-app (@use)   ← ⚠️ Unified imports from customer!
+
+  Weak (shared classes):
+    unified-app ↔ customer-app (12 shared classes)
+    customer-app ↔ admin-app (8 shared classes)
+```
+
+### Recommendations
+
+```
+💡 Recommendations:
+
+🟡 fluffySubby-lib is a root dependency - already set up correctly as submodule ✓
+🟡 12 CSS classes shared between unified-app and customer-app - should be in fluffySubby-lib
+🟡 unified-app imports from customer-app - consider extracting shared styles to fluffySubby-lib
+🔴 Potential circular dependency if customer-app also imports from unified-app
+```
+
+## Step 3: Understanding the Results
+
+### What the Tool Tells You
+
+**1. Which App Relies on Which:**
+
+- ✅ fluffySubby-lib is used by unified-app and customer-app (good - it's a library)
+- ⚠️ unified-app imports from customer-app (might be problematic)
+- ℹ️ Shows you the dependency chain
+
+**2. What Should Be Shared:**
+
+- Classes used in 2+ apps → Move to fluffySubby-lib
+- Variables used in 2+ apps → Move to fluffySubby-lib
+- App-specific styles → Keep in app
+
+**3. Organization Strategy:**
+
+```
+Recommended Structure:
+
+libs/fluffySubby/ (git submodule)
+├── styles/
+│   ├── _variables.scss     ← Shared variables (tool identifies these)
+│   ├── _utilities.scss     ← Shared classes (tool identifies these)
+│   ├── _mixins.scss        ← Shared mixins
+│   └── index.scss          ← Main export
+
+apps/unified/
+└── src/styles/
+    └── unified-specific.scss   ← Only unified-specific styles
+
+apps/customer/
+└── src/styles/
+    └── customer-specific.scss  ← Only customer-specific styles
+```
+
+## Step 4: Act on Recommendations
+
+### If Tool Says: "Move these classes to fluffySubby-lib"
+
+**Classes detected in multiple apps:**
+
+- `.btn-primary` (in unified, customer, admin)
+- `.card-container` (in unified, customer)
+- `.header-nav` (in all apps)
+
+**Action:**
+
+```bash
+# The tool tells you exactly what to move
+# Create utilities file in fluffySubby-lib
+touch libs/fluffySubby/styles/_utilities.scss
+
+# Add the shared classes there
+# Tool can show you which classes from the analysis
+```
+
+### If Tool Says: "Circular dependency detected"
+
+**Example:** unified-app → customer-app → unified-app
+
+**Action:**
+
+1. Review what unified-app needs from customer-app
+2. Extract those shared styles to fluffySubby-lib
+3. Both apps import from fluffySubby-lib instead
+
+## Step 5: Export Detailed Analysis (Optional)
+
+```bash
+# Get JSON output for detailed review
+npx scss-extract analyze-dependencies --config multi-app-config.json --format json > dependency-analysis.json
+
+# Review:
+# - Exact list of shared classes
+# - Exact list of shared variables
+# - Complete import graph
+# - Step-by-step migration plan
+```
+
+## Common Patterns the Tool Detects
+
+### ✅ Good Pattern
+
+```
+unified-app → fluffySubby-lib (submodule)
+customer-app → fluffySubby-lib (submodule)
+admin-app → fluffySubby-lib (submodule)
+```
+
+**Tool says:** ✓ Good architecture, fluffySubby-lib is properly used as shared library
+
+### ⚠️ Warning Pattern
+
+```
+unified-app → customer-app → styles.scss
+```
+
+**Tool says:** ⚠️ unified-app depends on customer-app styles - extract to fluffySubby-lib
+
+### 🔴 Problem Pattern
+
+```
+unified-app → customer-app
+customer-app → unified-app
+```
+
+**Tool says:** 🔴 Circular dependency - extract shared styles to fluffySubby-lib immediately
+
+## Real Example: Your Cafe Library
+
+**Before Analysis:**
+
+```
+// unified-app/styles.scss
+@use '../../customer-app/src/styles/buttons';  ← Bad: app imports from app
+@use '../../../libs/fluffySubby/styles' as fluffySubby;      ← Good: app imports from lib
+```
+
+**After Analysis & Refactoring:**
+
+```
+// Move shared styles to fluffySubby-lib
+libs/fluffySubby/styles/_buttons.scss
+
+// unified-app/styles.scss
+@use '../../../libs/fluffySubby/styles' as fluffySubby;      ← Good: only lib imports
+
+// customer-app/styles.scss
+@use '../../../libs/fluffySubby/styles' as fluffySubby;      ← Good: only lib imports
+```
+
+## Questions the Tool Answers
+
+❓ **"Where should I put this style?"**
+→ Tool tells you if it's used in 1 app (keep local) or 2+ apps (move to fluffySubby-lib)
+
+❓ **"Is my unified app correctly using the fluffySubby library?"**
+→ Tool shows dependency graph and highlights if it's importing from apps instead
+
+❓ **"What styles should be in the fluffySubby submodule vs app-specific?"**
+→ Tool identifies exactly which classes/variables are shared
+
+❓ **"Are there any circular dependencies?"**
+→ Tool detects and highlights them with 🔴 critical priority
+
+## Next Steps After Analysis
+
+1. **Review the recommendations** - Prioritize critical (🔴) and high (🟡) items
+2. **Move shared styles to fluffySubby-lib** - Use the tool's list of shared classes/variables
+3. **Update imports** - Change app-to-app imports to app-to-lib imports
+4. **Test** - Ensure all apps still work correctly
+5. **Commit fluffySubby-lib changes** - Update the submodule
+6. **Update apps** - Pull latest fluffySubby-lib in each app
+
+## Automation Coming Soon
+
+Future versions will support:
+
+```bash
+# Auto-migrate shared styles to library
+npx scss-extract migrate-to-library --config multi-app-config.json
+
+# Auto-update imports
+npx scss-extract update-imports --config multi-app-config.json
+```
+
+---
+
+**Bottom Line:** The tool analyzes your multi-app setup and tells you exactly which app relies on which, what should be shared vs app-specific, and the best way to organize everything!