Sheet Registries

class SheetsRegistry {
  /** Array of registered stylesheets */
  registry: StyleSheet[];
  
  /** Current highest index number */
  readonly index: number;
  
  /** Register a stylesheet in the registry */
  add<RuleName extends string | number | symbol>(sheet: StyleSheet<RuleName>): void;
  
  /** Reset the registry, removing all stylesheets */
  reset(): void;
  
  /** Remove a stylesheet from the registry */
  remove<RuleName extends string | number | symbol>(sheet: StyleSheet<RuleName>): void;
  
  /** Convert all stylesheets to a single CSS string */
  toString(options?: ToCssOptions): string;
}

import { SheetsRegistry } from "jss";
import jss from "jss";

// Create a custom registry
const registry = new SheetsRegistry();

// Create stylesheets
const buttonSheet = jss.createStyleSheet({
  button: { background: 'blue' }
});

const headerSheet = jss.createStyleSheet({
  header: { fontSize: '24px' }
});

// Add to registry
registry.add(buttonSheet);
registry.add(headerSheet);

// Get combined CSS for server-side rendering
const css = registry.toString();
console.log(css);

// Check current index
console.log(`Registry has ${registry.index} stylesheets`);

// Remove stylesheet
registry.remove(buttonSheet);

// Clear all
registry.reset();

class SheetsManager {
  /** Number of managed stylesheets */
  readonly size: number;
  
  /** Retrieve stylesheet by key */
  get(key: object): StyleSheet | null;
  
  /** Add stylesheet with associated key */
  add(key: object, sheet: StyleSheet): void;
  
  /** Increment references and attach sheet to DOM */
  manage(key: object): StyleSheet | null;
  
  /** Decrement references and detach sheet when count reaches zero */
  unmanage(key: object): void;
}

import { SheetsManager } from "jss";
import jss from "jss";

// Create manager (typically used in React-like frameworks)
const manager = new SheetsManager();

// Component or theme objects as keys
const ComponentA = { name: 'ComponentA' };
const ComponentB = { name: 'ComponentB' };

// Create stylesheets
const sheetA = jss.createStyleSheet({
  root: { color: 'blue' }
});

const sheetB = jss.createStyleSheet({
  container: { padding: '20px' }
});

// Add sheets with keys
manager.add(ComponentA, sheetA);
manager.add(ComponentB, sheetB);

// Manage lifecycle - first call attaches to DOM
const managedSheetA = manager.manage(ComponentA); // Sheet attached
console.log(managedSheetA === sheetA); // true

// Multiple manages increment reference count
manager.manage(ComponentA); // Ref count: 2, still attached

// Unmanage decrements reference count
manager.unmanage(ComponentA); // Ref count: 1, still attached
manager.unmanage(ComponentA); // Ref count: 0, sheet detached

// Retrieve sheet
const retrieved = manager.get(ComponentA);
console.log(retrieved === sheetA); // true

// Check manager size
console.log(`Manager has ${manager.size} sheets`);

/** Global sheets registry instance */
const sheets: SheetsRegistry;

import { sheets } from "jss";
import jss from "jss";

// Create and attach stylesheet
const sheet = jss.createStyleSheet({
  button: { background: 'red' }
});
sheet.attach(); // Automatically added to global registry

// Access global registry
console.log(`Global registry has ${sheets.index} sheets`);

// Get all CSS from global registry
const globalCss = sheets.toString();
console.log(globalCss);

// Note: sheets are automatically added to global registry when attached
// via DomRenderer, typically you don't need to manually manage this

import { SheetsRegistry, create } from "jss";

// Server-side request handler
function handleRequest(req, res) {
  // Create isolated registry for this request
  const sheets = new SheetsRegistry();
  
  // Create JSS instance for this request
  const jss = create();
  
  // Create stylesheets during rendering
  const appSheet = jss.createStyleSheet({
    app: { fontFamily: 'Arial' }
  });
  
  const buttonSheet = jss.createStyleSheet({
    button: { background: 'blue' }
  });
  
  // Register sheets
  sheets.add(appSheet);
  sheets.add(buttonSheet);
  
  // Render your app here...
  const appHtml = renderApp();
  
  // Get all CSS for this request
  const css = sheets.toString();
  
  // Return HTML with embedded CSS
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <style>${css}</style>
      </head>
      <body>
        ${appHtml}
      </body>
    </html>
  `;
  
  res.send(html);
}

interface ToCssOptions {
  /** Number of spaces for indentation */
  indent?: number;
  /** Whether to format CSS with line breaks */
  format?: boolean;
  /** Whether to include empty rules */
  allowEmpty?: boolean;
  /** Filter by attached status (SheetsRegistry only) */
  attached?: boolean;
}

import { SheetsRegistry } from "jss";

const registry = new SheetsRegistry();
// ... add sheets ...

// Formatted CSS output
const formattedCss = registry.toString({
  format: true,
  indent: 2,
  allowEmpty: false
});

// Only attached sheets
const attachedCss = registry.toString({
  attached: true
});

// Minified CSS
const minifiedCss = registry.toString({
  format: false
});

import React from 'react';
import { SheetsManager } from 'jss';

// Create manager at module level
const manager = new SheetsManager();

function MyComponent({ theme }) {
  const [sheet, setSheet] = React.useState(null);
  
  React.useEffect(() => {
    // Use theme object as key
    let managedSheet = manager.get(theme);
    
    if (!managedSheet) {
      // Create new sheet for this theme
      const newSheet = jss.createStyleSheet({
        root: {
          color: theme.primaryColor,
          background: theme.backgroundColor
        }
      });
      
      manager.add(theme, newSheet);
      managedSheet = newSheet;
    }
    
    // Manage lifecycle
    const activeSheet = manager.manage(theme);
    setSheet(activeSheet);
    
    return () => {
      // Cleanup
      manager.unmanage(theme);
    };
  }, [theme]);
  
  if (!sheet) return null;
  
  return (
    <div className={sheet.classes.root}>
      Themed component
    </div>
  );
}

class RuleList {
  /** Add a rule to the list */
  add(name: string, decl: JssStyle, options?: RuleOptions): Rule | null;
  
  /** Replace an existing rule */
  replace(name: string, decl: JssStyle, options?: RuleOptions): Rule | null;
  
  /** Get a rule by name or selector */
  get(nameOrSelector: string): Rule;
  
  /** Remove a rule from the list */
  remove(rule: Rule): void;
  
  /** Get index of a rule */
  indexOf(rule: Rule): number;
  
  /** Process all rules through plugins */
  process(): void;
  
  /** Register a rule with class name mapping */
  register(rule: Rule, className?: string): void;
  
  /** Unregister a rule */
  unregister(rule: Rule): void;
  
  /** Update rules with new data */
  update(name: string, data: {}): void;
  update(data: {}): void;
  
  /** Convert all rules to CSS string */
  toString(options?: ToCssOptions): string;
}

import { RuleList } from "jss";

// Advanced usage - typically handled internally by StyleSheet
const ruleList = new RuleList({
  classes: {},
  generateId: jss.generateId,
  Renderer: jss.options.Renderer,
  jss: jss
});

// Add rules
ruleList.add('button', { background: 'blue' });
ruleList.add('text', { color: 'red' });

// Get CSS output
const css = ruleList.toString();