Crate stylist

Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.

Usage

Yew Integration

To enable yew integration, enable the yew_integration feature in Cargo.toml.

For a detailed usage with yew, see the yew module.

Syntax

Every declaration that is not in a qualified block will be applied to the Component the class of this style is applied to.

You may also use & in CSS selectors to denote the generated class of the container element:

&:hover {
  background-color: #d0d0d9;
}

You can also use other CSS at-rules (such as: @keyframes, @supports and @media):

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

@media only screen and (max-width: 600px) {
  background-color: #303040;

  .nested {
    background-color: lightblue;
  }

  &:hover {
    background-color: #606072;
  }
}

@supports (backdrop-filter: blur(5px)) {
  backdrop-filter: blur(5px);
}

Theming

There’s theming example using Yew Context API.

Style API

If you want to parse a string into a style at runtime, you need to enable the parser feature. You can then use Style::new, passing a str, String or Cow<'a, str>:

use stylist::Style;

let style = Style::new(
    r#"
        background-color: red;

        .nested {
            background-color: blue;
            width: 100px
        }
    "#,
)
.expect("Failed to create style");

Features Flags

• macros: Enabled by default, this flag enables procedural macro support.
• random: Enabled by default, this flag uses fastrand crate to generate a random class name. Disabling this flag will opt for a class name that is counter-based.
• parser: Disabled by default, this flag enables runtime parsing of styles from strings. You don’t need to enable this to generate styles via the macros.
• yew_integration: This flag enables yew integration, which implements Classes for Style and provides a Global component for applying global styles.
• debug_style_locations: Enabled by default, this flag annotates elements with additional classes to help debugging and finding the source location of styles.
• debug_parser: Enabled by default, this flag generates additional checks when debug_assertions are enabled.
• ssr: Disabled by default, this flag enables Server-side Rendering Support.
• hydration: Disabled by default, this flag enables Server-side Rendering Hydration Support.

Modules

ast

This module contains the semantic representation of a CSS StyleSheet.

macrosmacros

This module contains runtime support for the macros and documents their usage.

manager

Customise behaviour of Styles.

yewyew

This module contains yew specific features.

Macros

cssmacros

A procedural macro that parses a string literal or an inline stylesheet into a StyleSource.

global_stylemacros

A procedural macro that parses a string literal or an inline stylesheet into a GlobalStyle.

stylemacros

A procedural macro that parses a string literal or an inline stylesheet into a Style.

Structs

GlobalStyle

A struct that represents a global Style.

Style

A struct that represents a scoped Style.

StyleSource

A struct that can be used as a source to create a Style or GlobalStyle.

Enums

Error

Type Aliases

Result