tessl/npm-jss

A lib for generating Style Sheets with JavaScript.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

JSS Instance Management

Name: tessl/npm-jss
Author: tessl

Core JSS instance creation and configuration for setting up the CSS-in-JS environment with custom plugins, renderers, and options.

Capabilities

Create Function

Creates a new JSS instance with optional configuration. Each instance maintains its own plugin registry and configuration.

/**
 * Creates a new instance of JSS with optional configuration
 * @param options - Optional configuration object
 * @returns New JSS instance
 */
function create(options?: Partial<JssOptions>): Jss;

Usage Examples:

import { create } from "jss";

// Create default instance
const jss = create();

// Create with custom configuration
const jss = create({
  createGenerateId: customIdGenerator,
  plugins: [myPlugin1, myPlugin2],
  insertionPoint: '#jss-insertion-point'
});

JSS Instance Interface

The main JSS class that orchestrates stylesheet creation and plugin management.

interface Jss {
  /** Create a new stylesheet from style definitions */
  createStyleSheet<Name extends string | number | symbol>(
    styles: Partial<Styles<Name, any, undefined>>,
    options?: StyleSheetFactoryOptions
  ): StyleSheet<Name>;
  
  /** Remove a stylesheet from this JSS instance */
  removeStyleSheet(sheet: StyleSheet): this;
  
  /** Configure the JSS instance with new options */
  setup(options?: Partial<JssOptions>): this;
  
  /** Add plugins to this JSS instance */
  use(...plugins: Plugin[]): this;
  
  /** Create a single CSS rule */
  createRule(style: JssStyle, options?: RuleFactoryOptions): Rule;
  createRule<Name extends string>(name: Name, style: JssStyle, options?: RuleFactoryOptions): Rule;
}

Default JSS Instance

The default export provides a pre-configured JSS instance ready for immediate use.

/** Default JSS instance with standard configuration */
const jss: Jss;

Usage Example:

import jss from "jss";

// Use default instance directly
const sheet = jss.createStyleSheet({
  button: {
    background: 'blue',
    color: 'white'
  }
});

JSS Configuration Options

Configuration object for customizing JSS instance behavior.

interface JssOptions {
  /** Factory function for generating unique class names */
  createGenerateId: CreateGenerateId;
  /** Array of plugins to apply to stylesheets */
  plugins: ReadonlyArray<Plugin>;
  /** Renderer class for DOM manipulation (null for server-side) */
  Renderer?: {new (): Renderer} | null;
  /** DOM insertion point for generated styles */
  insertionPoint: InsertionPoint;
  /** ID generation options */
  id: CreateGenerateIdOptions;
}

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

type CreateGenerateId = (options?: CreateGenerateIdOptions) => GenerateId;
type GenerateId = (rule: Rule, sheet?: StyleSheet<string>) => string;
type InsertionPoint = string | HTMLElement | Comment;

Setup Method

Configures an existing JSS instance with new options. Should not be used twice on the same instance without plugin deduplication logic.

/**
 * Configure the JSS instance with new options
 * @param options - Configuration options to apply
 * @returns The JSS instance for chaining
 */
setup(options?: Partial<JssOptions>): this;

Usage Example:

import jss from "jss";
import myPlugin from "./my-plugin";

jss.setup({
  createGenerateId: () => (rule) => `custom-${rule.key}`,
  plugins: [myPlugin]
});

Plugin Management

Add plugins to extend JSS functionality with custom behavior.

/**
 * Add plugins to this JSS instance
 * @param plugins - One or more plugins to add
 * @returns The JSS instance for chaining
 */
use(...plugins: Plugin[]): this;

Usage Example:

import jss from "jss";
import nested from "jss-plugin-nested";
import camelCase from "jss-plugin-camel-case";

// Add plugins
jss.use(nested(), camelCase());

// Now stylesheets created with this instance will use these plugins
const sheet = jss.createStyleSheet({
  button: {
    backgroundColor: 'blue', // camelCase plugin converts to background-color
    '&:hover': {              // nested plugin handles pseudo-selectors
      backgroundColor: 'red'
    }
  }
});

Rule Creation

Create individual CSS rules outside of a stylesheet context.

/**
 * Create a single CSS rule
 * @param style - Style object for the rule
 * @param options - Rule creation options
 * @returns Created rule instance
 */
createRule(style: JssStyle, options?: RuleFactoryOptions): Rule;

/**
 * Create a named CSS rule
 * @param name - Name/selector for the rule
 * @param style - Style object for the rule
 * @param options - Rule creation options
 * @returns Created rule instance
 */
createRule<Name extends string>(name: Name, style: JssStyle, options?: RuleFactoryOptions): Rule;

interface RuleFactoryOptions {
  selector?: string;
  classes?: object;
  sheet?: StyleSheet;
  index?: number;
  jss?: Jss;
  generateId?: GenerateId;
  Renderer?: Renderer;
}

Usage Example:

import jss from "jss";

// Create anonymous rule
const rule = jss.createRule({
  color: 'blue',
  fontSize: '16px'
});

// Create named rule
const buttonRule = jss.createRule('button', {
  background: 'green',
  border: 'none'
});