{"id":22856197,"url":"https://github.com/wave-play/snazzy","last_synced_at":"2026-07-18T10:34:07.515Z","repository":{"id":65308273,"uuid":"589458083","full_name":"Wave-Play/snazzy","owner":"Wave-Play","description":"Synthetic sugar for styling on React Native","archived":false,"fork":false,"pushed_at":"2023-01-30T06:54:25.000Z","size":341,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T15:55:57.103Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Wave-Play.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":"2023-01-16T06:54:51.000Z","updated_at":"2023-01-21T19:56:29.000Z","dependencies_parsed_at":"2023-02-16T04:45:38.535Z","dependency_job_id":null,"html_url":"https://github.com/Wave-Play/snazzy","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wave-Play%2Fsnazzy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wave-Play%2Fsnazzy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wave-Play%2Fsnazzy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wave-Play%2Fsnazzy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wave-Play","download_url":"https://codeload.github.com/Wave-Play/snazzy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246436094,"owners_count":20776965,"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-12-13T08:07:29.077Z","updated_at":"2025-10-24T13:24:03.892Z","avatar_url":"https://github.com/Wave-Play.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSnazzy\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![GitHub license](https://img.shields.io/github/license/Wave-Play/snazzy?style=flat)](https://github.com/Wave-Play/snazzy/blob/main/LICENSE) [![Tests](https://github.com/Wave-Play/snazzy/workflows/CI/badge.svg)](https://github.com/Wave-Play/snazzy/actions) ![npm](https://img.shields.io/npm/v/@waveplay/snazzy) [![minizipped size](https://badgen.net/bundlephobia/minzip/@waveplay/snazzy)](https://bundlephobia.com/result?p=@waveplay/snazzy)\n\n**Synthetic sugar for styling on React Native**\n\n\u003c/div\u003e\n\n## Getting started\n\nInstall the package:\n\n```bash\nnpm install @waveplay/snazzy\n```\n\nInstead of using `StyleSheet.create()`, use `sheet()` to create your styles:\n\n```ts\nimport { sheet } from '@waveplay/snazzy'\n\nconst styles = sheet({\n\tcontainer: {\n\t\tflex: 1,\n\t\tbackgroundColor: 'white'\n\t}\n})\n\n// Alternatively, you can use the default export\nimport snazzy from '@waveplay/snazzy'\n\nconst styles = snazzy.sheet({\n\t// ...\n})\n```\n\nYou can now use destructuring to access your styles:\n\n```tsx\n\u003cView {...styles.container} /\u003e\n```\n\nSee the [sample project](https://github.com/Wave-Play/snazzy/tree/master/example) for more usage examples.\n\n## Individual styles\n\nIf you'd like to create individual styles, you can use `css()`:\n\n```ts\nimport { css } from '@waveplay/snazzy'\n\nconst containerStyle = css({\n\tflex: 1,\n\tbackgroundColor: 'white'\n})\n```\n\n... and use it like this:\n\n```tsx\n\u003cView {...containerStyle} /\u003e\n```\n\nThis is useful for creating styles as functions:\n\n```ts\nimport { css } from '@waveplay/snazzy'\n\nconst containerStyle = (color) =\u003e\n\tcss({\n\t\tflex: 1,\n\t\tbackgroundColor: color\n\t})\n```\n\n... and use it like this:\n\n```tsx\n\u003cView {...containerStyle('white')} /\u003e\n```\n\n## Merge styles\n\nYou can merge styles using the `merge()` function:\n\n```ts\nimport { css, merge } from '@waveplay/snazzy'\n\nconst containerStyle = css({\n\tflex: 1,\n\tbackgroundColor: 'white'\n})\n\nconst textStyle = css({\n\tcolor: 'black'\n})\n\nconst mergedStyle = merge(containerStyle, textStyle)\n```\n\n## Raw styles\n\nSometimes you may need to use raw style objects. You can use `cssRaw()` instead of `css()` to create these:\n\n```ts\nimport { cssRaw } from '@waveplay/snazzy'\n\nconst containerStyle = cssRaw({\n\tflex: 1,\n\tbackgroundColor: 'white'\n})\n```\n\nThis is useful for keeping the same syntax but making it compatible with more elements such as HTML:\n\n```tsx\n\u003cdiv {...containerStyle} /\u003e\n```\n\n## Conditional raw styles\n\nAlternatively, you can pass a `raw` option to `css()`. The value can be a `boolean`, `'native'`, or `'web'`:\n\n```ts\nconst containerStyle = css(\n\t{\n\t\tflex: 1,\n\t\tbackgroundColor: 'white'\n\t},\n\t{\n\t\traw: 'web' // This will be a raw style object on web, but a style object on native\n\t}\n)\n```\n\n## Custom backends\n\nSnazzy is powered by React Native's `StyleSheet` API by default. If you'd like to use a different backend, you can create your own backend by implementing the `SnazzyBackend` interface:\n\n```ts\nimport { SnazzyBackend } from '@waveplay/snazzy/backend'\nimport type { StyleProp } from 'react-native'\nimport type { RawSheet, SnazzyOptionsBackend, StyleType } from '@waveplay/snazzy/backend'\n\nclass CustomBackend implements SnazzyBackend {\n\tcreate\u003cT extends Record\u003cstring, unknown\u003e\u003e(style: T, options: SnazzyOptionsBackend): RawSheet\u003cT\u003e {\n\t\t// ...\n\t}\n\n\tmerge\u003cT extends StyleType\u003e(...styles: StyleProp\u003cT\u003e[]): StyleProp\u003cT\u003e {\n\t\t// ...\n\t}\n}\n```\n\nYou can then create a new instance of Snazzy with your custom backend:\n\n```ts\nimport { Snazzy } from '@waveplay/snazzy/core'\n\nconst snazz = new Snazzy({\n\tbackend: new CustomBackend()\n})\nexport default snazz\n```\n\nDon't forget to also export individual function bindings to keep the same import syntax:\n\n```ts\nexport const css: typeof snazz.css = snazz.css.bind(snazz)\nexport const cssRaw: typeof snazz.cssRaw = snazz.cssRaw.bind(snazz)\nexport const merge: typeof snazz.merge = snazz.merge.bind(snazz)\nexport const sheet: typeof snazz.sheet = snazz.sheet.bind(snazz)\n```\n\n## Transformers\n\nTransformers are functions that can modify the styles. You can create your own transformers by implementing the `SnazzyTransformer` interface and passing it to the `transformers` option in a new instance of Snazzy:\n\n```ts\nimport { Snazzy } from '@waveplay/snazzy/core'\nimport { DefaultBackend } from '@waveplay/snazzy/backend/default'\nimport type { SnazzyOptions, StyleType } from '@waveplay/snazzy/backend'\n\n// This transformer will change the background color of the style to pink if the id is 'title'\nconst exampleTransformer = \u003cT extends StyleType\u003e(style: T, options: SnazzyOptions) =\u003e {\n\tif (options?.id === 'title') {\n\t\tstyle.backgroundColor = 'pink'\n\t}\n\n\treturn style\n}\n\nconst snazz = new Snazzy({\n\tbackend: new DefaultBackend(),\n\ttransformers: [exampleTransformer]\n})\n```\n\n## Default instance\n\nWhen you use `import snazzy from '@waveplay/snazzy'`, you're importing the default instance of Snazzy. This instance uses `StyleSheet` as its backend.\n\nThis may be considered unnecessary overhead if you're creating new instances of Snazzy in your code instead of using the default instance. Import from `@waveplay/snazzy/core` instead to avoid this overhead.\n\n```ts\nimport { Snazzy } from '@waveplay/snazzy/core'\n\nconst snazzy = new Snazzy({\n\t// ... your custom options\n})\n```\n\n## Credits\n\nThis project was originally developed for [WavePlay](https://waveplay.com).\n\n## License\n\nThe MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwave-play%2Fsnazzy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwave-play%2Fsnazzy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwave-play%2Fsnazzy/lists"}