Crate jss

Provides convenient functions and macro to build dynamic css

jss!

This crate provides an easy way to write dynamic css using json notation. This gives you more convenient than you think.

Considering using a dynamic width for our layer class

.layer {
 width: 10px;
}

You will have to write it using the format! macro

let width = 10;
let css = format!("
.layer {{
    width: {}px;
}}
", width);

let expected = r#"
.layer {
    width: 10px;
}
"#;
assert_eq!(expected,css);

Oh!, we forgot that escaping braces in rust strings is done with braces and we will have double braces all over our dynamic css. It will just get worse when there are more variables added into it, keeping track the order of the format argument.

jss! to the rescue:

use jss::prelude::*;

let width = 10;
let css = jss!{
    ".layer": {
     width: px(width),
    }
};

let expected = ".layer{width:10px;}";
assert_eq!(expected,css);

Non-identifier style names can be written with snake_case, or using quotes on them.

use jss::prelude::*;

let css = jss!(
    ".layer": {
        border: "1px solid green",
        background_color: "red",
        "width": percent(100),
        "border-color": "red!important",
        margin: px(5) + " auto"
    },

    ".hide .layer": {
        opacity: 0,
    },
);

let expected = ".layer{border:1px solid green;background-color:red;width:100%;border-color:red!important;margin:5px auto;}.hide .layer{opacity:0;}";
assert_eq!(expected, css);

Use of name spaces in class selector to prevent collision with similar class names in other components.

use jss::{jss_ns, units::percent};
let css = jss::jss_ns_pretty!("frame",
    ".": {
        display: "block",
    },

    ".layer": {
        background_color: "red",
        border: "1px solid green",
    },

    "@media screen and (max-width: 800px)": {
      ".layer": {
        width: percent(100),
      }
    },

    ".hide .layer": {
        opacity: 0,
    },
);

let expected = r#"
.frame {
    display: block;
}
.frame__layer {
    background-color: red;
    border: 1px solid green;
}
@media screen and (max-width: 800px) {

    .frame__layer {
        width: 100%;
    }

}
.frame__hide .frame__layer {
    opacity: 0;
}
"#;
assert_eq!(expected, css);

Feature strict will prevent you from making typo on the style name. Using invalid style names will panic.

cargo test all --features = "strict"

use jss::prelude::*;

let width = 10;
let css = jss!{
    ".layer": {
     "not-soo-awesome-style-name": px(width), // panicked at 'invalid style name: not-soo-awesome-style-name'
    }
};

License: MIT

Modules

• prelude
• style
• units
  provides function and macro for html units such as px, %, em, etc.

Macros

• jss
  Creates css using json notation
• jss_ns
  Create a css string using json notation and use namespace on the class selectors
• jss_ns_pretty
  create css using jss with namespace macro with correct indentions
• jss_pretty
  Create css using jss macro with nice indentions
• style
  convenient method to create inline style for css usage. #Examples:

Enums

• Value
  Wraps different primitive variants used as values in html This is needed since html attributes can have different value types such as checked(bool), name(String), tab_index(i32) Note: memory size of Value is 32 bytes, in comparison String is 24 bytes

Functions

• class_namespaced
  Prepend namespace to this class name. This is used in assigning the class name in an element.
• process_css
  process json to css transforming the selector if class name is specified
• process_css_properties
  This process the values used inside a css selector
• selector_namespaced
  Prepend a namespace to the selector classes, It does not affect other selectors such element selector, #id selector example: