# CSS Build System

This directory contains the modular CSS source files for the TaskNotes plugin. The main `styles.css` file is generated from these source files during the build process.

## File Structure

### Core System Files
- `variables.css` - CSS custom properties and design system variables
- `utilities.css` - Utility classes for layout, spacing, typography, and states
- `base.css` - Basic styles, animations, card components, and layout
- `components.css` - Reusable UI components, utilities, and modals

### BEM Component Files (NEW)
- `task-card-bem.css` - BEM TaskCard component with proper scoping
- `note-card-bem.css` - BEM NoteCard component with proper scoping
- `filter-bar-bem.css` - BEM FilterBar component with proper scoping
- `modal-bem.css` - BEM Modal components with proper scoping

### View-Specific Files (NEW)
- `task-list-view.css` - BEM TaskListView component
- `calendar-view.css` - BEM CalendarView component
- `kanban-view.css` - BEM KanbanView component
- `agenda-view.css` - BEM AgendaView component
- `notes-view.css` - BEM NotesView component
- `pomodoro-view.css` - BEM PomodoroView component
- `pomodoro-stats-view.css` - BEM PomodoroStatsView component
- `settings-view.css` - BEM SettingsView component

### Legacy Files (Remaining)
- `pomodoro.css` - Pomodoro view specific styles (to be deprecated)
- `settings.css` - Settings page styles (to be deprecated)
- `tasks-legacy.css` - Legacy task styles for backwards compatibility

### Documentation Files
- `index.css` - Documentation file (not included in build)
- `README.md` - This documentation file
- `UTILITIES.md` - Utility class documentation
- `UTILITY-USAGE-GUIDE.md` - Guide for using utility classes

## Development Workflow

### Making Changes
1. Edit the appropriate CSS file in this directory
2. Run `npm run build-css` to regenerate the main `styles.css` file
3. Test your changes in the application
4. Commit your changes to the source files (the generated `styles.css` is ignored by git)

### Build Commands
- `npm run build-css` - Build CSS only
- `npm run dev` - Build CSS + start development server
- `npm run build` - Build CSS + full production build

### File Loading Order
The CSS files are concatenated in dependency order:
1. `variables.css` (CSS custom properties - loaded first)
2. `utilities.css` (utility classes)
3. `base.css` (foundational styles)
4. `task-card-bem.css` (BEM TaskCard component)
5. `note-card-bem.css` (BEM NoteCard component)
6. `filter-bar-bem.css` (BEM FilterBar component)
7. `modal-bem.css` (BEM Modal components)
8. View-specific BEM files (task-list-view, calendar-view, kanban-view, etc.)
9. `components.css` (general components)
10. Legacy files (`pomodoro.css`, `settings.css`)

## CI/CD Process

The GitHub Actions workflow automatically:
1. Builds the CSS from source files during release
2. Includes the generated `styles.css` in the release artifacts
3. Ensures the plugin has all necessary files for distribution

## Important Notes

- **Never edit `styles.css` directly** - it will be overwritten during builds
- The `styles.css` file is **not tracked in git** - only source files are committed
- All CSS variables should be defined in `variables.css`
- Follow the existing patterns and naming conventions
- Use CSS custom properties (variables) instead of hardcoded values
- Test changes across different views (Calendar, Tasks, Kanban, etc.)

## Troubleshooting

If styles aren't updating:
1. Run `npm run build-css` to regenerate the CSS
2. Check that your changes are in the correct source file
3. Verify the build completed without errors
4. Clear browser cache if testing in development

If the build fails:
1. Check the console output for specific error messages
2. Verify all CSS files exist and are readable
3. Check for syntax errors in your CSS
4. Ensure file paths in `build-css.mjs` are correct