cssReset

Clears all CSS rules, caches, and resets the CSS system to initial state.

API

function cssReset(): void

• Returns: void

Basic Usage

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

// Create some styles
const button = css({ background: 'blue', color: 'white' });
const card = css({ padding: '1rem', border: '1px solid #ccc' });

// Later, reset everything
cssReset();

// All previous styles are removed from DOM and memory
// New styles will start with fresh class names (c1, c2, etc.)

Key Concepts

Complete System Reset

The cssReset function provides a complete cleanup of the CSS system:

• Clears all cached CSS rules from memory
• Removes all generated CSS from the DOM
• Resets internal reference counters
• Clears inline memoization cache
• Resets the style counter for class name generation

Testing Scenarios

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

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

  test('should style button correctly', () => {
    const buttonStyle = css({
      background: 'red',
      color: 'white'
    });

    expect(buttonStyle).toBe('c1'); // Predictable class name
  });
});

Memory Management

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

const generateManyStyles = () => {
  for (let i = 0; i < 1000; i++) {
    css({ color: `hsl(${i}, 50%, 50%)` });
  }
};

generateManyStyles();
// Now DOM has many style rules and memory usage is high

cssReset();
// All styles cleared, memory freed, DOM cleaned

Important Considerations

Use Cases

Perfect for:

• Unit tests - Ensure clean state between tests
• Development tools - Reset styles during hot reloading
• Long-running applications - Periodic cleanup to prevent memory leaks
• Dynamic theming - Clear old theme before applying new one

Integration with cssVarsReset

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

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

Safety

• Non-destructive to external styles - Only affects HellaJS-generated CSS
• Preserves user stylesheets - Does not touch external CSS files or <link> tags
• Framework safe - Safe to call at any time without breaking other systems
• Memory efficient - Frees all internal caches and references