{"id":49363575,"url":"https://github.com/kingoftac/postcss-plugin-random","last_synced_at":"2026-04-27T18:02:37.578Z","repository":{"id":324103180,"uuid":"1095229553","full_name":"KingOfTac/postcss-plugin-random","owner":"KingOfTac","description":"A PostCSS plugin for the upcoming CSS random() function.","archived":false,"fork":false,"pushed_at":"2025-11-13T19:49:15.000Z","size":136,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-13T21:21:15.924Z","etag":null,"topics":["css","css-random","css-random-func","css-random-function","frontend","frontend-web","function","html","plugin","postcss","postcss-plugin","postcss-plugin-random","random","rust-web","ui","wasm","wasm-bindgen","web","web-assembly"],"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/KingOfTac.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-12T19:09:49.000Z","updated_at":"2025-11-13T19:32:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/KingOfTac/postcss-plugin-random","commit_stats":null,"previous_names":["kingoftac/postcss-plugin-random"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/KingOfTac/postcss-plugin-random","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KingOfTac%2Fpostcss-plugin-random","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KingOfTac%2Fpostcss-plugin-random/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KingOfTac%2Fpostcss-plugin-random/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KingOfTac%2Fpostcss-plugin-random/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KingOfTac","download_url":"https://codeload.github.com/KingOfTac/postcss-plugin-random/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KingOfTac%2Fpostcss-plugin-random/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32348058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","css-random","css-random-func","css-random-function","frontend","frontend-web","function","html","plugin","postcss","postcss-plugin","postcss-plugin-random","random","rust-web","ui","wasm","wasm-bindgen","web","web-assembly"],"created_at":"2026-04-27T18:02:27.842Z","updated_at":"2026-04-27T18:02:37.570Z","avatar_url":"https://github.com/KingOfTac.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-plugin-random\r\n\r\n\u003e A PostCSS plugin that implements the CSS `random()` function as per the [CSS Values \u0026 Units Level 5 draft](https://drafts.csswg.org/css-values-5/#random). This plugin lets you generate random values (optionally stepped) directly in your CSS and supports value sharing semantics.\r\n\r\n\u003e [!CAUTION]\r\n\u003e This is an experimental implementation; some parts of the spec require browser/DOM context and are approximated at build time. See [limitations](#limitations) below.\r\n\r\n## Roadmap\r\n- [x] `random(min, max[, step])` with:\r\n\t- Unit/type consistency checks between `min`, `max` (and `step` if present)\r\n\t- Uniform selection; step logic with `epsilon = step / 1000` and “snap-to-max within epsilon”\r\n- [x] `\u003crandom-value-sharing\u003e` support (build-time approximation):\r\n\t- `auto` (default): distinct base value per function occurrence\r\n\t- `--dashed-ident`: shared base value for the same ident within a processing run\r\n\t- `element-shared`: shared base value globally within the processing run\r\n\t- `fixed \u003cnumber\u003e`: deterministic base value in `[0,1)` (1 is clamped to the next representable value below 1)\r\n\t- Property-aware caching keys (approximate `\"PROPERTY N\"`) to better mimic default sharing behavior\r\n- [ ] Safer scanning (skip comments/strings; robust tokenization)\r\n- [ ] `\u003ccalc-sum\u003e` and percentage resolution (at least partial)\r\n- [ ] Additional edge cases for argument ranges (NaN/Infinity)\r\n- [ ] Add Playwright tests for coverage against the current WebKit implementation\r\n- [ ] Proper demo and docs\r\n\r\n### Examples\r\n```\r\n.random-rect {\r\n\twidth: random(100px, 200px);\r\n\theight: random(100px, 200px);\r\n}\r\n\r\n.shared-named {\r\n\twidth: random(--size, 100px, 200px);\r\n\theight: random(--size, 100px, 200px); /* same as width */\r\n}\r\n\r\n.shared-global {\r\n\twidth: random(element-shared, 100px, 200px);\r\n\theight: random(element-shared, 100px, 200px); /* same across all matches */\r\n}\r\n\r\n.fixed {\r\n\twidth: random(fixed 0.5, 100px, 200px);  /* 150px */\r\n\theight: random(fixed 0.5, 100px, 200px); /* 150px */\r\n}\r\n```\r\n\r\n## Limitations\r\n- Property-aware caching keys (the spec's default of `\"PROPERTY N\"`) are not yet implemented; this plugin currently can't know property names in a pure token stream. We simulate sharing through in-process cache keys (dashed ident/global) during the PostCSS run.\r\n- We don't evaluate `\u003ccalc-sum\u003e` (e.g. `calc()` or unit mixing). Such values are left as-is; numeric+unit prefixes are parsed only.\r\n- NaN / Infinity edge cases are not fully modeled per spec's Argument Ranges; invalid ranges generally cause the original `random(...)` to be left unchanged.\r\n- Scanning is naive: we don't skip comments/strings yet; nested functions are handled via basic parentheses counting only.\r\n- Type consistency is verified via unit strings; more advanced CSS type resolution (percentages, font-relative units) would require layout context.\r\n\r\n## Dev\r\ninstall `wasm-pack` if you haven't already:\r\n```shell\r\ncargo install wasm-pack\r\n```\r\n\r\nThe npm dev command will compile the wasm binary and bundle the demo CSS before serving the demo page.\r\n```shell\r\nnpm run dev\r\n```\r\n\r\nTo compile the wasm binary separately:\r\n```shell\r\nwasm-pack build --target nodejs\r\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingoftac%2Fpostcss-plugin-random","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingoftac%2Fpostcss-plugin-random","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingoftac%2Fpostcss-plugin-random/lists"}