Classes

StyleSheet

Functions

createTheme(themes, options) ⇒ StyleSheet

The createTheme function creates a theme StyleSheet instance. It supports light, dark, and system color schemes.

css(styles) ⇒ StyleSheet

Creates a new StyleSheet instance and attaches it to the DOM.

StyleSheet

Kind: global class
Properties

• StyleSheet
  • new StyleSheet(styles, options)
  • instance
    • .generateId() ⇒ String
    • .generateClassName(className) ⇒ String
    • .toString() ⇒ String
    • .attach() ⇒ StyleSheet
    • .destroy() ⇒ StyleSheet
  • static
    • .prefix
    • .indent
    • .registry
    • .uid
    • .debug
    • .toString() ⇒ string
    • .attach()
    • .destroy()

new StyleSheet(styles, options)

The StyleSheet class receives at the constructor a styles object and an options object and generate a css StyleSheet.
The StyleSheet can be attached to the DOM, destroyed or rendered as 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();
// Get classes object from the instance.
const { classes } = instance;
// Use the classes object to get the class name and use it in your component.
function Header = () => <h1 className={classes.root}>Hello World</h1>;

styleSheet.generateId() ⇒ String

Generate a unique identifier. Used for the style element id. May be overridden by options.generateId.

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

styleSheet.generateClassName(className) ⇒ 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.

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

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.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: 4 spaces
Properties

StyleSheet.registry

Kind: static property of StyleSheet
Properties

StyleSheet.uid

Kind: static property of StyleSheet
Properties

StyleSheet.debug

Kind: static property of StyleSheet
Default: false If true, the CSS will be formatted with new lines and indents.
Properties

StyleSheet.toString() ⇒ string

Render all instances in the registry as a string.

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

StyleSheet.attach()

Attach all instances in the registry to the DOM.

Kind: static method of StyleSheet

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 creates a theme StyleSheet instance. It supports light, dark, and system color schemes.

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

Example

// Create a default theme and apply it to the entire page.
const theme = createTheme({
    light : {
        color : 'black',
        backgroundColor : 'white'
    },
    dark : {
        color : 'white',
        backgroundColor : '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-color)',
        backgroundColor : 'var(--fun-backgroundColor)'
    }
});
// Add the `button` class to a button component.
// You can use the variables in your styles even before the theme is applied or created.
// Your component will update when the theme is applied.
// If the system color scheme changes, the button will update automatically.
const Button = ({ label }) => <button className={classes.button}>{label}</button>;

css(styles) ⇒ StyleSheet

Creates a new StyleSheet instance and attaches it to the DOM.

Kind: global function
Returns: StyleSheet - The StyleSheet instance.

Example

// Create some styles for a link component.
const { classes } = css({
    link : {
        color : 'blue',
        '&:hover' : {
           textDecoration : 'underline'
        }
    }
});
// Create a link component. Add the `link` class to it.
const Link = ({ label, href }) => <a className={classes.link} href={href}>{label}</a>;