Easily create dynamic css using json notation

Related tags

Encoding JSON jss
Overview

jss!

Latest Version Build Status MIT licensed

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

You might also like...
A node package based on jsonschema-rs for performing JSON schema validation

A node package based on jsonschema-rs for performing JSON schema validation.

CLI tool to convert HOCON into valid JSON or YAML written in Rust.

{hocon:vert} CLI Tool to convert HOCON into valid JSON or YAML. Under normal circumstances this is mostly not needed because hocon configs are parsed

Typify - Compile JSON Schema documents into Rust types.

Typify Compile JSON Schema documents into Rust types. This can be used ... via the macro import_types!("types.json") to generate Rust types directly i

Tools for working with Twitter JSON data

Twitter stream user info extractor This project lets you parse JSON data from the Twitter API or other sources to extract some basic user information,

A easy and declarative way to test JSON input in Rust.

assert_json A easy and declarative way to test JSON input in Rust. assert_json is a Rust macro heavily inspired by serde json macro. Instead of creati

A fast way to minify JSON

COMPACTO (work in progress) A fast way to minify JSON. Usage/Examples # Compress # Input example (~0.11 KB) # { # "id": "123", # "name": "Edua

JSON Schema validation library

A JSON Schema validator implementation. It compiles schema into a validation tree to have validation as fast as possible.

Jq - Command-line JSON processor

jq jq is a lightweight and flexible command-line JSON processor. , Unix: , Windows: If you want to learn to use jq, read the documentation at https://

A small rust database that uses json in memory.

Tiny Query Database (TQDB) TQDB is a small library for creating a query-able database that is encoded with json. The library is well tested (~96.30% c

Comments
  • Calling a function to return css within the jss macro?

    Calling a function to return css within the jss macro?

    What I'm trying to do

    I'm trying to dynamically insert a bunch of color values into a jss macro like this:

     let css_shell = jss!{
            "body":{
                // function called here
            }
        };
    

    my colors are all going to be css custom property strings that look like this:

    --custom-color1:#ffdade
    

    the basic idea of what I'm trying at the moment with my function is this:

     let all_colors = vec![]
        for color in colors.iter() {
            let css = format!("--custom-color, {}", color.to_string())
            all_colors.push(css)
         }
        all_colors
    
    
    

    I'm just not sure how to inject something like the array of values into the jss macro

    Is this something that could be done better in vanilla Rust?

    wontfix 
    opened by ajstrand 2
Owner
Jovansonlee Cesar
Rust programmer, library creator, blockchain enthusiast.
Jovansonlee Cesar
Little tool so you can swap out user jsons easily

Little tool so you can swap out user jsons easily To run: $ cargo run user-name inside of root directory. Or you can build and use the executable with

Natalie Dorshimer 3 Jun 14, 2022
JSON parser which picks up values directly without performing tokenization in Rust

Pikkr JSON parser which picks up values directly without performing tokenization in Rust Abstract Pikkr is a JSON parser which picks up values directl

Pikkr 609 Sep 16, 2022
Strongly typed JSON library for Rust

Serde JSON   Serde is a framework for serializing and deserializing Rust data structures efficiently and generically. [dependencies] serde_json = "1.0

null 3.3k Sep 29, 2022
JSON implementation in Rust

json-rust Parse and serialize JSON with ease. Changelog - Complete Documentation - Cargo - Repository Why? JSON is a very loose format where anything

Maciej Hirsz 489 Sep 25, 2022
Rust port of gjson,get JSON value by dotpath syntax

A-JSON Read JSON values quickly - Rust JSON Parser change name to AJSON, see issue Inspiration comes from gjson in golang Installation Add it to your

Chen Jiaju 86 Sep 4, 2022
rurl is like curl but with a json configuration file per request

rurl rurl is a curl-like cli tool made in rust, the difference is that it takes its params from a json file so you can have all different requests sav

Bruno Ribeiro da Silva 6 Sep 10, 2022
A rust script to convert a better bibtex json file from Zotero into nice organised notes in Obsidian

Zotero to Obsidian script This is a script that takes a better bibtex JSON file exported by Zotero and generates an organised collection of reference

Sashin Exists 2 Feb 12, 2022
A tool for outputs semantic difference of json

jsondiff A tool for outputs semantic difference of json. "semantic" means: sort object key before comparison sort array before comparison (optional, b

niboshi 3 Sep 22, 2021
Decode Metaplex mint account metadata into a JSON file.

Simple Metaplex Decoder (WIP) Install From Source Install Rust. curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh Clone the source: git c

Samuel Vanderwaal 8 Aug 25, 2022
A fast and simple command-line tool for common operations over JSON-lines files

rjp: Rapid JSON-lines processor A fast and simple command-line tool for common operations over JSON-lines files, such as: converting to and from text

Ales Tamchyna 3 Jul 8, 2022