StyleSheet

Kind: global class
Properties

• StyleSheet
  • new StyleSheet(styles, [options])
  • instance
    • .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.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. 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 StyleSheet instance. Use the classes property to access the generated class names.

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