{"id":13802797,"url":"https://github.com/orktes/rjss","last_synced_at":"2025-11-09T03:03:47.280Z","repository":{"id":27676809,"uuid":"31162989","full_name":"orktes/rjss","owner":"orktes","description":"Style sheet language for creating inlineable style objects for react-native and react-canvas ","archived":false,"fork":false,"pushed_at":"2015-03-15T15:11:47.000Z","size":376,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-28T19:49:43.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jaskru/tensorflow-mnist-tutorial","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orktes.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}},"created_at":"2015-02-22T12:55:20.000Z","updated_at":"2016-04-15T07:29:47.000Z","dependencies_parsed_at":"2022-09-03T03:42:42.670Z","dependency_job_id":null,"html_url":"https://github.com/orktes/rjss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/orktes/rjss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orktes%2Frjss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orktes%2Frjss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orktes%2Frjss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orktes%2Frjss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orktes","download_url":"https://codeload.github.com/orktes/rjss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orktes%2Frjss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265108514,"owners_count":23712466,"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-08-04T00:01:57.382Z","updated_at":"2025-11-09T03:03:47.227Z","avatar_url":"https://github.com/orktes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rjss\nStyle sheet language for creating inlineable style objects for react-native and react-canvas.\n\n- Playground http://orktes.github.io/rjss-playground/\n- Webpack loader https://github.com/orktes/rjss-loader\n- Browserify plugin TODO\n- CLI TODO\n- Linter TODO\n- Atom syntax and linter plugin TODO\n\n## Documentation\nRJSS is still WIP and the parser, syntax and other tools are subject to change.\n\n### Basic syntax\n```css\n/* simple.rjss */\nmain {\n  top: 10;\n  left: 0;\n  width: 100;\n  height: 20;\n  margin-top: 20;\n  margin-bottom: 30;\n}\n```\nusage\n```js\nvar styles = require('./simple.rjss');\n\n...\n  render: function () {\n    return \u003cView style={styles('main')} /\u003e;\n  }\n...\n\n```\n\n### Runtime variables\n```css\n/* variables.rjss */\nmain {\n  top: $top;\n  left: $left;\n  width: 100;\n  height: 20;\n  margin-top: 20;\n  margin-bottom: 30;\n}\n```\nusage\n```js\nvar styles = require('./variables.rjss');\n\n...\n  render: function () {\n    return \u003cView style={styles('main', {top: 10, left: 10})} /\u003e;\n  }\n...\n\n```\n### Defining variables in RJSS\n```css\n/* variables.rjss */\n\n@var top: 100;\n@var height: ${1000 - top};\n\nmain {\n  top: $top;\n  left: $left;\n  width: 100;\n  height: $height;\n  margin-top: 20;\n  margin-bottom: 30;\n}\n```\nusage\n```js\nvar styles = require('./variables.rjss');\n\n...\n  render: function () {\n    return \u003cView style={styles('main', {left: 10})} /\u003e;\n  }\n...\n\nor\n\n...\n  render: function () {\n    // This will override the top variable set in the rjss file\n    return \u003cView style={styles('main', {top: 20, left: 10})} /\u003e;\n  }\n...\n\n```\n### Inheritance\n```css\n/* buttons.rjss */\n\nbutton {\n  width: 100;\n  height: 20;\n}\n\ngreen extends button {\n  background-color: \"#00FF00\"\n}\n\nred extends button {\n  background-color: \"#FF0000\"\n}\n\nblue extends button {\n  background-color: \"#0000FF\"\n}\n\n```\nusage\n```js\nvar buttons = require('./buttons.rjss');\n\n...\n  render: function () {\n    return \u003cView\u003e\n      \u003cView style={styles('red')} /\u003e\n      \u003cView style={styles('green')} /\u003e\n      \u003cView style={styles('blue')} /\u003e\n    \u003c/View\u003e;\n  }\n...\n\n```\n### Defining functions in RJSS\n```css\n/* functions.rjss */\n\n@var top: 100;\n\n@func random (min, max) {\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\n@func topToPowerOf (powerOf) {\n  return Math.pow(top, powerOf);\n}\n\nmain {\n  left: random(1, 100);\n  top: topToPowerOf(2);\n}\n```\nusage\n```js\nvar styles = require('./functions.rjss');\n\n...\n  render: function () {\n    return \u003cView style={styles('main')} /\u003e;\n  }\n...\n\n```\n### Defining macros in RJSS\nMacros are defined similar to functions. Key difference is that macros are executed compile time rather than in the runtime. Macro names can overlap with runtime functions to provide better usability and optimization when possible.\n\nSee example: https://github.com/orktes/rjss/blob/master/mixins/color_submixins/lighten.rjss\n\n```css\n/* macros.rjss */\n\n@var value: 1;\n\n@func min(a, b) {\n  return Math.min(a, b);\n}\n\n@macro min(a, b) {\n  return min(a, b); // Refers to @func min\n}\n\nmain {\n  first: min(1, 2); // Precompiled to 1\n  second: min(1, $second); // Will be executed in the runtime\n}\n```\nusage\n```js\nvar styles = require('./macros.rjss');\n\n...\n  render: function () {\n    return \u003cView style={styles('main', {second: 3})} /\u003e;\n  }\n...\n\n```\n\n### Import other RJSS files\n\n```css\n/* variables.rjss */\n\n@var brandColor: \"#ff00ff\";\n@var smallText: 10;\n@var mediumText: 15;\n@var largeText: 20;\n```\n\n```css\n/* other.rjss */\n\n@import \"./variables.rjss\";\n\nheader {\n  font-size: $largeText;\n  color: $brandColor;\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forktes%2Frjss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forktes%2Frjss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forktes%2Frjss/lists"}