Crate stylist

source ·
Expand description

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

Enums

Type Aliases