cssVarsReset

Clears all CSS variables, caches, and reactive effects, resetting the CSS variables system to initial state.

API

function cssVarsReset(): void

• Returns: void

Basic Usage

import { cssVars, cssVarsReset } from '@hellajs/css';

// Create some CSS variables
const theme = cssVars({
  colors: { primary: '#3b82f6', secondary: '#64748b' },
  spacing: { base: '1rem', large: '2rem' }
});

// Later, reset everything
cssVarsReset();

// All CSS variables are removed from DOM and memory
// All reactive effects are disposed

Key Concepts

Complete System Reset

The cssVarsReset function provides complete cleanup of the CSS variables system:

• CSS Variables: Removes all CSS custom properties from the DOM
• Cache Cleanup: Clears all cached variable objects and hash mappings
• Reactive Effects: Disposes all active reactive effects created by cssVars
• Memory Management: Frees all internal references and prevents memory leaks
• DOM Cleanup: Removes the hella-vars style element

Testing Scenarios

import { cssVars, cssVarsReset } from '@hellajs/css';

describe('Theme Tests', () => {
  beforeEach(() => {
    cssVarsReset(); // Clean slate for each test
  });

  test('should create theme variables', () => {
    const theme = cssVars({
      colors: { primary: '#ff0000' }
    });

    expect(theme.colors.primary).toBe('var(--colors-primary)');

    // Verify CSS was injected
    const varsEl = document.getElementById('hella-vars');
    expect(varsEl.textContent).toContain('--colors-primary: #ff0000');
  });
});

Reactive Effects Cleanup

import { signal } from '@hellajs/core';
import { cssVars, cssVarsReset } from '@hellajs/css';

const ReactiveTheme = () => {
  const primaryColor = signal('#3b82f6');
  const isDark = signal(false);

  // Create reactive CSS variables
  const theme = cssVars({
    colors: {
      primary: primaryColor,
      background: () => isDark() ? '#1a1a1a' : '#ffffff'
    }
  });

  // Later, reset cleans up the reactive effects
  cssVarsReset();

  // Signal changes no longer update CSS variables
  primaryColor('#ff0000'); // No effect after reset
  isDark(true);           // No effect after reset
};

Memory Management

import { signal } from '@hellajs/core';
import { cssVars, cssVarsReset } from '@hellajs/css';

const createManyThemes = () => {
  for (let i = 0; i < 100; i++) {
    const colorSignal = signal(`hsl(${i * 3.6}, 50%, 50%)`);

    cssVars({
      theme: {
        primary: colorSignal,
        secondary: () => adjustBrightness(colorSignal(), 0.8)
      }
    });
  }
};

createManyThemes();
// Now we have 100 reactive effects and many cached variables

cssVarsReset();
// All effects disposed, all caches cleared, memory freed

Important Considerations

Use Cases

Perfect for:

• Unit tests - Ensure clean state between tests
• Development tools - Reset during hot module reloading
• Theme switching - Clear old theme before applying new one
• Memory leak prevention - Regular cleanup in complex applications

Integration with cssReset

import { cssReset, cssVarsReset } from '@hellajs/css';

// Complete CSS system reset
const resetAllCSS = () => {
  cssReset();      // Clear CSS rules and styles
  cssVarsReset();  // Clear CSS variables and effects
};

Reactive Effects Management

Automatically disposes all reactive effects created by cssVars:

import { signal } from '@hellajs/core';
import { cssVars, cssVarsReset } from '@hellajs/css';

const themeColor = signal('#blue');

// This creates internal reactive effects
const theme = cssVars({
  primary: themeColor,
  secondary: () => darken(themeColor(), 0.2)
});

// cssVarsReset automatically disposes these effects
cssVarsReset();

// Signals can still be used, but won't update CSS variables
themeColor('#red'); // No CSS update after reset

Safety

• Non-destructive - Only affects HellaJS CSS variables
• Signal preservation - Does not affect original signals, only CSS effects
• Isolation - Does not impact other CSS systems or frameworks
• Memory efficient - Immediately frees all allocated memory