{"id":13597302,"url":"https://github.com/abishekatp/stylers","last_synced_at":"2025-04-10T00:31:57.953Z","repository":{"id":65412070,"uuid":"586812272","full_name":"abishekatp/stylers","owner":"abishekatp","description":"Fully compile time scoped CSS for Leptos components","archived":false,"fork":false,"pushed_at":"2024-03-08T14:55:00.000Z","size":630,"stargazers_count":113,"open_issues_count":12,"forks_count":13,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-24T18:55:36.161Z","etag":null,"topics":["css","leptos","rust","scoped-css"],"latest_commit_sha":null,"homepage":"","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/abishekatp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-09T09:39:44.000Z","updated_at":"2024-06-10T08:47:29.360Z","dependencies_parsed_at":"2024-06-10T08:47:24.252Z","dependency_job_id":"d7a6219c-ce18-4e5c-bceb-5b92b7b6cc94","html_url":"https://github.com/abishekatp/stylers","commit_stats":{"total_commits":74,"total_committers":4,"mean_commits":18.5,"dds":0.1351351351351351,"last_synced_commit":"6f9f294e059a5684f67d5fe616c8bd1d2a1a933f"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abishekatp%2Fstylers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abishekatp%2Fstylers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abishekatp%2Fstylers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abishekatp%2Fstylers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abishekatp","download_url":"https://codeload.github.com/abishekatp/stylers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223418982,"owners_count":17142243,"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":["css","leptos","rust","scoped-css"],"created_at":"2024-08-01T17:00:29.997Z","updated_at":"2024-11-06T21:31:18.368Z","avatar_url":"https://github.com/abishekatp.png","language":"Rust","funding_links":[],"categories":["Rust","Styling and Design"],"sub_categories":["Unofficial"],"readme":"# Stylers\n- Scoped CSS for Rust web frameworks like Leptos.\n- `style!` macro is for writing css inside rust functions directly. It will validates css properties as well.\n- `style_sheet!` macro is for writing css in external css file and importing that inside rust functions.\n- `style_str!` macro is same as `style!` macro but returns the tuple `(class_name, style_val)` instead of saving the style_val to the separate file.\n- `style_sheet_str!` this same as `style_sheet!` macro but returns the tuple `(class_name, style_val)` instead of saving the style_val to the separate file.\n\n## Important Note\n- This Readme file is for the latest relase of stylers 1.0.0-alpha. You can find the readme for previous versions [here](https://crates.io/crates/stylers/0.3.2)\n\n## Installtion\n```cargo add stylers```\n\n## Prerequisite\n- If you are using `style` or `style_sheet` macro, then you have to add the `stylers` crate as both dependencies and build-dependencies in your Cargo.toml file.\n```\n[dependencies]\nstylers = { version = \"*\" }\n\n[build-dependencies]\nstylers = {  version = \"*\" }\n```\n\n- Then you have to add `build.rs` file in your root directory and add the below code snippet in it.\n```rust\nuse stylers::build;\n\nfn main() {\n    build(Some(String::from(\"./target/main.css\")));\n}\n```\n- In the above case output css file will be generated in the `./target/main.css` path. You can include that `main.css` file in your `index.html` file.(**Or If you are using a build like Trunk.rs you have to follow appropriate methods to include the main.css file to your project**).\n\nYou can find the importance of these new changes [here](https://github.com/abishekatp/stylers/issues/35).\n\n## Leptos Example\n**Note :Leptos version \u003e 0.4.9 has some new changes. But stylers works the same way in all versions of leptos**\n\n#### style!\n```rust\n#[component]\nfn Hello(cx: Scope, name: \u0026'static str) -\u003e impl IntoView {\n    let styler_class = style! {\n        #two{\n            color: blue;\n        }\n        div.one{\n            color: red;\n            content: raw_str(r#\"\\hello\"#);\n            font: \"1.3em/1.2\" Arial, Helvetica, sans-serif;\n        }\n        div {\n            border: 1px solid black;\n            margin: 25px 50px 75px 100px;\n            background-color: lightblue;\n        }\n        h2 {\n            color: purple;\n        }\n        @media only screen and (max-width: 1000px) {\n            h3 {\n                background-color: lightblue;\n                color: blue\n            }\n        }\n    };\n\n    view! {class = styler_class,\n        \u003cdiv class=\"one\"\u003e\n            \u003ch1 id=\"two\"\u003e\"Hello\"\u003c/h1\u003e\n            \u003ch2\u003e\"World\"\u003c/h2\u003e\n            \u003ch2\u003e{name}\u003c/h2\u003e\n            \u003ch3\u003e\"Hello Kanna\"\u003c/h3\u003e\n        \u003c/div\u003e\n    }\n}\n```\n#### style_sheet!\n```rust\n#[component]\nfn Hello(cx: Scope, name: \u0026'static str) -\u003e impl IntoView {\n    let class_name = style_sheet!(\"./hello.css\");\n    view! {class = class_name,\n        \u003cdiv class=\"one\"\u003e\n            \u003ch1 id=\"two\"\u003e\"Hello\"\u003c/h1\u003e\n            \u003ch2\u003e\"World\"\u003c/h2\u003e\n        \u003c/div\u003e\n    }\n}\n```\n- In the above case ```hello.css``` file is inside the `root` directory of the project.\n\n#### style_str!\n```rust\n#[component]\npub fn GreenButton(cx: Scope) -\u003e impl IntoView {\n    let (class_name, style_val) = style_str! {\n        button {\n            background-color: green;\n            border-radius: 8px;\n            border-style: none;\n            box-sizing: border-box;\n            color: yellow;\n            cursor: pointer;\n            display: inline-block;\n            font-family: r#\"Haas Grot Text R Web\"#, r#\"Helvetica Neue\"#, Helvetica, Arial, sans-serif;\n            font-size: 14px;\n            font-weight: 500;\n            height: 40px;\n            line-height: 20px;\n            list-style: none;\n            margin: 0;\n            outline: none;\n            padding: 10px 16px;\n            position: relative;\n            text-align: center;\n            text-decoration: none;\n            transition: color 100ms;\n            vertical-align: baseline;\n            user-select: none;\n            -webkit-user-select: none;\n        }\n        button:hover{\n            background-color: yellow;\n            color: green;\n        }\n    };\n\n    view! {class = class_name,\n        \u003cstyle\u003e{style_val}\u003c/style\u003e\n        \u003cbutton\u003e\"I am green button\"\u003c/button\u003e\n    }\n}\n```\n\n#### style_sheet_str!\n```rust\n#[component]\npub fn BlueButton() -\u003e impl IntoView {\n    let (class_name, style_val) = style_sheet_str!(\"./src/button.css\");\n\n    view! {class = class_name,\n        \u003cstyle\u003e{style_val}\u003c/style\u003e\n        \u003cbutton\u003e\"I am blue button\"\u003c/button\u003e\n    }\n}\n```\n- In this case ```button.css``` file is inside the `src` directory of the project.\n\n## Custom pseudo classes\n- In some situations we may need our css to affect `deep down` the dom tree. To achieve this we have custom pseudo class called `:deep()`. For example below css is valid one.\n#### Input\n```css\ndiv :deep(h3) {\n    color: orange;\n}\n```\n#### Output\n```css\ndiv.l-243433 h3{color: orange;}\n```\n\n- If you want your particular css to be `global` you can use `:deep()` directive without any  prceding selectors it.\n#### Input\n```css\n:deep(h3 div) {\n    color: orange;\n}\n```\n#### Ouput\n```css\nh3 div{color: orange;}\n```\n\n## How it works:\n- This `stylers::build` method will parse all the rust files in the path `/src/**/*.rs` during build step to find the places the `style` and `style_sheet` macros has been used and generate single output css file.\n- `style_str` and `style_sheet_str` directly returns the tuple (class_name, output_css).\n\n\n## Edge cases handled for `style!` macros\n- By default double quotes ( \" ) around css property values will be removed. If user wants to retain the double quotes they have to wrap it using ```raw_str``` as given below:\n- these rules apply for both `style!` and `style_str!` macros\n#### Input\n```rust\nstyle!(\n    div{\n        content: raw_str(r#\"\\hello\"#);\n        font: \"1.3em/1.2\" Arial;\n    }\n)\n```\n#### Output\n```css\n    div.l-23432{\n        content: \"\\hello\";\n        font: 1.3em/1.2 Arial;\n    }\n```\n\n## Optional build process using Trunk(Only when you use `style!` or `style_sheet!` macro )\n- You have to include generated main.css in the index.html\n(e.g ```\u003clink rel=\"stylesheet\" href=\"/main.css\"\u003e```).\n\n- In ```Trunk.toml``` you have to add the below lines to move the the `main.css` file from `./target/` directory to `./dist/` directory.\n```toml\n[[hooks]]\nstage = \"post_build\"\ncommand = \"sh\"\ncommand_arguments = [\"-c\", \"cp ./target/main.css $TRUNK_STAGING_DIR/\"]\n```\n- when you are including external css file using `style_sheet!` macro, whenever you make some changes in your css file you have to save corresponding rust file(*.rs) for css to be updated on the browser. For more info about trunk refer [here](https://trunkrs.dev/commands/).\n- if something is odd with styling, delete the `./target/stylers` directory and rebuild your package. If the problem persists please raise an issue here.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabishekatp%2Fstylers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabishekatp%2Fstylers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabishekatp%2Fstylers/lists"}