Utility Functions

/**
 * Convert JavaScript values to CSS strings
 * @param value - JavaScript value to convert
 * @returns CSS string representation
 */
function toCssValue(value: JssValue): string;

type JssValue = 
  | (string & {})
  | (number & {})
  | Array<string | number | Array<string | number> | '!important'>
  | null
  | false;

import { toCssValue } from "jss";

// String values
console.log(toCssValue('red')); // "red"
console.log(toCssValue('10px')); // "10px"

// Number values
console.log(toCssValue(42)); // "42"
console.log(toCssValue(0)); // "0"

// Array values (space-separated)
console.log(toCssValue(['10px', '20px'])); // "10px 20px"
console.log(toCssValue([0, 'auto'])); // "0 auto"

// Nested arrays (comma-separated groups)
console.log(toCssValue([['10px', '20px'], ['30px', '40px']])); 
// "10px 20px, 30px 40px"

// Important flag
console.log(toCssValue(['red', '!important'])); // "red !important"

// Falsy values
console.log(toCssValue(null)); // ""
console.log(toCssValue(false)); // ""

/**
 * Extract function-based styles from a styles object
 * @param styles - Styles object potentially containing functions
 * @returns Object with only function-based styles, or null if none found
 */
function getDynamicStyles(styles: Styles): Styles | null;

type Styles<
  Name extends string | number | symbol = string,
  Props = unknown,
  Theme = undefined
> = Record<
  Name,
  | JssStyle<Props, Theme>
  | Array<JssStyle<Props, Theme>>
  | string
  | Func<Props, Theme, JssStyle<undefined, undefined> | string | null | undefined>
  | MinimalObservable<JssStyle | string | null | undefined>
>;

import { getDynamicStyles } from "jss";

// Mixed static and dynamic styles
const styles = {
  button: {
    padding: '10px',           // static
    background: 'blue'         // static
  },
  text: (data) => ({          // dynamic function
    color: data.theme === 'dark' ? 'white' : 'black',
    fontSize: data.size || '14px'
  }),
  header: {
    fontSize: '24px'           // static
  },
  dynamic: (props) => ({      // dynamic function
    width: props.width,
    height: props.height
  })
};

// Extract only dynamic styles
const dynamicOnly = getDynamicStyles(styles);
console.log(dynamicOnly);
// {
//   text: (data) => ({ color: ..., fontSize: ... }),
//   dynamic: (props) => ({ width: ..., height: ... })
// }

// No dynamic styles
const staticStyles = {
  button: { background: 'red' },
  text: { color: 'black' }
};

const noDynamic = getDynamicStyles(staticStyles);
console.log(noDynamic); // null

/**
 * Create a CSS rule with specified options
 * @param name - Rule name/selector
 * @param decl - Style declaration object
 * @param options - Rule configuration options
 * @returns Created Rule instance
 */
function createRule<D>(name: string, decl: JssStyle, options: RuleOptions): Rule;

interface RuleOptions {
  selector?: string;
  sheet?: StyleSheet;
  index?: number;
  parent?: ContainerRule | StyleSheet;
  classes: Classes;
  jss: Jss;
  generateId: GenerateId;
  Renderer: Renderer;
}

import { createRule } from "jss";
import jss from "jss";

// Create rule with basic options
const rule = createRule('myButton', {
  background: 'blue',
  color: 'white',
  '&:hover': {
    background: 'red'
  }
}, {
  classes: {},
  jss: jss,
  generateId: jss.generateId,
  Renderer: jss.options.Renderer
});

console.log(rule.toString());
// Output: CSS string for the rule

/**
 * Create a function that generates unique identifiers for CSS rules
 * @param options - ID generation configuration
 * @returns Function that generates IDs for rules
 */
function createGenerateId(options?: CreateGenerateIdOptions): GenerateId;

interface CreateGenerateIdOptions {
  /** Whether to minify generated class names */
  minify?: boolean;
}

type GenerateId = (rule: Rule, sheet?: StyleSheet<string>) => string;

import { createGenerateId } from "jss";

// Default ID generator
const generateId = createGenerateId();

// Minified ID generator
const minifiedGenerator = createGenerateId({ minify: true });

// Custom JSS instance with custom ID generator
import { create } from "jss";

const customJss = create({
  createGenerateId: () => createGenerateId({ minify: true })
});

// Use with stylesheet
const sheet = customJss.createStyleSheet({
  button: { background: 'blue' }
});

console.log(sheet.classes.button); // Minified class name like "a0"

/**
 * Boolean constant indicating if browser supports CSS Typed Object Model
 * @type True if CSSOM is supported, false otherwise
 */
const hasCSSTOMSupport: boolean;

import { hasCSSTOMSupport } from "jss";

// Check for CSSOM support
if (hasCSSTOMSupport) {
  console.log('Browser supports CSS Typed Object Model');
  // Can use optimized CSS value setting
} else {
  console.log('Fallback to string-based CSS manipulation');
  // Use traditional string-based CSS manipulation
}

// Conditional optimization
const sheet = jss.createStyleSheet({
  optimized: {
    // Styles that benefit from CSSOM
    transform: hasCSSTOMSupport ? 
      'translateX(100px)' : 
      'translate(100px, 0)'
  }
});

/** Base type for CSS values in JSS */
type JssValue =
  | (string & {})                                                    // CSS strings
  | (number & {})                                                    // Numeric values
  | Array<string | number | Array<string | number> | '!important'>  // Arrays for multi-value
  | null                                                             // Null removes property
  | false;                                                           // False removes property

/** Function type for dynamic styles */
type Func<P, T, R> = T extends undefined ? 
  (data: P) => R : 
  (data: P & {theme: T}) => R;

/** Observable interface for reactive values */
interface MinimalObservable<T> {
  subscribe(nextOrObserver: ((value: T) => void) | {next: (value: T) => void}): {
    unsubscribe: () => void
  }
}

import { toCssValue, getDynamicStyles, createGenerateId } from "jss";

function processCssValues(styles) {
  const processed = {};
  
  for (const [key, value] of Object.entries(styles)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      // Recursively process nested objects
      processed[key] = processCssValues(value);
    } else {
      // Convert to CSS value
      processed[key] = toCssValue(value);
    }
  }
  
  return processed;
}

// Usage
const rawStyles = {
  button: {
    margin: [10, 20, 10, 20],
    color: null, // Will be removed
    border: ['1px', 'solid', 'red']
  }
};

const processedStyles = processCssValues(rawStyles);
console.log(processedStyles);
// {
//   button: {
//     margin: "10 20 10 20",
//     border: "1px solid red"
//     // color omitted (was null)
//   }
// }

import { getDynamicStyles } from "jss";

class StylesManager {
  constructor(jss, initialStyles) {
    this.jss = jss;
    this.staticStyles = { ...initialStyles };
    this.dynamicStyles = getDynamicStyles(initialStyles);
    this.sheet = null;
    this.currentData = {};
  }
  
  update(data) {
    this.currentData = { ...this.currentData, ...data };
    
    if (this.dynamicStyles) {
      // Compute dynamic styles with current data
      const computedDynamic = {};
      for (const [key, styleFn] of Object.entries(this.dynamicStyles)) {
        computedDynamic[key] = styleFn(this.currentData);
      }
      
      // Merge with static styles
      const allStyles = { ...this.staticStyles, ...computedDynamic };
      
      // Update or create stylesheet
      if (this.sheet) {
        this.sheet.update(this.currentData);
      } else {
        this.sheet = this.jss.createStyleSheet(allStyles);
        this.sheet.attach();
      }
    }
  }
  
  getClasses() {
    return this.sheet ? this.sheet.classes : {};
  }
}

// Usage
const stylesManager = new StylesManager(jss, {
  button: {
    padding: '10px' // static
  },
  text: (data) => ({ // dynamic
    color: data.theme === 'dark' ? 'white' : 'black'
  })
});

stylesManager.update({ theme: 'dark' });
const classes = stylesManager.getClasses();