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 usesfastrand
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 implementsClasses
forStyle
and provides aGlobal
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 whendebug_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
- This module contains the semantic representation of a CSS StyleSheet.
- macros
macros
This module contains runtime support for the macros and documents their usage. - Customise behaviour of Styles.
- yew
yew
This module contains yew specific features.
Macros
- css
macros
A procedural macro that parses a string literal or an inline stylesheet into aStyleSource
. - global_style
macros
A procedural macro that parses a string literal or an inline stylesheet into aGlobalStyle
. - style
macros
A procedural macro that parses a string literal or an inline stylesheet into aStyle
.
Structs
- A struct that represents a global Style.
- A struct that represents a scoped Style.
- A struct that can be used as a source to create a
Style
orGlobalStyle
.