scss-variable-extractor 1.6.3 → 1.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,499 +1,500 @@
1
- const fs = require('fs');
2
- const path = require('path');
3
-
4
- /**
5
- * Analyzes style organization across the project
6
- * @param {Array<string>} scssFiles - Array of SCSS file paths
7
- * @param {Object} config - Configuration options
8
- * @returns {Object} - Organization analysis results
9
- */
10
- function analyzeStyleOrganization(scssFiles, config = {}) {
11
- const analysis = {
12
- summary: {
13
- totalFiles: scssFiles.length,
14
- componentStyles: 0,
15
- globalStyles: 0,
16
- utilityFiles: 0,
17
- themeFiles: 0,
18
- mixinFiles: 0
19
- },
20
- duplicates: {
21
- selectors: [],
22
- rules: [],
23
- mixins: []
24
- },
25
- imports: {
26
- global: [],
27
- component: [],
28
- unused: [],
29
- circular: []
30
- },
31
- recommendations: [],
32
- structure: {
33
- current: {},
34
- suggested: {}
35
- }
36
- };
37
-
38
- const selectorMap = new Map(); // Track selector usage across files
39
- const ruleMap = new Map(); // Track identical rule blocks
40
- const mixinMap = new Map(); // Track mixin definitions
41
- const importMap = new Map(); // Track import statements
42
-
43
- scssFiles.forEach(filePath => {
44
- const content = fs.readFileSync(filePath, 'utf8');
45
- const fileName = path.basename(filePath);
46
- const fileInfo = analyzeFile(content, filePath);
47
-
48
- // Categorize file type
49
- if (fileName.includes('theme') || fileName.includes('_variables')) {
50
- analysis.summary.themeFiles++;
51
- } else if (fileName.includes('mixin') || fileName.includes('_mixins')) {
52
- analysis.summary.mixinFiles++;
53
- } else if (fileName.includes('util') || fileName.includes('helper')) {
54
- analysis.summary.utilityFiles++;
55
- } else if (filePath.includes('styles.scss') || filePath.includes('global')) {
56
- analysis.summary.globalStyles++;
57
- } else if (fileName.includes('.component.scss')) {
58
- analysis.summary.componentStyles++;
59
- }
60
-
61
- // Track selectors
62
- fileInfo.selectors.forEach(selector => {
63
- if (!selectorMap.has(selector)) {
64
- selectorMap.set(selector, []);
65
- }
66
- selectorMap.get(selector).push({ file: filePath, content: fileInfo.selectorContent[selector] });
67
- });
68
-
69
- // Track rules
70
- fileInfo.rules.forEach(rule => {
71
- const ruleKey = rule.replace(/\s+/g, ' ').trim();
72
- if (!ruleMap.has(ruleKey)) {
73
- ruleMap.set(ruleKey, []);
74
- }
75
- ruleMap.get(ruleKey).push(filePath);
76
- });
77
-
78
- // Track mixins
79
- fileInfo.mixins.forEach(mixin => {
80
- if (!mixinMap.has(mixin)) {
81
- mixinMap.set(mixin, []);
82
- }
83
- mixinMap.get(mixin).push(filePath);
84
- });
85
-
86
- // Track imports
87
- fileInfo.imports.forEach(importPath => {
88
- if (!importMap.has(importPath)) {
89
- importMap.set(importPath, []);
90
- }
91
- importMap.get(importPath).push(filePath);
92
- });
93
- });
94
-
95
- // Analyze duplicates
96
- selectorMap.forEach((files, selector) => {
97
- if (files.length > 1) {
98
- analysis.duplicates.selectors.push({
99
- selector,
100
- count: files.length,
101
- files: files.map(f => f.file)
102
- });
103
- }
104
- });
105
-
106
- ruleMap.forEach((files, rule) => {
107
- if (files.length > 2 && rule.length > 50) { // Only report significant duplicates
108
- analysis.duplicates.rules.push({
109
- rule: rule.substring(0, 100) + '...',
110
- count: files.length,
111
- files
112
- });
113
- }
114
- });
115
-
116
- mixinMap.forEach((files, mixin) => {
117
- if (files.length > 1) {
118
- analysis.duplicates.mixins.push({
119
- mixin,
120
- count: files.length,
121
- files
122
- });
123
- }
124
- });
125
-
126
- // Analyze imports
127
- analyzeImportPatterns(importMap, analysis, scssFiles);
128
-
129
- // Generate recommendations
130
- generateRecommendations(analysis, config);
131
-
132
- // Suggest structure
133
- suggestStructure(analysis, config);
134
-
135
- return analysis;
136
- }
137
-
138
- /**
139
- * Analyzes a single SCSS file
140
- * @param {string} content - File content
141
- * @param {string} filePath - File path
142
- * @returns {Object} - File analysis
143
- */
144
- function analyzeFile(content, filePath) {
145
- const selectors = [];
146
- const selectorContent = {};
147
- const rules = [];
148
- const mixins = [];
149
- const imports = [];
150
-
151
- // Extract selectors
152
- const selectorRegex = /([.#]?[\w-]+(?:\s*[>+~]\s*[\w-]+)*)\s*\{([^}]*)\}/g;
153
- let match;
154
- while ((match = selectorRegex.exec(content)) !== null) {
155
- const selector = match[1].trim();
156
- const ruleContent = match[2].trim();
157
- selectors.push(selector);
158
- selectorContent[selector] = ruleContent;
159
- if (ruleContent.length > 20) {
160
- rules.push(match[0]);
161
- }
162
- }
163
-
164
- // Extract mixins
165
- const mixinRegex = /@mixin\s+([\w-]+)/g;
166
- while ((match = mixinRegex.exec(content)) !== null) {
167
- mixins.push(match[1]);
168
- }
169
-
170
- // Extract imports
171
- const importRegex = /@(?:import|use|forward)\s+['"]([^'"]+)['"]/g;
172
- while ((match = importRegex.exec(content)) !== null) {
173
- imports.push(match[1]);
174
- }
175
-
176
- return {
177
- selectors,
178
- selectorContent,
179
- rules,
180
- mixins,
181
- imports
182
- };
183
- }
184
-
185
- /**
186
- * Analyzes import patterns
187
- * @param {Map} importMap - Map of imports
188
- * @param {Object} analysis - Analysis object
189
- * @param {Array} scssFiles - All SCSS files
190
- */
191
- function analyzeImportPatterns(importMap, analysis, scssFiles) {
192
- const fileSet = new Set(scssFiles.map(f => path.basename(f, '.scss')));
193
-
194
- importMap.forEach((importingFiles, importPath) => {
195
- const isGlobal = importPath.includes('variables') ||
196
- importPath.includes('theme') ||
197
- importPath.includes('mixins');
198
-
199
- if (isGlobal && importingFiles.length > 5) {
200
- analysis.imports.global.push({
201
- path: importPath,
202
- usedIn: importingFiles.length,
203
- suggestion: 'Consider adding to global styles.scss'
204
- });
205
- } else if (importingFiles.length === 1) {
206
- analysis.imports.unused.push({
207
- path: importPath,
208
- file: importingFiles[0],
209
- suggestion: 'Potentially unused or should be in component file'
210
- });
211
- }
212
-
213
- // Check for component-level imports
214
- importingFiles.forEach(file => {
215
- if (file.includes('.component.scss')) {
216
- analysis.imports.component.push({
217
- path: importPath,
218
- component: path.basename(file)
219
- });
220
- }
221
- });
222
- });
223
- }
224
-
225
- /**
226
- * Generates organization recommendations
227
- * @param {Object} analysis - Analysis object
228
- * @param {Object} config - Configuration
229
- */
230
- function generateRecommendations(analysis, config) {
231
- const recs = analysis.recommendations;
232
-
233
- // Duplicate selectors
234
- if (analysis.duplicates.selectors.length > 0) {
235
- recs.push({
236
- priority: 'high',
237
- category: 'duplication',
238
- title: 'Duplicate selectors detected',
239
- description: `Found ${analysis.duplicates.selectors.length} selectors used in multiple files`,
240
- action: 'Extract common selectors to shared utility files or use mixins',
241
- files: analysis.duplicates.selectors.slice(0, 5)
242
- });
243
- }
244
-
245
- // Duplicate rules
246
- if (analysis.duplicates.rules.length > 0) {
247
- recs.push({
248
- priority: 'high',
249
- category: 'duplication',
250
- title: 'Duplicate CSS rules detected',
251
- description: `Found ${analysis.duplicates.rules.length} identical rule blocks`,
252
- action: 'Create reusable mixins or utility classes',
253
- count: analysis.duplicates.rules.length
254
- });
255
- }
256
-
257
- // Component vs global styles
258
- if (analysis.summary.componentStyles > 10 && analysis.summary.globalStyles === 0) {
259
- recs.push({
260
- priority: 'medium',
261
- category: 'organization',
262
- title: 'No global styles file detected',
263
- description: 'Consider creating a global styles.scss for shared utilities and resets',
264
- action: 'Create src/styles.scss with @use imports'
265
- });
266
- }
267
-
268
- // Import optimization
269
- if (analysis.imports.global.length > 3) {
270
- recs.push({
271
- priority: 'medium',
272
- category: 'imports',
273
- title: 'Optimize global imports',
274
- description: `${analysis.imports.global.length} files are imported globally across many components`,
275
- action: 'Consolidate into a single theme file or add to styles.scss',
276
- files: analysis.imports.global.map(i => i.path)
277
- });
278
- }
279
-
280
- // Theme organization
281
- if (analysis.summary.themeFiles === 0 && analysis.summary.componentStyles > 5) {
282
- recs.push({
283
- priority: 'medium',
284
- category: 'theming',
285
- title: 'No theme structure detected',
286
- description: 'Consider organizing styles following Angular Material theming patterns',
287
- action: 'Create theme files: _variables.scss, _typography.scss, _theme.scss'
288
- });
289
- }
290
-
291
- // Mixin organization
292
- if (analysis.duplicates.mixins.length > 0) {
293
- recs.push({
294
- priority: 'low',
295
- category: 'mixins',
296
- title: 'Duplicate mixin definitions',
297
- description: `${analysis.duplicates.mixins.length} mixins defined in multiple files`,
298
- action: 'Consolidate mixins into a shared _mixins.scss file'
299
- });
300
- }
301
- }
302
-
303
- /**
304
- * Suggests ideal folder structure
305
- * @param {Object} analysis - Analysis object
306
- * @param {Object} config - Configuration
307
- */
308
- function suggestStructure(analysis, config) {
309
- const angularConfigured = config.angular !== undefined;
310
-
311
- analysis.structure.current = {
312
- componentStyles: analysis.summary.componentStyles,
313
- globalStyles: analysis.summary.globalStyles,
314
- themeFiles: analysis.summary.themeFiles,
315
- utilityFiles: analysis.summary.utilityFiles,
316
- mixinFiles: analysis.summary.mixinFiles
317
- };
318
-
319
- analysis.structure.suggested = {
320
- description: 'Recommended Angular Material theme structure',
321
- folders: [
322
- {
323
- path: 'src/styles/',
324
- files: [
325
- '_variables.scss - Design tokens (colors, spacing, typography)',
326
- '_mixins.scss - Reusable SCSS mixins',
327
- '_utilities.scss - Utility classes (flex, spacing, etc.)',
328
- '_theme.scss - Angular Material theme configuration',
329
- '_typography.scss - Typography styles',
330
- 'styles.scss - Global entry point'
331
- ]
332
- },
333
- {
334
- path: 'src/app/components/',
335
- files: [
336
- '*.component.scss - Component-scoped styles only',
337
- 'Use @use for variables/mixins instead of @import'
338
- ]
339
- }
340
- ],
341
- imports: {
342
- global: [
343
- '@use "@angular/material" as mat;',
344
- '@use "./styles/variables" as vars;',
345
- '@use "./styles/mixins";',
346
- '@use "./styles/utilities";'
347
- ],
348
- component: [
349
- '@use "../../../styles/variables" as vars;',
350
- '@use "../../../styles/mixins";'
351
- ]
352
- }
353
- };
354
- }
355
-
356
- /**
357
- * Generates organization report
358
- * @param {Object} analysis - Analysis results
359
- * @param {string} format - Report format
360
- * @returns {string} - Formatted report
361
- */
362
- function generateOrganizationReport(analysis, format = 'table') {
363
- if (format === 'json') {
364
- return JSON.stringify(analysis, null, 2);
365
- }
366
-
367
- if (format === 'markdown') {
368
- return generateMarkdownOrganizationReport(analysis);
369
- }
370
-
371
- // Table format
372
- const chalk = require('chalk');
373
- const Table = require('cli-table3');
374
-
375
- let report = chalk.cyan.bold('\nšŸ“‹ Style Organization Analysis\n\n');
376
-
377
- // Summary
378
- report += chalk.white.bold('Summary:\n');
379
- const summaryTable = new Table({
380
- head: ['Metric', 'Count'],
381
- style: { head: ['cyan'] }
382
- });
383
-
384
- summaryTable.push(
385
- ['Total SCSS Files', analysis.summary.totalFiles],
386
- ['Component Styles', analysis.summary.componentStyles],
387
- ['Global Styles', analysis.summary.globalStyles],
388
- ['Theme Files', analysis.summary.themeFiles],
389
- ['Utility Files', analysis.summary.utilityFiles],
390
- ['Mixin Files', analysis.summary.mixinFiles]
391
- );
392
-
393
- report += summaryTable.toString() + '\n\n';
394
-
395
- // Duplicates
396
- if (analysis.duplicates.selectors.length > 0 ||
397
- analysis.duplicates.rules.length > 0) {
398
- report += chalk.yellow.bold('Duplication Issues:\n');
399
- const dupTable = new Table({
400
- head: ['Type', 'Count', 'Example'],
401
- style: { head: ['yellow'] }
402
- });
403
-
404
- if (analysis.duplicates.selectors.length > 0) {
405
- const example = analysis.duplicates.selectors[0];
406
- dupTable.push([
407
- 'Duplicate Selectors',
408
- analysis.duplicates.selectors.length,
409
- `${example.selector} (${example.count} files)`
410
- ]);
411
- }
412
-
413
- if (analysis.duplicates.rules.length > 0) {
414
- dupTable.push([
415
- 'Duplicate Rules',
416
- analysis.duplicates.rules.length,
417
- 'Identical CSS blocks'
418
- ]);
419
- }
420
-
421
- if (analysis.duplicates.mixins.length > 0) {
422
- dupTable.push([
423
- 'Duplicate Mixins',
424
- analysis.duplicates.mixins.length,
425
- analysis.duplicates.mixins[0].mixin
426
- ]);
427
- }
428
-
429
- report += dupTable.toString() + '\n\n';
430
- }
431
-
432
- // Recommendations
433
- if (analysis.recommendations.length > 0) {
434
- report += chalk.green.bold('Recommendations:\n\n');
435
- analysis.recommendations.forEach((rec, i) => {
436
- const priorityColor = rec.priority === 'high' ? 'red' :
437
- rec.priority === 'medium' ? 'yellow' : 'gray';
438
- report += chalk[priorityColor](`${i + 1}. [${rec.priority.toUpperCase()}] ${rec.title}\n`);
439
- report += chalk.gray(` ${rec.description}\n`);
440
- report += chalk.white(` → ${rec.action}\n\n`);
441
- });
442
- }
443
-
444
- // Suggested structure
445
- report += chalk.blue.bold('Suggested Structure:\n\n');
446
- analysis.structure.suggested.folders.forEach(folder => {
447
- report += chalk.cyan(`${folder.path}\n`);
448
- folder.files.forEach(file => {
449
- report += chalk.gray(` • ${file}\n`);
450
- });
451
- report += '\n';
452
- });
453
-
454
- return report;
455
- }
456
-
457
- /**
458
- * Generates markdown report
459
- * @param {Object} analysis - Analysis results
460
- * @returns {string} - Markdown formatted report
461
- */
462
- function generateMarkdownOrganizationReport(analysis) {
463
- let md = '# Style Organization Analysis\n\n';
464
-
465
- md += '## Summary\n\n';
466
- md += '| Metric | Count |\n';
467
- md += '|--------|-------|\n';
468
- md += `| Total SCSS Files | ${analysis.summary.totalFiles} |\n`;
469
- md += `| Component Styles | ${analysis.summary.componentStyles} |\n`;
470
- md += `| Global Styles | ${analysis.summary.globalStyles} |\n`;
471
- md += `| Theme Files | ${analysis.summary.themeFiles} |\n`;
472
- md += `| Utility Files | ${analysis.summary.utilityFiles} |\n`;
473
- md += `| Mixin Files | ${analysis.summary.mixinFiles} |\n\n`;
474
-
475
- if (analysis.recommendations.length > 0) {
476
- md += '## Recommendations\n\n';
477
- analysis.recommendations.forEach((rec, i) => {
478
- md += `### ${i + 1}. ${rec.title} (${rec.priority})\n\n`;
479
- md += `**Description:** ${rec.description}\n\n`;
480
- md += `**Action:** ${rec.action}\n\n`;
481
- });
482
- }
483
-
484
- md += '## Suggested Structure\n\n';
485
- analysis.structure.suggested.folders.forEach(folder => {
486
- md += `### ${folder.path}\n\n`;
487
- folder.files.forEach(file => {
488
- md += `- ${file}\n`;
489
- });
490
- md += '\n';
491
- });
492
-
493
- return md;
494
- }
495
-
496
- module.exports = {
497
- analyzeStyleOrganization,
498
- generateOrganizationReport
499
- };
1
+ const fs = require('fs');
2
+ const path = require('path');
3
+
4
+ /**
5
+ * Analyzes style organization across the project
6
+ * @param {Array<string>} scssFiles - Array of SCSS file paths
7
+ * @param {Object} config - Configuration options
8
+ * @returns {Object} - Organization analysis results
9
+ */
10
+ function analyzeStyleOrganization(scssFiles, config = {}) {
11
+ const analysis = {
12
+ summary: {
13
+ totalFiles: scssFiles.length,
14
+ componentStyles: 0,
15
+ globalStyles: 0,
16
+ utilityFiles: 0,
17
+ themeFiles: 0,
18
+ mixinFiles: 0,
19
+ },
20
+ duplicates: {
21
+ selectors: [],
22
+ rules: [],
23
+ mixins: [],
24
+ },
25
+ imports: {
26
+ global: [],
27
+ component: [],
28
+ unused: [],
29
+ circular: [],
30
+ },
31
+ recommendations: [],
32
+ structure: {
33
+ current: {},
34
+ suggested: {},
35
+ },
36
+ };
37
+
38
+ const selectorMap = new Map(); // Track selector usage across files
39
+ const ruleMap = new Map(); // Track identical rule blocks
40
+ const mixinMap = new Map(); // Track mixin definitions
41
+ const importMap = new Map(); // Track import statements
42
+
43
+ scssFiles.forEach(filePath => {
44
+ // Skip if file doesn't exist (e.g., temp test files)
45
+ if (!fs.existsSync(filePath)) {
46
+ return;
47
+ }
48
+
49
+ const content = fs.readFileSync(filePath, 'utf8');
50
+ const fileName = path.basename(filePath);
51
+ const fileInfo = analyzeFile(content, filePath);
52
+
53
+ // Categorize file type
54
+ if (fileName.includes('theme') || fileName.includes('_variables')) {
55
+ analysis.summary.themeFiles++;
56
+ } else if (fileName.includes('mixin') || fileName.includes('_mixins')) {
57
+ analysis.summary.mixinFiles++;
58
+ } else if (fileName.includes('util') || fileName.includes('helper')) {
59
+ analysis.summary.utilityFiles++;
60
+ } else if (filePath.includes('styles.scss') || filePath.includes('global')) {
61
+ analysis.summary.globalStyles++;
62
+ } else if (fileName.includes('.component.scss')) {
63
+ analysis.summary.componentStyles++;
64
+ }
65
+
66
+ // Track selectors
67
+ fileInfo.selectors.forEach(selector => {
68
+ if (!selectorMap.has(selector)) {
69
+ selectorMap.set(selector, []);
70
+ }
71
+ selectorMap
72
+ .get(selector)
73
+ .push({ file: filePath, content: fileInfo.selectorContent[selector] });
74
+ });
75
+
76
+ // Track rules
77
+ fileInfo.rules.forEach(rule => {
78
+ const ruleKey = rule.replace(/\s+/g, ' ').trim();
79
+ if (!ruleMap.has(ruleKey)) {
80
+ ruleMap.set(ruleKey, []);
81
+ }
82
+ ruleMap.get(ruleKey).push(filePath);
83
+ });
84
+
85
+ // Track mixins
86
+ fileInfo.mixins.forEach(mixin => {
87
+ if (!mixinMap.has(mixin)) {
88
+ mixinMap.set(mixin, []);
89
+ }
90
+ mixinMap.get(mixin).push(filePath);
91
+ });
92
+
93
+ // Track imports
94
+ fileInfo.imports.forEach(importPath => {
95
+ if (!importMap.has(importPath)) {
96
+ importMap.set(importPath, []);
97
+ }
98
+ importMap.get(importPath).push(filePath);
99
+ });
100
+ });
101
+
102
+ // Analyze duplicates
103
+ selectorMap.forEach((files, selector) => {
104
+ if (files.length > 1) {
105
+ analysis.duplicates.selectors.push({
106
+ selector,
107
+ count: files.length,
108
+ files: files.map(f => f.file),
109
+ });
110
+ }
111
+ });
112
+
113
+ ruleMap.forEach((files, rule) => {
114
+ if (files.length > 2 && rule.length > 50) {
115
+ // Only report significant duplicates
116
+ analysis.duplicates.rules.push({
117
+ rule: rule.substring(0, 100) + '...',
118
+ count: files.length,
119
+ files,
120
+ });
121
+ }
122
+ });
123
+
124
+ mixinMap.forEach((files, mixin) => {
125
+ if (files.length > 1) {
126
+ analysis.duplicates.mixins.push({
127
+ mixin,
128
+ count: files.length,
129
+ files,
130
+ });
131
+ }
132
+ });
133
+
134
+ // Analyze imports
135
+ analyzeImportPatterns(importMap, analysis, scssFiles);
136
+
137
+ // Generate recommendations
138
+ generateRecommendations(analysis, config);
139
+
140
+ // Suggest structure
141
+ suggestStructure(analysis, config);
142
+
143
+ return analysis;
144
+ }
145
+
146
+ /**
147
+ * Analyzes a single SCSS file
148
+ * @param {string} content - File content
149
+ * @param {string} filePath - File path
150
+ * @returns {Object} - File analysis
151
+ */
152
+ function analyzeFile(content, filePath) {
153
+ const selectors = [];
154
+ const selectorContent = {};
155
+ const rules = [];
156
+ const mixins = [];
157
+ const imports = [];
158
+
159
+ // Extract selectors
160
+ const selectorRegex = /([.#]?[\w-]+(?:\s*[>+~]\s*[\w-]+)*)\s*\{([^}]*)\}/g;
161
+ let match;
162
+ while ((match = selectorRegex.exec(content)) !== null) {
163
+ const selector = match[1].trim();
164
+ const ruleContent = match[2].trim();
165
+ selectors.push(selector);
166
+ selectorContent[selector] = ruleContent;
167
+ if (ruleContent.length > 20) {
168
+ rules.push(match[0]);
169
+ }
170
+ }
171
+
172
+ // Extract mixins
173
+ const mixinRegex = /@mixin\s+([\w-]+)/g;
174
+ while ((match = mixinRegex.exec(content)) !== null) {
175
+ mixins.push(match[1]);
176
+ }
177
+
178
+ // Extract imports
179
+ const importRegex = /@(?:import|use|forward)\s+['"]([^'"]+)['"]/g;
180
+ while ((match = importRegex.exec(content)) !== null) {
181
+ imports.push(match[1]);
182
+ }
183
+
184
+ return {
185
+ selectors,
186
+ selectorContent,
187
+ rules,
188
+ mixins,
189
+ imports,
190
+ };
191
+ }
192
+
193
+ /**
194
+ * Analyzes import patterns
195
+ * @param {Map} importMap - Map of imports
196
+ * @param {Object} analysis - Analysis object
197
+ * @param {Array} scssFiles - All SCSS files
198
+ */
199
+ function analyzeImportPatterns(importMap, analysis, scssFiles) {
200
+ const fileSet = new Set(scssFiles.map(f => path.basename(f, '.scss')));
201
+
202
+ importMap.forEach((importingFiles, importPath) => {
203
+ const isGlobal =
204
+ importPath.includes('variables') ||
205
+ importPath.includes('theme') ||
206
+ importPath.includes('mixins');
207
+
208
+ if (isGlobal && importingFiles.length > 5) {
209
+ analysis.imports.global.push({
210
+ path: importPath,
211
+ usedIn: importingFiles.length,
212
+ suggestion: 'Consider adding to global styles.scss',
213
+ });
214
+ } else if (importingFiles.length === 1) {
215
+ analysis.imports.unused.push({
216
+ path: importPath,
217
+ file: importingFiles[0],
218
+ suggestion: 'Potentially unused or should be in component file',
219
+ });
220
+ }
221
+
222
+ // Check for component-level imports
223
+ importingFiles.forEach(file => {
224
+ if (file.includes('.component.scss')) {
225
+ analysis.imports.component.push({
226
+ path: importPath,
227
+ component: path.basename(file),
228
+ });
229
+ }
230
+ });
231
+ });
232
+ }
233
+
234
+ /**
235
+ * Generates organization recommendations
236
+ * @param {Object} analysis - Analysis object
237
+ * @param {Object} config - Configuration
238
+ */
239
+ function generateRecommendations(analysis, config) {
240
+ const recs = analysis.recommendations;
241
+
242
+ // Duplicate selectors
243
+ if (analysis.duplicates.selectors.length > 0) {
244
+ recs.push({
245
+ priority: 'high',
246
+ category: 'duplication',
247
+ title: 'Duplicate selectors detected',
248
+ description: `Found ${analysis.duplicates.selectors.length} selectors used in multiple files`,
249
+ action: 'Extract common selectors to shared utility files or use mixins',
250
+ files: analysis.duplicates.selectors.slice(0, 5),
251
+ });
252
+ }
253
+
254
+ // Duplicate rules
255
+ if (analysis.duplicates.rules.length > 0) {
256
+ recs.push({
257
+ priority: 'high',
258
+ category: 'duplication',
259
+ title: 'Duplicate CSS rules detected',
260
+ description: `Found ${analysis.duplicates.rules.length} identical rule blocks`,
261
+ action: 'Create reusable mixins or utility classes',
262
+ count: analysis.duplicates.rules.length,
263
+ });
264
+ }
265
+
266
+ // Component vs global styles
267
+ if (analysis.summary.componentStyles > 10 && analysis.summary.globalStyles === 0) {
268
+ recs.push({
269
+ priority: 'medium',
270
+ category: 'organization',
271
+ title: 'No global styles file detected',
272
+ description: 'Consider creating a global styles.scss for shared utilities and resets',
273
+ action: 'Create src/styles.scss with @use imports',
274
+ });
275
+ }
276
+
277
+ // Import optimization
278
+ if (analysis.imports.global.length > 3) {
279
+ recs.push({
280
+ priority: 'medium',
281
+ category: 'imports',
282
+ title: 'Optimize global imports',
283
+ description: `${analysis.imports.global.length} files are imported globally across many components`,
284
+ action: 'Consolidate into a single theme file or add to styles.scss',
285
+ files: analysis.imports.global.map(i => i.path),
286
+ });
287
+ }
288
+
289
+ // Theme organization
290
+ if (analysis.summary.themeFiles === 0 && analysis.summary.componentStyles > 5) {
291
+ recs.push({
292
+ priority: 'medium',
293
+ category: 'theming',
294
+ title: 'No theme structure detected',
295
+ description: 'Consider organizing styles following Angular Material theming patterns',
296
+ action: 'Create theme files: _variables.scss, _typography.scss, _theme.scss',
297
+ });
298
+ }
299
+
300
+ // Mixin organization
301
+ if (analysis.duplicates.mixins.length > 0) {
302
+ recs.push({
303
+ priority: 'low',
304
+ category: 'mixins',
305
+ title: 'Duplicate mixin definitions',
306
+ description: `${analysis.duplicates.mixins.length} mixins defined in multiple files`,
307
+ action: 'Consolidate mixins into a shared _mixins.scss file',
308
+ });
309
+ }
310
+ }
311
+
312
+ /**
313
+ * Suggests ideal folder structure
314
+ * @param {Object} analysis - Analysis object
315
+ * @param {Object} config - Configuration
316
+ */
317
+ function suggestStructure(analysis, config) {
318
+ const angularConfigured = config.angular !== undefined;
319
+
320
+ analysis.structure.current = {
321
+ componentStyles: analysis.summary.componentStyles,
322
+ globalStyles: analysis.summary.globalStyles,
323
+ themeFiles: analysis.summary.themeFiles,
324
+ utilityFiles: analysis.summary.utilityFiles,
325
+ mixinFiles: analysis.summary.mixinFiles,
326
+ };
327
+
328
+ analysis.structure.suggested = {
329
+ description: 'Recommended Angular Material theme structure',
330
+ folders: [
331
+ {
332
+ path: 'src/styles/',
333
+ files: [
334
+ '_variables.scss - Design tokens (colors, spacing, typography)',
335
+ '_mixins.scss - Reusable SCSS mixins',
336
+ '_utilities.scss - Utility classes (flex, spacing, etc.)',
337
+ '_theme.scss - Angular Material theme configuration',
338
+ '_typography.scss - Typography styles',
339
+ 'styles.scss - Global entry point',
340
+ ],
341
+ },
342
+ {
343
+ path: 'src/app/components/',
344
+ files: [
345
+ '*.component.scss - Component-scoped styles only',
346
+ 'Use @use for variables/mixins instead of @import',
347
+ ],
348
+ },
349
+ ],
350
+ imports: {
351
+ global: [
352
+ '@use "@angular/material" as mat;',
353
+ '@use "./styles/variables" as vars;',
354
+ '@use "./styles/mixins";',
355
+ '@use "./styles/utilities";',
356
+ ],
357
+ component: ['@use "../../../styles/variables" as vars;', '@use "../../../styles/mixins";'],
358
+ },
359
+ };
360
+ }
361
+
362
+ /**
363
+ * Generates organization report
364
+ * @param {Object} analysis - Analysis results
365
+ * @param {string} format - Report format
366
+ * @returns {string} - Formatted report
367
+ */
368
+ function generateOrganizationReport(analysis, format = 'table') {
369
+ if (format === 'json') {
370
+ return JSON.stringify(analysis, null, 2);
371
+ }
372
+
373
+ if (format === 'markdown') {
374
+ return generateMarkdownOrganizationReport(analysis);
375
+ }
376
+
377
+ // Table format
378
+ const chalk = require('chalk');
379
+ const Table = require('cli-table3');
380
+
381
+ let report = chalk.cyan.bold('\nšŸ“‹ Style Organization Analysis\n\n');
382
+
383
+ // Summary
384
+ report += chalk.white.bold('Summary:\n');
385
+ const summaryTable = new Table({
386
+ head: ['Metric', 'Count'],
387
+ style: { head: ['cyan'] },
388
+ });
389
+
390
+ summaryTable.push(
391
+ ['Total SCSS Files', analysis.summary.totalFiles],
392
+ ['Component Styles', analysis.summary.componentStyles],
393
+ ['Global Styles', analysis.summary.globalStyles],
394
+ ['Theme Files', analysis.summary.themeFiles],
395
+ ['Utility Files', analysis.summary.utilityFiles],
396
+ ['Mixin Files', analysis.summary.mixinFiles]
397
+ );
398
+
399
+ report += summaryTable.toString() + '\n\n';
400
+
401
+ // Duplicates
402
+ if (analysis.duplicates.selectors.length > 0 || analysis.duplicates.rules.length > 0) {
403
+ report += chalk.yellow.bold('Duplication Issues:\n');
404
+ const dupTable = new Table({
405
+ head: ['Type', 'Count', 'Example'],
406
+ style: { head: ['yellow'] },
407
+ });
408
+
409
+ if (analysis.duplicates.selectors.length > 0) {
410
+ const example = analysis.duplicates.selectors[0];
411
+ dupTable.push([
412
+ 'Duplicate Selectors',
413
+ analysis.duplicates.selectors.length,
414
+ `${example.selector} (${example.count} files)`,
415
+ ]);
416
+ }
417
+
418
+ if (analysis.duplicates.rules.length > 0) {
419
+ dupTable.push(['Duplicate Rules', analysis.duplicates.rules.length, 'Identical CSS blocks']);
420
+ }
421
+
422
+ if (analysis.duplicates.mixins.length > 0) {
423
+ dupTable.push([
424
+ 'Duplicate Mixins',
425
+ analysis.duplicates.mixins.length,
426
+ analysis.duplicates.mixins[0].mixin,
427
+ ]);
428
+ }
429
+
430
+ report += dupTable.toString() + '\n\n';
431
+ }
432
+
433
+ // Recommendations
434
+ if (analysis.recommendations.length > 0) {
435
+ report += chalk.green.bold('Recommendations:\n\n');
436
+ analysis.recommendations.forEach((rec, i) => {
437
+ const priorityColor =
438
+ rec.priority === 'high' ? 'red' : rec.priority === 'medium' ? 'yellow' : 'gray';
439
+ report += chalk[priorityColor](`${i + 1}. [${rec.priority.toUpperCase()}] ${rec.title}\n`);
440
+ report += chalk.gray(` ${rec.description}\n`);
441
+ report += chalk.white(` → ${rec.action}\n\n`);
442
+ });
443
+ }
444
+
445
+ // Suggested structure
446
+ report += chalk.blue.bold('Suggested Structure:\n\n');
447
+ analysis.structure.suggested.folders.forEach(folder => {
448
+ report += chalk.cyan(`${folder.path}\n`);
449
+ folder.files.forEach(file => {
450
+ report += chalk.gray(` • ${file}\n`);
451
+ });
452
+ report += '\n';
453
+ });
454
+
455
+ return report;
456
+ }
457
+
458
+ /**
459
+ * Generates markdown report
460
+ * @param {Object} analysis - Analysis results
461
+ * @returns {string} - Markdown formatted report
462
+ */
463
+ function generateMarkdownOrganizationReport(analysis) {
464
+ let md = '# Style Organization Analysis\n\n';
465
+
466
+ md += '## Summary\n\n';
467
+ md += '| Metric | Count |\n';
468
+ md += '|--------|-------|\n';
469
+ md += `| Total SCSS Files | ${analysis.summary.totalFiles} |\n`;
470
+ md += `| Component Styles | ${analysis.summary.componentStyles} |\n`;
471
+ md += `| Global Styles | ${analysis.summary.globalStyles} |\n`;
472
+ md += `| Theme Files | ${analysis.summary.themeFiles} |\n`;
473
+ md += `| Utility Files | ${analysis.summary.utilityFiles} |\n`;
474
+ md += `| Mixin Files | ${analysis.summary.mixinFiles} |\n\n`;
475
+
476
+ if (analysis.recommendations.length > 0) {
477
+ md += '## Recommendations\n\n';
478
+ analysis.recommendations.forEach((rec, i) => {
479
+ md += `### ${i + 1}. ${rec.title} (${rec.priority})\n\n`;
480
+ md += `**Description:** ${rec.description}\n\n`;
481
+ md += `**Action:** ${rec.action}\n\n`;
482
+ });
483
+ }
484
+
485
+ md += '## Suggested Structure\n\n';
486
+ analysis.structure.suggested.folders.forEach(folder => {
487
+ md += `### ${folder.path}\n\n`;
488
+ folder.files.forEach(file => {
489
+ md += `- ${file}\n`;
490
+ });
491
+ md += '\n';
492
+ });
493
+
494
+ return md;
495
+ }
496
+
497
+ module.exports = {
498
+ analyzeStyleOrganization,
499
+ generateOrganizationReport,
500
+ };