cssRemove

Removes specific CSS rules and decrements their reference count for memory management.

API

function cssRemove(obj: CSSObject, options?: CSSOptions): void

• obj: CSS object to remove (must match exactly the object used in css())
• options: Optional configuration object (must match the options used in css())
  • scoped: CSS selector scope used when creating the style
  • name: Custom class name used when creating the style
  • global: Whether the style was created with global scope
• Returns: void

Basic Usage

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

const buttonStyle = css({
  background: 'blue',
  color: 'white',
  padding: '0.5rem 1rem'
});

// Use the style...
<button class={buttonStyle}>Click me</button>

// Later, remove it when no longer needed
cssRemove({
  background: 'blue',
  color: 'white',
  padding: '0.5rem 1rem'
});

Key Concepts

Reference Counting

The cssRemove function provides precise control over CSS rule lifecycle:

• Reference Counting: Decrements the reference count for the specified style
• Automatic Cleanup: Removes CSS rules from DOM when reference count reaches zero
• Memory Management: Frees memory used by unused styles
• Cache Cleanup: Clears the inline cache for the removed style

Reference Counting Example

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

const sharedStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '0.5rem'
};

// Multiple components use the same style
const classA = css(sharedStyle); // Reference count: 1
const classB = css(sharedStyle); // Reference count: 2 (cached, same class)
const classC = css(sharedStyle); // Reference count: 3 (cached, same class)

// Remove one reference
cssRemove(sharedStyle); // Reference count: 2 (CSS remains in DOM)

// Remove another reference
cssRemove(sharedStyle); // Reference count: 1 (CSS remains in DOM)

// Remove final reference
cssRemove(sharedStyle); // Reference count: 0 (CSS removed from DOM)

With Options

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

const scopedStyle = css({
  '.header': { fontSize: '1.5rem' },
  '.content': { padding: '1rem' }
}, { scoped: '.my-component' });

// Later remove with matching options
cssRemove({
  '.header': { fontSize: '1.5rem' },
  '.content': { padding: '1rem' }
}, { scoped: '.my-component' });

Component Cleanup

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

class MyComponent {
  constructor() {
    this.styles = [
      css({ background: 'white', padding: '1rem' }),
      css({ color: 'blue', fontWeight: 'bold' }),
      css({ border: '1px solid #ccc', borderRadius: '4px' })
    ];
  }

  destroy() {
    // Clean up all component styles
    this.styles.forEach(styleObj => {
      cssRemove(styleObj);
    });
  }
}

Dynamic Style Management

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

const ThemeManager = {
  currentTheme: null,

  applyTheme(colors) {
    // Remove old theme if exists
    if (this.currentTheme) {
      cssRemove(this.currentTheme);
    }

    // Apply new theme
    this.currentTheme = {
      background: colors.background,
      color: colors.text,
      borderColor: colors.border
    };

    return css(this.currentTheme, { global: true });
  }
};

// Switch themes
ThemeManager.applyTheme({ background: '#fff', text: '#000', border: '#ccc' });
ThemeManager.applyTheme({ background: '#000', text: '#fff', border: '#444' });

Important Considerations

Exact Matching Required

CSS objects and options must match exactly for proper removal:

The CSS object and options must match exactly:

// ✓ Correct - exact match
const style = { color: 'red', fontSize: '16px' };
css(style);
cssRemove(style); // Will work

// ✗ Incorrect - different object reference
css({ color: 'red', fontSize: '16px' });
cssRemove({ color: 'red', fontSize: '16px' }); // May not work reliably

// ✓ Better - use consistent objects
const BUTTON_STYLE = { color: 'red', fontSize: '16px' };
css(BUTTON_STYLE);
cssRemove(BUTTON_STYLE); // Will work

Use Cases

Perfect for:

• Component unmounting - Clean up styles when components are destroyed
• Dynamic styling - Remove old styles before applying new ones
• Long-running applications - Prevent CSS accumulation over time
• Testing - Ensure clean state between test runs

Global Styles

// Global styles require matching global flag
css(globalStyles, { global: true });
cssRemove(globalStyles, { global: true }); // Must include global: true