StyleSheet Operations

interface StyleSheet<RuleName extends string | number | symbol = string | number | symbol> {
  /** Generated class name mappings for stylesheet rules */
  classes: Classes<RuleName>;
  /** Generated keyframe name mappings */
  keyframes: Keyframes<string>;
  /** Configuration options for this stylesheet */
  options: StyleSheetOptions;
  /** Whether stylesheet is linked to a component */
  linked: boolean;
  /** Whether stylesheet is attached to DOM */
  attached: boolean;
  
  /** Attach stylesheet to the render tree (DOM) */
  attach(): this;
  /** Remove stylesheet from render tree (DOM) */
  detach(): this;
  /** Deploy stylesheet with renderer */
  deploy(): this;
  
  /** Add a rule to the stylesheet */
  addRule(style: JssStyle, options?: Partial<RuleOptions>): Rule;
  addRule(name: RuleName, style: JssStyle, options?: Partial<RuleOptions>): Rule | null;
  /** Replace an existing rule in the stylesheet */
  replaceRule(name: RuleName, style: JssStyle, options?: Partial<RuleOptions>): [Rule | null, Rule | null];
  /** Insert a pre-created rule */
  insertRule(rule: Rule): void;
  /** Create and add multiple rules at once */
  addRules(styles: Partial<Styles<RuleName, any, undefined>>, options?: Partial<RuleOptions>): Rule[];
  
  /** Get a rule by name or selector */
  getRule(nameOrSelector: RuleName | string): Rule;
  /** Delete a rule by name */
  deleteRule(name: RuleName): boolean;
  /** Get index position of a rule */
  indexOf(rule: Rule): number;
  
  /** Update function-based styles with new data */
  update(name: string, data: object, options?: UpdateOptions): this;
  update(data: object, options?: UpdateOptions): this;
  
  /** Convert stylesheet to CSS string */
  toString(options?: ToCssOptions): string;
}

/**
 * Create a new stylesheet from style definitions
 * @param styles - Object containing style definitions
 * @param options - Optional configuration for the stylesheet
 * @returns New StyleSheet instance
 */
createStyleSheet<Name extends string | number | symbol>(
  styles: Partial<Styles<Name, any, undefined>>,
  options?: StyleSheetFactoryOptions
): StyleSheet<Name>;

interface StyleSheetFactoryOptions {
  /** Media query for the stylesheet */
  media?: string;
  /** Metadata identifier for the stylesheet */
  meta?: string;
  /** Index position for stylesheet ordering */
  index?: number;
  /** Whether to link stylesheet to a component */
  link?: boolean;
  /** Existing DOM element to use */
  element?: HTMLStyleElement;
  /** Custom ID generator for this sheet */
  generateId?: GenerateId;
  /** Prefix for generated class names */
  classNamePrefix?: string;
}

import jss from "jss";

// Basic stylesheet creation
const sheet = jss.createStyleSheet({
  button: {
    background: 'blue',
    color: 'white',
    border: 'none',
    padding: '10px 20px'
  },
  header: {
    fontSize: '24px',
    fontWeight: 'bold'
  }
});

// With options
const responsiveSheet = jss.createStyleSheet({
  container: {
    maxWidth: '1200px',
    margin: '0 auto'
  }
}, {
  media: '(min-width: 768px)',
  meta: 'responsive-layout',
  classNamePrefix: 'my-app-'
});

/**
 * Attach stylesheet to the render tree (DOM)
 * @returns The stylesheet instance for chaining
 */
attach(): this;

/**
 * Remove stylesheet from render tree (DOM)
 * @returns The stylesheet instance for chaining
 */
detach(): this;

const sheet = jss.createStyleSheet({
  button: { background: 'blue' }
});

// Attach to DOM - styles become active
sheet.attach();

// Later, remove from DOM - styles become inactive
sheet.detach();

// Check attachment status
if (sheet.attached) {
  console.log('Stylesheet is active');
}

/**
 * Add a rule to the stylesheet
 * @param style - Style object for anonymous rule
 * @param options - Rule configuration options
 * @returns Created rule instance
 */
addRule(style: JssStyle, options?: Partial<RuleOptions>): Rule;

/**
 * Add a named rule to the stylesheet
 * @param name - Name for the rule (becomes class name)
 * @param style - Style object for the rule
 * @param options - Rule configuration options
 * @returns Created rule instance or null if failed
 */
addRule(name: RuleName, style: JssStyle, options?: Partial<RuleOptions>): Rule | null;

/**
 * Add multiple rules at once
 * @param styles - Object containing multiple style definitions
 * @param options - Rule configuration options
 * @returns Array of created rule instances
 */
addRules(styles: Partial<Styles<RuleName, any, undefined>>, options?: Partial<RuleOptions>): Rule[];

/**
 * Replace an existing rule
 * @param name - Name of rule to replace
 * @param style - New style object
 * @param options - Rule configuration options
 * @returns Tuple of [old rule, new rule]
 */
replaceRule(name: RuleName, style: JssStyle, options?: Partial<RuleOptions>): [Rule | null, Rule | null];

/**
 * Delete a rule by name
 * @param name - Name of rule to delete
 * @returns True if rule was deleted from DOM
 */
deleteRule(name: RuleName): boolean;

const sheet = jss.createStyleSheet({
  button: { background: 'blue' }
});
sheet.attach();

// Add new rule dynamically
sheet.addRule('newButton', {
  background: 'red',
  color: 'white'
});

// Add multiple rules
sheet.addRules({
  header: { fontSize: '24px' },
  footer: { fontSize: '12px' }
});

// Replace existing rule
sheet.replaceRule('button', {
  background: 'green',
  border: '1px solid black'
});

// Delete a rule
sheet.deleteRule('newButton');

/**
 * Get a rule by name or selector
 * @param nameOrSelector - Rule name or CSS selector
 * @returns Rule instance if found
 */
getRule(nameOrSelector: RuleName | string): Rule;

/**
 * Get index position of a rule
 * @param rule - Rule instance to find
 * @returns Index position or -1 if not found
 */
indexOf(rule: Rule): number;

const sheet = jss.createStyleSheet({
  button: { background: 'blue' },
  header: { fontSize: '24px' }
});

// Get rule by name
const buttonRule = sheet.getRule('button');
const headerRule = sheet.getRule('header');

// Get rule position
const position = sheet.indexOf(buttonRule);
console.log(`Button rule is at position ${position}`);

/**
 * Update specific rule with new data
 * @param name - Name of rule to update
 * @param data - New data object for function-based styles
 * @param options - Update configuration options
 * @returns The stylesheet instance for chaining
 */
update(name: string, data: object, options?: UpdateOptions): this;

/**
 * Update all rules with new data
 * @param data - New data object for function-based styles
 * @param options - Update configuration options
 * @returns The stylesheet instance for chaining
 */
update(data: object, options?: UpdateOptions): this;

interface UpdateOptions {
  /** Whether to process the updated styles through plugins */
  process?: boolean;
  /** Whether to force update even if data hasn't changed */
  force?: boolean;
}

// Stylesheet with function-based styles
const sheet = jss.createStyleSheet({
  button: (data) => ({
    background: data.primary ? 'blue' : 'gray',
    fontSize: data.size === 'large' ? '18px' : '14px'
  }),
  text: (data) => ({
    color: data.theme === 'dark' ? 'white' : 'black'
  })
});
sheet.attach();

// Update with new data
sheet.update({
  primary: true,
  size: 'large',
  theme: 'dark'
});

// Update specific rule
sheet.update('button', { primary: false });

/**
 * Convert stylesheet to CSS string
 * @param options - CSS formatting options
 * @returns CSS string representation
 */
toString(options?: ToCssOptions): string;

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;
}

const sheet = jss.createStyleSheet({
  button: {
    background: 'blue',
    color: 'white'
  }
});

// Get CSS string
const css = sheet.toString();
console.log(css);
// Output: ".button-0-1-2 { background: blue; color: white; }"

// Formatted CSS
const formattedCss = sheet.toString({ format: true, indent: 2 });
console.log(formattedCss);
// Output:
// .button-0-1-2 {
//   background: blue;
//   color: white;
// }

/** Generated class name mappings for stylesheet rules */
classes: Classes<RuleName>;

/** Generated keyframe name mappings */
keyframes: Keyframes<string>;

type Classes<Name extends string | number | symbol = string> = Record<Name, string>;
type Keyframes<Name extends string = string> = Record<Name, string>;

const sheet = jss.createStyleSheet({
  button: { background: 'blue' },
  '@keyframes slideIn': {
    from: { transform: 'translateX(-100%)' },
    to: { transform: 'translateX(0)' }
  }
});
sheet.attach();

// Use generated class names
const buttonClass = sheet.classes.button; // "button-0-1-2"
const slideInKeyframe = sheet.keyframes.slideIn; // "slideIn-0-1-3"

// Apply to DOM elements
document.getElementById('myButton').className = buttonClass;