{"id":17203950,"url":"https://github.com/ivanceras/jss","last_synced_at":"2025-04-13T21:21:06.192Z","repository":{"id":62441442,"uuid":"397860299","full_name":"ivanceras/jss","owner":"ivanceras","description":"Easily create dynamic css using json notation","archived":false,"fork":false,"pushed_at":"2023-08-11T00:17:36.000Z","size":93,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T15:25:30.335Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivanceras.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-08-19T07:46:40.000Z","updated_at":"2024-10-04T07:07:01.000Z","dependencies_parsed_at":"2022-11-01T21:49:52.557Z","dependency_job_id":"54242dd6-148b-4c57-a1b4-cf1bc6a7e04e","html_url":"https://github.com/ivanceras/jss","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"9e526f4e57fd74d83d7c87e8e7876f49af00ff0d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanceras%2Fjss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanceras%2Fjss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanceras%2Fjss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivanceras%2Fjss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivanceras","download_url":"https://codeload.github.com/ivanceras/jss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248783270,"owners_count":21160899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T02:19:58.588Z","updated_at":"2025-04-13T21:21:06.169Z","avatar_url":"https://github.com/ivanceras.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jss!\n\n[![Latest Version](https://img.shields.io/crates/v/jss.svg)](https://crates.io/crates/jss)\n[![Build Status](https://github.com/ivanceras/jss/actions/workflows/rust.yml/badge.svg)](https://github.com/ivanceras/jss/actions/workflows/rust.yml)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nThis crate provides an easy way to write dynamic css using json notation.\nThis gives you more convenient than you think.\n\n\nConsidering using a dynamic width for our layer class\n\n```css\n.layer {\n width: 10px;\n}\n```\n\nYou will have to write it using the `format!` macro\n\n```rust\nlet width = 10;\nlet css = format!(\"\n.layer {{\n    width: {}px;\n}}\n\", width);\n\nlet expected = r#\"\n.layer {\n    width: 10px;\n}\n\"#;\nassert_eq!(expected,css);\n```\n\nOh!, we forgot that escaping braces in rust strings is done with braces and we will have double braces all over our dynamic css.\nIt will just get worse when there are more variables added into it, keeping track the order of the format argument.\n\n`jss!` to the rescue:\n\n```rust\nuse jss::prelude::*;\n\nlet width = 10;\nlet css = jss!{\n    \".layer\": {\n     width: px(width),\n    }\n};\n\nlet expected = \".layer{width:10px;}\";\nassert_eq!(expected,css);\n\n```\n\nNon-identifier style names can be written with `snake_case`, or using quotes on them.\n```rust\nuse jss::prelude::*;\n\nlet css = jss!(\n    \".layer\": {\n        border: \"1px solid green\",\n        background_color: \"red\",\n        \"width\": percent(100),\n        \"border-color\": \"red!important\",\n        margin: px(5) + \" auto\"\n    },\n\n    \".hide .layer\": {\n        opacity: 0,\n    },\n);\n\nlet expected = \".layer{border:1px solid green;background-color:red;width:100%;border-color:red!important;margin:5px auto;}.hide .layer{opacity:0;}\";\nassert_eq!(expected, css);\n```\n\nUse of name spaces in class selector to prevent collision with similar class names in other components.\n```rust\nuse jss::{jss_ns, units::percent};\nlet css = jss::jss_ns_pretty!(\"frame\",\n    \".\": {\n        display: \"block\",\n    },\n\n    \".layer\": {\n        background_color: \"red\",\n        border: \"1px solid green\",\n    },\n\n    \"@media screen and (max-width: 800px)\": {\n      \".layer\": {\n        width: percent(100),\n      }\n    },\n\n    \".hide .layer\": {\n        opacity: 0,\n    },\n);\n\nlet expected = r#\"\n.frame {\n    display: block;\n}\n.frame__layer {\n    background-color: red;\n    border: 1px solid green;\n}\n@media screen and (max-width: 800px) {\n\n    .frame__layer {\n        width: 100%;\n    }\n\n}\n.frame__hide .frame__layer {\n    opacity: 0;\n}\n\"#;\nassert_eq!(expected, css);\n```\n\nFeature `strict` will prevent you from making typo on the style name.\nUsing invalid style names will panic.\n```sh\ncargo test all --features = \"strict\"\n```\n```rust,ignore\nuse jss::prelude::*;\n\nlet width = 10;\nlet css = jss!{\n    \".layer\": {\n     \"not-soo-awesome-style-name\": px(width), // panicked at 'invalid style name: not-soo-awesome-style-name'\n    }\n};\n```\n\nLicense: MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivanceras%2Fjss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivanceras%2Fjss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivanceras%2Fjss/lists"}