{"id":17725663,"url":"https://github.com/fedemartinm/fast-styles","last_synced_at":"2025-07-24T06:37:53.134Z","repository":{"id":183360373,"uuid":"667537035","full_name":"fedemartinm/fast-styles","owner":"fedemartinm","description":"⚡ A lightweight and efficient React Native styling package that generates styles during compile time without any runtime overhead","archived":false,"fork":false,"pushed_at":"2023-09-12T15:52:14.000Z","size":4249,"stargazers_count":56,"open_issues_count":6,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-02T11:46:20.097Z","etag":null,"topics":["css-in-js","expo","react","react-native"],"latest_commit_sha":null,"homepage":"https://fedemartinm.github.io/fast-styles/","language":"JavaScript","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/fedemartinm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-17T18:24:26.000Z","updated_at":"2024-08-25T10:47:04.000Z","dependencies_parsed_at":"2024-10-26T02:37:32.859Z","dependency_job_id":null,"html_url":"https://github.com/fedemartinm/fast-styles","commit_stats":null,"previous_names":["fedemartinm/fast-styles"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Ffast-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Ffast-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Ffast-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedemartinm%2Ffast-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fedemartinm","download_url":"https://codeload.github.com/fedemartinm/fast-styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249179797,"owners_count":21225604,"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-in-js","expo","react","react-native"],"created_at":"2024-10-25T16:05:15.736Z","updated_at":"2025-04-16T01:23:39.781Z","avatar_url":"https://github.com/fedemartinm.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ⚡ Fast Styles - A lightweight and efficient React styling package\n\n- Support for single, multiple, and compound variants without any runtime overhead\n- Runtime or compile-time style generation using a babel plugin\n- Typescript support with variant autocompletion as a property\n- Drop-in replacement for StyleSheet\n\n### [Documentation and usage](https://fedemartinm.github.io/fast-styles/) | [Why this library](https://fedemartinm.github.io/fast-styles/docs/basics/why-this-library) | [Benchmark](https://github.com/fedemartinm/fast-styles/tree/main/packages/benchmarks#fast-styles-benchmark)\n\n### The problem\n\nThere are many alternatives that allow you to build your components using JSX and props. We're not going to argue that it's easy to create components in this way because it certainly is. However, exposing those props comes with a cost.\n\nWhat should be a solution for styling ends up becoming a performance problem. Each component you use from these libraries ends up generating dozens of operations, merging objects at runtime, and significantly impacting rendering time. Checking this problem is as easy as choosing your favorite library, selecting a handful of components, and measuring their rendering time.\n\n### The solution\n\nFortunately, there is a solution to easily handle variants and themes in React Native, and that is to generate styles at compile-time. Using the styled HOC from this library, you can generate styles for different variants of your components without adding any runtime overhead. In fact, the resulting code can be more efficient than using statically created styles with `StyleeSheet.create()`.\n\n### Installation\n\n```sh\nyarn add @fast-styles/react\n```\n\nor\n\n```sh\nnpm install @fast-styles/react --save\n```\n\n### Usage\n\nThis example creates a ButtonRoot component from a touchable and defines the `type` variant to change the button color.\n\n```javascript\nconst ButtonRoot = styled(TouchableOpacity, {\n  // base styles\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  height: 40,\n  width: \"100%\",\n  maxWidth: 200,\n  borderRadius: 20,\n  // variants\n  variants: {\n    coloScheme: {\n      primary: {\n        backgroundColor: \"green\",\n      },\n      negative: {\n        backgroundColor: \"red\",\n      },\n      disabled: {\n        backgroundColor: \"gray\",\n      },\n    },\n  },\n});\n\nconst Button = (props) =\u003e {\n  return (\n    \u003cButtonRoot colorScheme={\"primary\"} onPress={props.onPress}\u003e\n      {props.children}\n    \u003c/ButtonRoot\u003e\n  );\n};\n```\n\n### Compound Variants\n\nWhen needing to set styles for a variant based on a combination of other variants, you can create a rule for compound variants using the + sign.\n\n```javascript\nconst ButtonRoot = styled(TouchableOpacity, {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  variants: {\n    type: {\n      solid: {},\n      outline: {\n        backgroundColor: \"transparent\",\n        borderWidth: 3,\n      },\n    },\n    colorScheme: {\n      primary: {},\n      negative: {},\n      disabled: {},\n    },\n  },\n  compoundVariants: {\n    \"solid+primary\": {\n      backgroundColor: \"green\",\n    },\n    \"solid+negative\": {\n      backgroundColor: \"red\",\n    },\n    \"solid+disabled\": {\n      backgroundColor: \"gray\",\n    },\n    \"outline+primary\": {\n      borderColor: \"green\",\n    },\n    \"outline+negative\": {\n      borderColor: \"red\",\n    },\n    \"outline+disabled\": {\n      borderColor: \"gray\",\n    },\n  },\n});\n```\n\n### Under the hood\n\nThe `styled` HOC generates a map with all possible combinations for each variant.\n\n```javascript\nconst Button = styled(TouchableOpacity, {\n  variants: {\n    colorScheme: {\n      primary: {\n        /* small styles */\n      },\n      secondary: {\n        /* small styles */\n      },\n    },\n    size: {\n      small: {\n        /* small styles */\n      },\n      medium: {\n        /* medium styles */\n      },\n      large: {\n        /* large styles */\n      },\n    },\n  },\n});\n```\n\nFor example, if a button component has a variant called `type` that offers options like `primary` and `secondary`, and it has another variant called `size` that offers options like `small`, `medium`, and `large`, applying the styled HOC will generate a map like this:\n\n```javascript\nconst buttonStyles = {\n  \"primary+small\": {\n    /* combined styles */\n  },\n  \"primary+medium\": {\n    /* combined styles */\n  },\n  \"primary+large\": {\n    /* combined styles */\n  },\n  \"secondary+small\": {\n    /* combined styles */\n  },\n  \"secondary+medium\": {\n    /* combined styles */\n  },\n  \"secondary+large\": {\n    /* combined styles */\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedemartinm%2Ffast-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffedemartinm%2Ffast-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedemartinm%2Ffast-styles/lists"}