{"id":17503881,"url":"https://github.com/dab0mb/stylejs","last_synced_at":"2025-07-04T03:38:20.262Z","repository":{"id":66209493,"uuid":"316781622","full_name":"DAB0mB/stylejs","owner":"DAB0mB","description":"A DOM free, light-weight, with 0 dependencies, custom made CSS-like query selector engine for styling React (Native) components","archived":false,"fork":false,"pushed_at":"2021-01-15T11:06:50.000Z","size":205,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-06T21:31:06.351Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DAB0mB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2020-11-28T17:03:20.000Z","updated_at":"2021-01-15T11:09:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"9516b08f-5e3e-4a2e-a01e-86da99097c70","html_url":"https://github.com/DAB0mB/stylejs","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"50dd0bec517bb2baeda7449d8961ea0c425c97c2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Fstylejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Fstylejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Fstylejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DAB0mB%2Fstylejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DAB0mB","download_url":"https://codeload.github.com/DAB0mB/stylejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241533630,"owners_count":19977826,"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-19T23:17:03.774Z","updated_at":"2025-03-02T16:13:46.769Z","avatar_url":"https://github.com/DAB0mB.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StyleJS\n\nMotivation: React-Native doesn't ship with a CSS query selector engine like the browser does. Accordingly, I have decided to implement a custom query selector engine, that uses 100% JavaScript and is completely separated from the DOM API. I call it StyleJS.\n\nWhile StyleJS was built with React-Native in mind, it's completely agnostic to the framework or the environment you're using, so in theory, it can be used anywhere. For now, there's a single adapter to support React applications, in 3 different environments: DOM (browser, [Electron](https://www.electronjs.org/)), [React-Native](https://reactnative.dev/), and [Ink](https://github.com/vadimdemedes/ink) (for building CLIs).\n\nStyleJS differs in the following from a traditional style sheet:\n\n- It's completely independent from the DOM and uses 100% JavaScript.\n- It introduces custom query selectors and syntax rules for optimal styling experience.\n- Its query selectors work based on Components and props, rather than HTML tag-names and attributes.\n- It has full encapsulation per Component.\n- It can dynamically evaluate style rules based on given props and theme config.\n\nHere's one example of how to use StyleJS:\n\n```jsx\nimport style from '@stylejs/react/native';\nimport { TouchableWithoutFeedback, View, Text } from 'react-native';\n\nimport { shadeColor } from './utils';\n\nconst MyButton = style(TouchableWithoutFeedback) `\n  \u0026 \u003e ${View} {\n    background-color: $theme.primaryBg;\n    justify-content: center;\n    align-items: center;\n    padding-horizontal: 20px;\n    padding-vertical: 5px;\n\n    \u0026 .pressed {\n      background-color: ${(props, theme) =\u003e shadeColor(theme.primaryBg, .5)};\n    }\n\n    \u0026 \u003e ${Text} {\n      color: $theme.primaryTxt;\n\n      \u0026 .bold {\n        font-weight: 700;\n      }\n    }\n  }\n`;\n```\n\nYou can also visit this [Code Sandbox link](https://codesandbox.io/s/react-stylejs-testjs-02wh1) for an interactive StyleJS demo. It's important to note that **StyleJS is a concept! And was not tested with a real application** (yet).\n\nTo install:\n\n    $ yarn add @stylejs/core @stylejs/react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdab0mb%2Fstylejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdab0mb%2Fstylejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdab0mb%2Fstylejs/lists"}