{"id":16198362,"url":"https://github.com/jacobp100/cssta","last_synced_at":"2025-06-26T05:02:19.883Z","repository":{"id":11256222,"uuid":"68830031","full_name":"jacobp100/cssta","owner":"jacobp100","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-03T18:27:21.000Z","size":3108,"stargazers_count":97,"open_issues_count":20,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-28T04:26:49.427Z","etag":null,"topics":["css","css-in-js","react"],"latest_commit_sha":null,"homepage":"https://jacobp100.github.io/cssta/","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/jacobp100.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-21T15:17:53.000Z","updated_at":"2024-03-12T13:38:08.000Z","dependencies_parsed_at":"2023-01-13T18:00:28.545Z","dependency_job_id":null,"html_url":"https://github.com/jacobp100/cssta","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/jacobp100/cssta","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobp100%2Fcssta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobp100%2Fcssta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobp100%2Fcssta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobp100%2Fcssta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacobp100","download_url":"https://codeload.github.com/jacobp100/cssta/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobp100%2Fcssta/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262003915,"owners_count":23243346,"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","css-in-js","react"],"created_at":"2024-10-10T09:13:30.104Z","updated_at":"2025-06-26T05:02:19.833Z","avatar_url":"https://github.com/jacobp100.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# [🌞 Cssta](https://jacobp100.github.io/cssta)\n\nCssta is a styling system for [React Native 📱](https://facebook.github.io/react-native/) that lets you define components using CSS.\n\nIt takes heavy inspiration from [styled-components](https://github.com/styled-components/styled-components), but makes changes for readability 👀, to enable more features 🤙, and performance ⚡️.\n\nMost notably, Cssta supports media queries, CSS animations and transitions, and CSS custom properties.\n\nPerformance-wise, Cssta compiles your CSS at compile time via a babel-plugin. Cssta is also able to perform [Svelte](https://svelte.dev)-like stripping of its framework, and is able to build many components with no Cssta runtime.\n\n```jsx\nimport cssta from \"cssta/native\";\n\nconst BlueView = cssta(View)`\n  background: blue;\n`;\n\n\u003cBlueView\u003eI am a View with a blue background\u003c/BlueView\u003e;\n```\n\nThis returns a regular React component, which when used, will have the styling applied.\n\nWe have a repo with a whole bunch of examples if you want to see how it’s setup and examples of usage. It’s over on [CsstaExample](https://github.com/jacobp100/CsstaExample).\n\n## 🔧 Setup\n\nCssta can be used with its own babel plugin, or can use [babel-plugin-macros](https://www.github.com/kentcdodds/babel-plugin-macros).\n\nYou can install Cssta with,\n\n```bash\nnpm install --save cssta\nnpm install --save-dev babel-plugin-cssta\n```\n\nIn your React Native project, you’ll find a `babel.config.js` file. Edit this to read,\n\n```diff\n module.exports = {\n+  plugins: ['babel-plugin-cssta'],\n   presets: ['module:metro-react-native-babel-preset'],\n };\n```\n\n### 🎣 Babel Plugin Macros\n\nIf you want to use babel-plugin-macros, change `babel-plugin-cssta` to `babel-plugin-macros`. You’ll then need to import the macro version of Cssta whenever you need to use it.\n\n```diff\n-import cssta from \"cssta/native\"\n+import cssta from \"cssta/native.macro\"\n```\n\n## 📝 CSS\n\nCssta supports all the CSS React Native supports, and has the same syntax as your browser.\n\n```css\nfont-size: 12px;\ncolor: red;\n```\n\nThere’s also support for short-hands.\n\n```css\nmargin: 0px 5px; /* { marginTop: 0, marginRight: 5, ... } */\nfont: bold italic 12px/18px \"Helvetica\";\n```\n\nAnd support for more complicated attributes.\n\n```css\nshadow-offset: 10px 5px; /* { width: 10, height: 5 } */\nfont-variant: small-caps; /* [\"small-caps\"] */\ntransform: scale(3) rotate(30deg); /* [{ scale: 3 }, { rotate: \"30deg\" }] */\n```\n\nFor more information, see [css-to-react-native](https://www.npmjs.com/package/css-to-react-native).\n\n## 🎛 Props\n\nWe extend the attribute selector syntax in CSS. Now when your attribute name starts with an at symbol, we’ll query the React props. We call these _prop selectors_. You can use,\n\n- `[@stringAttribute=\"stringValue\"]` for string props\n- `[@booleanAttribute]` for boolean props\n\nYou’ll always need the `\u0026` selector when using prop selectors.\n\n```jsx\nconst Message = cssta(Text)`\n  padding: 6px 12px;\n\n  \u0026[@large] {\n    padding: 12px 18px;\n  }\n\n  \u0026:not([@noOutline]) {\n    border: 1px solid grey;\n  }\n\n  \u0026[@priority=\"critical\"] {\n    background-color: red;\n  }\n  \u0026[@priority=\"important\"] {\n    background-color: orange;\n  }\n`;\n\n\u003cMessage large\u003eLarge Button with an Outline\u003c/Message\u003e;\n\u003cMessage noOutline\u003eButton with no Outline\u003c/Message\u003e;\n\u003cMessage priority=\"critical\"\u003eRed Button with an Outline\u003c/Message\u003e;\n\u003cMessage priority=\"important\"\u003eOrange Button with an Outline\u003c/Message\u003e;\n\n\u003cMessage large noOutline priority=\"critical\"\u003e\n  Large, Red Button with no Outline\n\u003c/Message\u003e;\n```\n\nAll properties defined in prop selectors are not passed down to the component—they’re really only for styling. All other props get passed down.\n\n```jsx\nconst Button = cssta(View)`\n  \u0026[@large] {\n    padding: 12px;\n  }\n`;\n\n\u003cButton large onClick={() =\u003e alert(\"clicked\")}\u003e\n  onClick Prop Passed Down\n\u003c/Button\u003e;\n```\n\n## 💗 Composition\n\nYou can style any React Native component that takes `style` as a prop—that’s most of them!\n\n```jsx\nimport { Link } from \"react-router-native\";\n\nconst StyledLink = cssta(Link)`\n  color: rebeccapurple;\n`;\n```\n\nIt is also possible to compose your own components.\n\n```jsx\nconst OutlineView = cssta(View)`\n  padding: 6px 12px;\n  border: 2px solid grey;\n  border-radius: 1000px;\n`;\n\nconst RedOutlineView = cssta(OutlineView)`\n  background-color: red;\n`;\n\nconst BlueOutlineView = cssta(OutlineView)`\n  background-color: blue;\n`;\n```\n\nYou can also define mixins—these can be used in Cssta components or as a hook in regular React components.\n\n```jsx\nconst useStyles = cssta.mixin`\n  padding: 6px 12px;\n  border: 2px solid grey;\n  border-radius: 1000px;\n`;\n\nconst RedOutlineView = cssta(View)`\n  @include ${useStyles};\n  background-color: red;\n`;\n\nconst BlueOutlineView = () =\u003e {\n  const styles = useStyles();\n  return \u003cView style={[styles, { backgroundColor: \"blue\" }]} /\u003e;\n};\n```\n\nSee in the [mixins](https://jacobp100.github.io/cssta/mixins) section.\n\n## 🖌 Overriding Styles\n\nSetting `style` on Cssta components will override those already defined by the component.\n\nBe careful setting styles `margin`, as Cssta always sets the most specific styles possible (i.e. `marginTop` etc.)\n\n```jsx\n\u003cButton style={{ marginRight: 0 }}\u003e\n  Composing Styles\n\u003c/Button\u003e\n```\n\n## 🖥 Media Queries\n\nThese work just as they do in CSS. We support `min-` and `max-` `width` and `height`, as well as `orientation: portrait` and `orientation: landscape`. We also support a non-standard `platform`, which queries whatever `Platform.OS` returns,\n\n```jsx\nconst Title = cssta(Text)`\n  font-size: 12px;\n\n  @media (min-width: 600px) {\n    font-size: 24px;\n  }\n`;\n```\n\nWe also support viewport units.\n\n```jsx\nconst Title = cssta(View)`\n  width: 20vw;\n`;\n```\n\nYou can see more under [media queries](https://jacobp100.github.io/cssta/media-queries).\n\n## 🏳️‍🌈 Theming\n\nThe best way to do theming in Cssta is by using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). Use them as in Cssta as you’d use them on the web, and they’ll just work.\n\n```jsx\nconst Inverted = cssta(View)`\n  background-color: black;\n  --primary: white;\n`;\n\nconst ThemedText = cssta(Text)`\n  color: var(--primary, black);\n  border: 1px solid var(--primary, black);\n  padding: 6px 12px;\n`;\n\n\u003cThemedText\u003eI black text\u003c/ThemedText\u003e;\n\u003cInverted\u003e\n  \u003cThemedText\u003eI am white text on a black background!\u003c/ThemedText\u003e\n\u003c/Inverted\u003e;\n```\n\nThere’s a few extra examples in [theming](https://jacobp100.github.io/cssta/theming).\n\n## ✂️ Interpolation\n\nIn addition to CSS custom properties, you can use JavaScript’s `${value}` syntax to interpolate values. Note that you can only interpolate values or parts of values, and not entire rules or mixins. This is mostly useful for using platform constants.\n\n```jsx\nconst Component = cssta(View)`\n  border-bottom: ${StyleSheet.hairlineWidth}px solid grey;\n`;\n```\n\nSee the [interpolation](https://jacobp100.github.io/cssta/interpolation) section.\n\n## 🍿 Transitions and Animations\n\nThese also work just like CSS. For transitions, it’s as simple as,\n\n```jsx\nconst Action = cssta(View)`\n  opacity: 1;\n  transition: opacity 300ms;\n\n  [@disabled] {\n    opacity: 0.5;\n  }\n`;\n```\n\nAnimations work too—you’ll need to put the keyframes in the component though.\n\n```jsx\nconst ButtonWithKeyframes = cssta(Animated.View)`\n  animation: fade-in 1s ease-in;\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n`;\n```\n\nYou’ll find more information in the [transitions \u0026 animations](https://jacobp100.github.io/cssta/transitions-animations) section.\n\n## 🤓 Refs\n\nWhen using the `ref` prop, it will refer to the component you are styling rather than the styled component.\n\n```jsx\nconst InnerRef = cssta(View)`\n  background: red;\n`;\n\n\u003cInnerRef\n  ref={reactNativeViewElement =\u003e {\n    /* Code here */\n  }}\n/\u003e;\n```\n\nSee the documentation for [`React.forwardRef`](https://reactjs.org/docs/forwarding-refs.html) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobp100%2Fcssta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacobp100%2Fcssta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobp100%2Fcssta/lists"}