StyleSheet

Kind: global class
Properties

• StyleSheet
  • new StyleSheet(styles, [options])
  • instance
    • .preinitialize(styles, [options]) ⇒ void
    • .generateUid() ⇒ string
    • .generateClassName(className, index) ⇒ string
    • .render() ⇒ string
    • .toString() ⇒ string
    • .shouldAttachToDOM() ⇒ boolean
    • .attach() ⇒ StyleSheet
    • .destroy() ⇒ StyleSheet
  • static
    • .prefix
    • .indent
    • .registry
    • .debug
    • .toString() ⇒ string
    • .toCSS() ⇒ string
    • .destroy()

new StyleSheet(styles, [options])

The StyleSheet class is responsible for creating and managing a CSS stylesheet. It takes a styles object and an optional options object as input, processes the styles, and generates a CSS stylesheet that can be attached to the DOM, destroyed, or rendered as a string for server-side rendering.

Example

// Create a new StyleSheet instance with a styles object.
const instance = new StyleSheet({
    root: {
        color: 'black'
    }
});

// Attach the StyleSheet instance to the DOM.
instance.attach();

// Retrieve the generated classes object from the instance.
const { classes } = instance;

// Use the generated class name in your component.
function Header() {
    return <h1 className={classes.root}>Hello World</h1>;
}

styleSheet.preinitialize(styles, [options]) ⇒ void

Hook run at the very start of the constructor, before styles and options are applied and before renderers, prefix, uid and classes are computed. Does nothing by default. Override it in a subclass to run setup logic or define instance properties such as prefix, attributes or renderers. Values set here are still overridden by the matching options.

Kind: instance method of StyleSheet

styleSheet.generateUid() ⇒ string

Generate a stable unique identifier. May be overridden by options.generateUid.

Kind: instance method of StyleSheet
Returns: string - The unique identifier.

styleSheet.generateClassName(className, index) ⇒ string

Generate a unique class name. Transform local selectors that are classes to unique class names to be used as class names in the styles object. May be overridden by options.generateClassName or by extending the class.

Kind: instance method of StyleSheet
Returns: string - The unique class name.

styleSheet.render() ⇒ string

Apply the renderers to the styles object. Renderers are applied in order, starting from this.styles, with each renderer receiving the previous one's output and called with the instance as this. It will return a string ready to be added to the style element.

Kind: instance method of StyleSheet
Returns: string - The styles object as a string.

styleSheet.toString() ⇒ string

Render the StyleSheet as a style element string. Used for server-side rendering.

Kind: instance method of StyleSheet
Returns: string - The instance as a string.

styleSheet.shouldAttachToDOM() ⇒ boolean

Check if the StyleSheet should be added to the DOM. By default, it returns true if running in a browser environment and no style element with the same data-fun-uid attribute exists in the DOM. This prevents duplicate style elements and ensures proper behavior for server-side rendering. May be overridden by options.shouldAttachToDOM.

Kind: instance method of StyleSheet
Returns: boolean - True if the StyleSheet should be added to the DOM, false otherwise.

styleSheet.attach() ⇒ StyleSheet

Add the instance to the registry and if we are in the browser, attach it to the DOM.

Kind: instance method of StyleSheet
Returns: StyleSheet - The instance.

styleSheet.destroy() ⇒ StyleSheet

Destroy the instance and remove it from the registry and from the DOM, if it's present.

Kind: instance method of StyleSheet
Returns: StyleSheet - The instance.

StyleSheet.prefix

Kind: static property of StyleSheet
Default: fun
Properties

StyleSheet.indent

Kind: static property of StyleSheet
Default: ' '
Properties

StyleSheet.registry

Kind: static property of StyleSheet
Properties

StyleSheet.debug

Kind: static property of StyleSheet
Default: __DEV__
Properties

StyleSheet.toString() ⇒ string

Render all instances in the registry as a string, including the style tags. Can be used to insert style tags in an HTML template for server-side rendering.

Kind: static method of StyleSheet
Returns: string - All instances in the registry as a string.

StyleSheet.toCSS() ⇒ string

Render all instances in the registry as CSS string. Can be used to generate an external CSS file.

Kind: static method of StyleSheet
Returns: string - All instances in the registry rendered as CSS string.

StyleSheet.destroy()

Destroy all instances in the registry and remove them from it and from the DOM.

Kind: static method of StyleSheet

createTheme(themes, [options]) ⇒ StyleSheet

The createTheme function generates a theme StyleSheet instance with CSS variables based on the provided themes and options. It supports multiple color schemes, including light, dark, light dark, and normal.

The themes object defines the styles for these color schemes. Each key in the object corresponds to a color scheme (light, dark, normal), and its value is an object containing key-value pairs that will be converted into CSS variables. Nested keys are concatenated with - to form the variable name. For example, { light : { colors : { primary : 'blue' } } } generates --fun-colors-primary : blue.

Kind: global function
Returns: StyleSheet - The theme StyleSheet instance. Use classes.root to get the theme class name. Apply this class to the element you want to theme. The CSS variables will be available for all its descendants.

Example

// Create a theme with light and dark color schemes and apply it to the entire page.
const theme = createTheme({
    light : {
        colorPrimary : 'black',
        backgroundLevel1 : 'white'
    },
    dark : {
        colorPrimary : 'white',
        backgroundLevel1 : 'black'
    }
});

// Add the `root` class (the theme class) to the body element.
// This will apply the theme to the entire page.
document.body.classList.add(theme.classes.root);

// Add some styles using the theme CSS variables.
const { classes } = css({
    button : {
        color : 'var(--fun-colorPrimary)', // Use the CSS variable generated from the theme.
        backgroundColor : 'var(--fun-backgroundLevel1)'
    }
});

// Add the `button` class to a button component.
// The button will use the CSS variables defined in the theme for its styles.
// Once the theme is applied, the button will automatically update its styles.
// If the system color scheme changes (e.g., from light to dark), the button will 
// dynamically update to reflect the new theme without requiring additional code.
const Button = ({ label }) => <button className={classes.button}>{label}</button>;

css(styles, [options]) ⇒ StyleSheet

Creates and attaches a new StyleSheet instance to the DOM.

Kind: global function
Returns: StyleSheet - The created and attached StyleSheet instance. Its classes property maps each top-level selector to its generated class name.

Example

// Create styles for a link component.
const { classes } = css({
    link : {
        color : 'blue',
        '&:hover' : {
            textDecoration : 'underline'
        }
    }
});

// Use the generated `link` class in a component.
const Link = ({ label, href }) => <a className={classes.link} href={href}>{label}</a>;