├── .changeset ├── README.md └── config.json ├── .github └── workflows │ ├── ci.yml │ └── publish.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md ├── babel.config.js ├── jest.config.js ├── package.json ├── src ├── css.js └── index.js ├── test ├── __snapshots__ │ └── index.js.snap ├── css.js └── index.js └── yarn.lock /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.0.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "linked": [], 6 | "access": "restricted", 7 | "baseBranch": "master" 8 | } -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Run CI 2 | on: [push] 3 | 4 | jobs: 5 | test: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Cloning the repository 9 | uses: actions/checkout@v2 10 | - name: Install Node 11 | uses: actions/setup-node@v1 12 | with: 13 | node-version: 12 14 | - run: yarn install 15 | - run: yarn test 16 | env: 17 | CI: true 18 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | - run: yarn install --frozen-lockfile 16 | - run: yarn test 17 | 18 | publish-npm: 19 | needs: build 20 | runs-on: ubuntu-latest 21 | steps: 22 | - uses: actions/checkout@v2 23 | - uses: actions/setup-node@v1 24 | with: 25 | node-version: 12 26 | registry-url: https://registry.npmjs.org/ 27 | - run: yarn install --frozen-lockfile 28 | - run: yarn publish 29 | env: 30 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | babel.config.js 2 | jest.config.js 3 | test 4 | coverage 5 | CODE_OF_CONDUCT.md 6 | .prettierrc 7 | .github -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { "semi": false } 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # theme-ui-native 2 | 3 | ## 1.0.0 4 | 5 | ### Major Changes 6 | 7 | - cbeaf46: `useTheme` hook now returns an object that contains the `theme` object and the `sx` function 8 | 9 | `sx` this function is returned from the `useTheme` hook and allows a user to add theme aware styles to a component without having to use `styled` or the `jsx` pragma. See README for more details. 10 | 11 | #### What 12 | 13 | The `useTheme` hook previously returned the theme object it now returns an object that contains `theme` prop and the `sx` prop 14 | 15 | #### Why 16 | 17 | We moved to an object as it allows for future features to be added into the `useTheme` hook without breaking changes 18 | 19 | #### How 20 | 21 | Previously you would access the theme object like so 22 | 23 | ```js 24 | const theme = useTheme() 25 | ``` 26 | 27 | You will now need to access it like so 28 | 29 | ```js 30 | const { theme } = useTheme() 31 | ``` 32 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. 8 | 9 | ## Our Standards 10 | 11 | Examples of behavior that contributes to a positive environment for our community include: 12 | 13 | - Demonstrating empathy and kindness toward other people 14 | - Being respectful of differing opinions, viewpoints, and experiences 15 | - Giving and gracefully accepting constructive feedback 16 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 17 | - Focusing on what is best not just for us as individuals, but for the overall community 18 | 19 | Examples of unacceptable behavior include: 20 | 21 | - The use of sexualized language or imagery, and sexual attention or 22 | advances of any kind 23 | - Trolling, insulting or derogatory comments, and personal or political attacks 24 | - Public or private harassment 25 | - Publishing others' private information, such as a physical or email 26 | address, without their explicit permission 27 | - Other conduct which could reasonably be considered inappropriate in a 28 | professional setting 29 | 30 | ## Enforcement Responsibilities 31 | 32 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 33 | 34 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. 35 | 36 | ## Scope 37 | 38 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 39 | 40 | ## Enforcement 41 | 42 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at sam.jbmason@gmail.com. All complaints will be reviewed and investigated promptly and fairly. 43 | 44 | All community leaders are obligated to respect the privacy and security of the reporter of any incident. 45 | 46 | ## Enforcement Guidelines 47 | 48 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 49 | 50 | ### 1. Correction 51 | 52 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 53 | 54 | **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 55 | 56 | ### 2. Warning 57 | 58 | **Community Impact**: A violation through a single incident or series of actions. 59 | 60 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 61 | 62 | ### 3. Temporary Ban 63 | 64 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. 65 | 66 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 67 | 68 | ### 4. Permanent Ban 69 | 70 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 71 | 72 | **Consequence**: A permanent ban from any sort of public interaction within the community. 73 | 74 | ## Attribution 75 | 76 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, 77 | available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 78 | 79 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 80 | 81 | [homepage]: https://www.contributor-covenant.org 82 | 83 | For answers to common questions about this code of conduct, see the FAQ at 84 | https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. 85 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Sam Mason de Caires 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # Theme UI Native 8 | 9 | Theme UI for React Native allows you to build consistent, theme-able React Native apps based on constraint-based design principles 10 | 11 | [![GitHub][github-badge]][github] 12 | [![Build Status][github-actions-badge]][github-actions] 13 | [![Version][version]][npm] 14 | ![MIT License][license] 15 | [![system-ui/theme][system-ui-badge]](https://system-ui.com/theme) 16 | ![][size] 17 | 18 | [github]: https://github.com/samjbmason/theme-ui-native 19 | [github-badge]: https://badgen.net/badge/-/github?icon=github&label 20 | [github-actions]: https://github.com/samjbmason/theme-ui-native/actions 21 | [github-actions-badge]: https://github.com/samjbmason/theme-ui-native/workflows/Run%20CI/badge.svg 22 | [version]: https://badgen.net/npm/v/theme-ui-native 23 | [npm]: https://npmjs.com/package/theme-ui-native 24 | [license]: https://badgen.net/badge/license/MIT/blue 25 | [system-ui-badge]: https://badgen.net/badge/system-ui/theme/black 26 | [size]: https://badgen.net/bundlephobia/minzip/theme-ui-native 27 | 28 | Built for React Native applications where customising colours, typography, and layout are treated as first-class citizens and based on a standard [Theme Specification](https://system-ui.com/theme), Theme UI For React Native is intended to work in a variety of applications and UI components. Colors, typography, and layout styles derived from customizable theme-based design scales help you build UI rooted in constraint-based design principles. 29 | 30 | - [Getting started](#getting-started) 31 | - [Usage](#usage) 32 | - [Differences between Theme UI for Web & Theme UI for React Native](#differences-between-theme-ui-for-web-and-theme-ui-for-react-native) 33 | - [API](#api) 34 | 35 | ## Getting started 36 | 37 | ```bash 38 | npm install theme-ui-native 39 | ``` 40 | 41 | Any styles in your app can reference values from the global theme object. To provide the theme in context, wrap your application with the ThemeProvider component and pass in a custom theme object. 42 | 43 | ```jsx 44 | // basic usage 45 | import React from "react" 46 | import { ThemeProvider } from "theme-ui-native" 47 | import theme from "./theme" 48 | 49 | export default props => ( 50 | {props.children} 51 | ) 52 | ``` 53 | 54 | The theme object follows the System UI [Theme Specification](https://system-ui.com/theme), which lets you define custom color palettes, typographic scales, fonts, and more. Read more about [theming](https://theme-ui.com/theming/). 55 | 56 | ```jsx 57 | // example theme.js 58 | export default { 59 | fonts: { 60 | body: "Avenir Next", 61 | monospace: "Menlo, monospace" 62 | }, 63 | colors: { 64 | text: "#000", 65 | background: "#fff", 66 | primary: "#33e" 67 | } 68 | } 69 | ``` 70 | 71 | ## Usage 72 | 73 | ### `sx` prop 74 | 75 | The `sx` prop works similarly to Theme UI's `sx` prop, accepting style objects to add styles directly to an element in JSX, with theme-aware functionality. Using the `sx` prop for styles means that certain properties can reference values defined in your theme object. This is intended to make keeping styles consistent throughout your app the easy thing to do. 76 | 77 | The `sx` prop only works in modules that have defined a custom pragma at the top of the file, which replaces the default `React.createElement` function. This means you can control which modules in your application opt into this feature without the need for a Babel plugin or additional configuration. 78 | 79 | ```jsx 80 | /** @jsx jsx */ 81 | import { jsx } from "theme-ui-native" 82 | import { Text } from "react-native" 83 | 84 | export default props => ( 85 | 92 | Hello 93 | 94 | ) 95 | ``` 96 | 97 | ### `styled` function 98 | 99 | The `styled` function works similarly to Emotion's `styled` function, the first argument accepts a React component and the second argument accepts a style object that adds theme aware style properties to the `style` prop. The function returns a React component that can be used as normal within your application. 100 | 101 | ```jsx 102 | import React from "react" 103 | import { Text } from "react-native" 104 | import { styled } from "theme-ui-native" 105 | 106 | const Headline = styled(Text, { 107 | marginY: 2, // picks up value from `theme.space[2]` 108 | color: "primary" // picks up value from `theme.color.primary` 109 | }) 110 | 111 | export default () => Hello 112 | ``` 113 | 114 | Components that are created with the styled function get the added ability of being able to use the `sx` prop. This allows you to set default styles and then override at each call site with theme aware values. 115 | 116 | ```jsx 117 | import React from "react" 118 | import { Text } from "react-native" 119 | import { styled } from "theme-ui-native" 120 | 121 | const Headline = styled(Text, { 122 | marginY: 2, 123 | color: "primary" 124 | }) 125 | 126 | export default () => ( 127 | <> 128 | Hello {/* output will use color `primary` */} 129 | 134 | Hello 135 | 136 | 137 | ) 138 | ``` 139 | 140 | You can use a function as the second argument in `styled`, this function has access to all the props of the component and the theme object. This enables you to change values dynamically based on props. 141 | 142 | ```jsx 143 | import React from "react" 144 | import { Text } from "react-native" 145 | import { styled } from "theme-ui-native" 146 | 147 | const Headline = styled(Text, ({ isEnabled, theme }) => ({ 148 | color: isEnabled ? "primary" : "secondary" 149 | })) 150 | 151 | export default () => Hello 152 | ``` 153 | 154 | ### Raw values 155 | 156 | If you would like to not use a theme value and instead use a literal value, you can pass the value as a string. The raw value is converted into a number so that it is compatible with React Natives style API. 157 | 158 | ```jsx 159 | /** @jsx jsx */ 160 | import { jsx } from "theme-ui-native" 161 | import { Text } from "react-native" 162 | 163 | export default props => ( 164 | 170 | Hello 171 | 172 | ) 173 | ``` 174 | 175 | You can also use raw values by using the `style` prop as usual. These styles will take precedence over any styles created with the `sx` prop. 176 | 177 | ```jsx 178 | /** @jsx jsx */ 179 | import { jsx } from "theme-ui-native" 180 | import { Text } from "react-native" 181 | 182 | export default props => ( 183 | 190 | Hello 191 | 192 | ) 193 | // Final output will be 194 | // {color: '#000', marginX: 2} 195 | ``` 196 | 197 | ### `sx` function 198 | 199 | The `sx` function provides another option for adding theme aware style properties to your React components without the need for using the `styled` function or the `jsx` pragma. 200 | 201 | ```jsx 202 | 203 | import { useTheme } from "theme-ui-native" 204 | import { Text } from "react-native" 205 | 206 | export default props => { 207 | const { sx } = useTheme() 208 | 209 | return ( 210 | 216 | Hello 217 | 218 | ) 219 | } 220 | // Final output will be 221 | // {color: '#000', marginX: 2} 222 | ``` 223 | 224 | ## Differences between Theme UI for Web and Theme UI for React Native 225 | 226 | ### Responsive styles 227 | 228 | If you are coming from using Theme UI for web applications you are probably familiar with using arrays as values to change properties responsively based on breakpoints. This API isn't included Theme UI Native as there is currently no concept of responsive breakpoints within the React Native ecosystem. 229 | 230 | ### Body styles 231 | 232 | There is no concept of the global styles within React Native and so this functionality is not available within Theme UI Native. 233 | 234 | ### MDX content 235 | 236 | We haven't ported over MDX styling at this time as it seems unlikely to be used within the React Native context 237 | 238 | ### Color modes 239 | 240 | We currently don't support color modes but are very open to the integrating them in future versions, feel free to raise a issue or PR if you have ideas on how to implement this. 241 | 242 | ## API 243 | 244 | ### `jsx` 245 | 246 | The `jsx` export is a React create element function intended for use with a custom pragma comment. It adds support for the `sx` prop, which parses style objects with the Theme UI Native `css` utility. 247 | 248 | ```jsx 249 | /** @jsx jsx */ 250 | import { jsx } from "theme-ui-native" 251 | import { Text } from "react-native" 252 | 253 | export default props => ( 254 | 260 | ) 261 | ``` 262 | 263 | ### `ThemeProvider` 264 | 265 | The `ThemeProvider` provides context to components that use the `sx` prop. 266 | 267 | | Prop | Type | Description | 268 | | ---------- | ------ | ---------------------- | 269 | | `theme` | Object | Theming context object | 270 | | `children` | Node | React children | 271 | 272 | ### `styled` 273 | 274 | The `styled` function allows you to create components that can be styled using theme aware styles. The newly created components also have access to the `sx` prop, which allows for per call site theme aware style overrides. 275 | 276 | The first argument expects a react component, the second argument expects either a object containing styles or a function that returns a style object. If a function is used the props and theme are passed as the functions argument as an object. 277 | 278 | ```js 279 | import { Text } from "react-native" 280 | 281 | const Heading = styled(Text, { color: "primary" }) 282 | 283 | const Box = styled(View, ({ theme, ...props }) => ({ 284 | color: theme.colors.primary 285 | })) 286 | ``` 287 | 288 | ### `useTheme` 289 | 290 | The `useTheme` hook returns an object that contains full Theme UI Native context object, which includes the `theme` and the `sx` function. 291 | 292 | ```js 293 | const { theme, sx } = useTheme() 294 | ``` 295 | 296 | ### `sx` 297 | 298 | The `sx` function is returned from the `useTheme` hook, you can use it to style your components with theme aware styles. You should use it within the `style` prop and it will return a style object with the theme values mapped to it. This works in a similar way to how the `sx` prop from the `jsx` pragma works under the hood. 299 | 300 | ```jsx 301 | import React from "react" 302 | import { View } from "react-native" 303 | import { useTheme } from "theme-ui-native" 304 | 305 | export default () => { 306 | const { sx } = useTheme() 307 | 308 | return Hello world 309 | } 310 | ``` 311 | 312 | MIT License 313 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | test: { 4 | presets: ["module:metro-react-native-babel-preset"] 5 | } 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@testing-library/react-native", 3 | setupFilesAfterEnv: ["@testing-library/react-native/cleanup-after-each"], 4 | testMatch: ["**/test/*.{js,ts,tsx}"] 5 | }; 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme-ui-native", 3 | "version": "1.0.0", 4 | "description": "Build consistent, theme-able React Native apps based on constraint-based design principles", 5 | "source": "src/index.js", 6 | "main": "dist/index.js", 7 | "module": "dist/index.esm.js", 8 | "sideEffects": false, 9 | "author": "Sam Mason de Caires ", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "respository": "samjbmason/theme-ui-native", 15 | "scripts": { 16 | "test": "jest", 17 | "prepare": "yarn run build", 18 | "build": "microbundle --no-compress", 19 | "watch": "microbundle watch" 20 | }, 21 | "peerDependencies": { 22 | "react": "^16.9.0" 23 | }, 24 | "devDependencies": { 25 | "@changesets/cli": "^2.6.1", 26 | "@testing-library/jest-native": "^3.1.0", 27 | "@testing-library/react-native": "^5.0.3", 28 | "jest": "^25.1.0", 29 | "metro-react-native-babel-preset": "^0.58.0", 30 | "microbundle": "^0.11.0", 31 | "react": "^16.13.0", 32 | "react-native": "^0.61.5", 33 | "react-test-renderer": "^16.13.0" 34 | }, 35 | "keywords": [ 36 | "theme-ui", 37 | "design-system", 38 | "react-native", 39 | "css", 40 | "styles", 41 | "css-in-js" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /src/css.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = { 2 | space: [0, 4, 8, 16, 32, 64, 128, 256, 512], 3 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] 4 | } 5 | 6 | export const get = (obj, key, def, p, undef) => { 7 | const path = key && typeof key === "string" ? key.split(".") : [key] 8 | for (p = 0; p < path.length; p++) { 9 | obj = obj ? obj[path[p]] : undef 10 | } 11 | return obj === undef ? def : obj 12 | } 13 | 14 | const aliases = { 15 | bg: "backgroundColor", 16 | m: "margin", 17 | mt: "marginTop", 18 | mr: "marginRight", 19 | mb: "marginBottom", 20 | ml: "marginLeft", 21 | mx: "marginHorizontal", 22 | my: "marginVertical", 23 | marginX: "marginHorizontal", 24 | marginY: "marginVertical", 25 | p: "padding", 26 | pt: "paddingTop", 27 | pr: "paddingRight", 28 | pb: "paddingBottom", 29 | pl: "paddingLeft", 30 | px: "paddingHorizontal", 31 | py: "paddingVertical", 32 | paddingX: "paddingHorizontal", 33 | paddingY: "paddingVertical" 34 | } 35 | 36 | const multiples = { 37 | size: ["width", "height"] 38 | } 39 | 40 | export const scales = { 41 | width: "sizes", 42 | height: "sizes", 43 | bottom: "space", 44 | end: "space", 45 | left: "space", 46 | right: "space", 47 | start: "space", 48 | top: "space", 49 | minWidth: "sizes", 50 | maxWidth: "sizes", 51 | minHeight: "sizes", 52 | maxHeight: "sizes", 53 | margin: "space", 54 | marginTop: "space", 55 | marginRight: "space", 56 | marginBottom: "space", 57 | marginLeft: "space", 58 | marginStart: "space", 59 | marginEnd: "space", 60 | marginHorizontal: "space", 61 | marginVertical: "space", 62 | padding: "space", 63 | paddingTop: "space", 64 | paddingRight: "space", 65 | paddingBottom: "space", 66 | paddingLeft: "space", 67 | paddingStart: "space", 68 | paddingEnd: "space", 69 | paddingHorizontal: "space", 70 | paddingVertical: "space", 71 | paddingX: "space", 72 | paddingY: "space", 73 | borderWidth: "borderWidths", 74 | borderTopWidth: "borderWidths", 75 | borderRightWidth: "borderWidths", 76 | borderBottomWidth: "borderWidths", 77 | borderLeftWidth: "borderWidths", 78 | borderEndWidth: "borderWidths", 79 | borderStartWidth: "borderWidths", 80 | zIndex: "zIndices", 81 | shadowColor: "colors", 82 | backgroundColor: "colors", 83 | borderColor: "colors", 84 | borderBottomColor: "colors", 85 | borderEndColor: "colors", 86 | borderLeftColor: "colors", 87 | borderRightColor: "colors", 88 | borderStartColor: "colors", 89 | borderTopColor: "colors", 90 | borderRadius: "radii", 91 | borderBottomEndRadius: "radii", 92 | borderBottomLeftRadius: "radii", 93 | borderBottomRightRadius: "radii", 94 | borderBottomStartRadius: "radii", 95 | borderTopEndRadius: "radii", 96 | borderTopLeftRadius: "radii", 97 | borderTopRightRadius: "radii", 98 | borderTopStartRadius: "radii", 99 | color: "colors", 100 | fontFamily: "fonts", 101 | fontSize: "fontSizes", 102 | fontWeight: "fontWeights", 103 | textShadowColor: "colors", 104 | letterSpacing: "letterSpacings", 105 | lineHeight: "lineHeights", 106 | textDecorationColor: "colors", 107 | tintColor: "colors", 108 | overlayColor: "colors", 109 | flexBasis: "sizes", 110 | size: "sizes" 111 | } 112 | 113 | const positiveOrNegative = (scale, value) => { 114 | if (typeof value !== "number" || value >= 0) { 115 | return get(scale, value, value) 116 | } 117 | const absolute = Math.abs(value) 118 | const n = get(scale, absolute, absolute) 119 | if (typeof n === "string") return `-${n}` 120 | return Number(n) * -1 121 | } 122 | 123 | const transforms = [ 124 | "marginTop", 125 | "marginRight", 126 | "marginBottom", 127 | "marginLeft", 128 | "marginStart", 129 | "marginEnd", 130 | "marginHorizontal", 131 | "marginVertical", 132 | "top", 133 | "bottom", 134 | "left", 135 | "right", 136 | "start", 137 | "end" 138 | ].reduce( 139 | (acc, curr) => ({ 140 | ...acc, 141 | [curr]: positiveOrNegative 142 | }), 143 | {} 144 | ) 145 | 146 | const maintainStringType = ["fontWeight"] 147 | 148 | export const css = (props = {}) => (args = {}) => { 149 | const theme = { 150 | ...defaultTheme, 151 | ...("theme" in props ? props.theme : props) 152 | } 153 | let result = {} 154 | const styles = typeof args === "function" ? args(theme) : args 155 | 156 | for (const key in styles) { 157 | const x = styles[key] 158 | const val = typeof x === "function" ? x(theme) : x 159 | 160 | if (key === "variant") { 161 | const variant = css(theme)(get(theme, val)) 162 | result = { ...result, ...variant } 163 | continue 164 | } 165 | 166 | if (val && typeof val === "object") { 167 | result[key] = css(theme)(val) 168 | continue 169 | } 170 | 171 | const prop = key in aliases ? aliases[key] : key 172 | 173 | if ( 174 | !maintainStringType.includes(prop) && 175 | typeof val === "string" && 176 | !isNaN(val) 177 | ) { 178 | result[prop] = Number(val) 179 | continue 180 | } 181 | 182 | const scaleName = prop in scales ? scales[prop] : undefined 183 | const scale = get(theme, scaleName, get(theme, prop, {})) 184 | const transform = get(transforms, prop, get) 185 | const value = transform(scale, val, val) 186 | 187 | if (multiples[prop]) { 188 | const dirs = multiples[prop] 189 | for (let i = 0; i < dirs.length; i++) { 190 | result[dirs[i]] = value 191 | } 192 | } else { 193 | result[prop] = value 194 | } 195 | } 196 | 197 | return result 198 | } 199 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { createContext, createElement, useContext } from "react" 2 | import { css } from "./css" 3 | 4 | const ThemeContext = createContext({}) 5 | 6 | export const useTheme = () => { 7 | const ctx = useContext(ThemeContext) 8 | return { ...ctx, sx: css(ctx.theme) } 9 | } 10 | 11 | const getStyles = (props, theme) => { 12 | if (!props.sx && !props.style) return undefined 13 | const styles = typeof props.sx === "function" ? props.sx(theme) : props.sx 14 | const parsedStyles = css(theme)(styles) 15 | const raw = props.style 16 | return { ...parsedStyles, ...raw } 17 | } 18 | 19 | const parseProps = (props, theme) => { 20 | if (!props) return null 21 | const next = {} 22 | for (let key in props) { 23 | if (key === "sx") continue 24 | next[key] = props[key] 25 | } 26 | 27 | const styles = getStyles(props, theme) 28 | if (styles) next.style = styles 29 | return next 30 | } 31 | 32 | const hasStyles = obj => Object.getOwnPropertyNames(obj).length > 0 33 | 34 | export const ThemeProvider = ({ theme, children }) => 35 | createElement(ThemeContext.Provider, { value: { theme } }, children) 36 | 37 | export const jsx = (type, props, ...children) => { 38 | return createElement(ThemeContext.Consumer, {}, ({ theme }) => { 39 | return createElement(type, { ...parseProps(props, theme) }, ...children) 40 | }) 41 | } 42 | 43 | export const styled = (type, style) => props => { 44 | const { theme } = useTheme() 45 | const styles = 46 | typeof style === "function" ? style({ ...props, theme }) : style 47 | const sx = { ...styles, ...props.sx } 48 | const mergedProps = { ...props, ...(hasStyles(sx) && { sx }) } 49 | 50 | const parsedProps = parseProps(mergedProps, theme) 51 | 52 | return createElement(type, parsedProps) 53 | } 54 | -------------------------------------------------------------------------------- /test/__snapshots__/index.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`ThemeProvider renders 1`] = ` 4 | 13 | 14 | Hello 15 | 16 | 17 | `; 18 | 19 | exports[`jsx custom pragma handles null props 1`] = ` 20 | Object { 21 | "asJSON": [Function], 22 | "baseElement": 30 | 39 | 40 | hello 41 | 42 | 43 | , 44 | "container": 53 | 54 | hello 55 | 56 | , 57 | "debug": [Function], 58 | "findAllByDisplayValue": [Function], 59 | "findAllByHintText": [Function], 60 | "findAllByLabelText": [Function], 61 | "findAllByPlaceholderText": [Function], 62 | "findAllByRole": [Function], 63 | "findAllByTestId": [Function], 64 | "findAllByText": [Function], 65 | "findAllByTitle": [Function], 66 | "findByDisplayValue": [Function], 67 | "findByHintText": [Function], 68 | "findByLabelText": [Function], 69 | "findByPlaceholderText": [Function], 70 | "findByRole": [Function], 71 | "findByTestId": [Function], 72 | "findByText": [Function], 73 | "findByTitle": [Function], 74 | "getAllByDisplayValue": [Function], 75 | "getAllByHintText": [Function], 76 | "getAllByLabelText": [Function], 77 | "getAllByPlaceholderText": [Function], 78 | "getAllByRole": [Function], 79 | "getAllByTestId": [Function], 80 | "getAllByText": [Function], 81 | "getAllByTitle": [Function], 82 | "getByDisplayValue": [Function], 83 | "getByHintText": [Function], 84 | "getByLabelText": [Function], 85 | "getByPlaceholderText": [Function], 86 | "getByRole": [Function], 87 | "getByTestId": [Function], 88 | "getByText": [Function], 89 | "getByTitle": [Function], 90 | "queryAllByDisplayValue": [Function], 91 | "queryAllByHintText": [Function], 92 | "queryAllByLabelText": [Function], 93 | "queryAllByPlaceholderText": [Function], 94 | "queryAllByRole": [Function], 95 | "queryAllByTestId": [Function], 96 | "queryAllByText": [Function], 97 | "queryAllByTitle": [Function], 98 | "queryByDisplayValue": [Function], 99 | "queryByHintText": [Function], 100 | "queryByLabelText": [Function], 101 | "queryByPlaceholderText": [Function], 102 | "queryByRole": [Function], 103 | "queryByTestId": [Function], 104 | "queryByText": [Function], 105 | "queryByTitle": [Function], 106 | "rerender": [Function], 107 | "unmount": [Function], 108 | } 109 | `; 110 | 111 | exports[`styled works when no styles are added 1`] = ` 112 | 121 | 122 | 123 | `; 124 | -------------------------------------------------------------------------------- /test/css.js: -------------------------------------------------------------------------------- 1 | import { css, get } from "../src/css" 2 | 3 | const theme = { 4 | colors: { 5 | primary: "tomato", 6 | secondary: "cyan", 7 | background: "white", 8 | text: "black" 9 | }, 10 | fontSizes: [12, 14, 16, 24, 36], 11 | fonts: { 12 | monospace: "Menlo, monospace" 13 | }, 14 | lineHeights: { 15 | body: 1.5 16 | }, 17 | fontWeights: { 18 | bold: "600" 19 | }, 20 | letterSpacings: ["-0.01em", "-0.02em", "0.01em"], 21 | space: [0, 4, 8, 16, 32, 64, 128, 256, "512"], 22 | sizes: { 23 | small: 4, 24 | medium: 8, 25 | large: 16, 26 | sidebar: 320 27 | }, 28 | buttons: { 29 | primary: { 30 | p: 3, 31 | fontWeight: "bold", 32 | color: "white", 33 | bg: "primary", 34 | borderRadius: 2 35 | } 36 | }, 37 | text: { 38 | caps: { 39 | fontSize: [1, 2], 40 | letterSpacing: "0.1em", 41 | textTransform: "uppercase" 42 | }, 43 | title: { 44 | fontSize: [3, 4], 45 | letterSpacing: ["-0.01em", "-0.02em"] 46 | } 47 | }, 48 | borderWidths: { 49 | thin: 1 50 | }, 51 | radii: { 52 | small: 5 53 | } 54 | } 55 | 56 | describe("css", () => { 57 | test("returns an object", () => { 58 | const result = css()() 59 | expect(typeof result).toBe("object") 60 | }) 61 | 62 | test("returns styles", () => { 63 | const result = css()({ 64 | fontSize: 32, 65 | color: "blue", 66 | borderRadius: 4 67 | }) 68 | expect(result).toEqual({ 69 | fontSize: 32, 70 | color: "blue", 71 | borderRadius: 4 72 | }) 73 | }) 74 | 75 | test("handles all core styled system props", () => { 76 | const result = css({ theme })({ 77 | m: 0, 78 | mb: 2, 79 | mx: "auto", 80 | p: 3, 81 | py: 4, 82 | fontSize: 3, 83 | fontWeight: "bold", 84 | color: "primary", 85 | bg: "secondary", 86 | fontFamily: "monospace", 87 | lineHeight: "body" 88 | }) 89 | expect(result).toEqual({ 90 | margin: 0, 91 | marginBottom: 8, 92 | marginHorizontal: "auto", 93 | padding: 16, 94 | paddingVertical: 32, 95 | color: "tomato", 96 | backgroundColor: "cyan", 97 | fontFamily: "Menlo, monospace", 98 | fontSize: 24, 99 | fontWeight: "600", 100 | lineHeight: 1.5 101 | }) 102 | }) 103 | 104 | test("works with functional arguments", () => { 105 | const result = css({ theme })(t => ({ 106 | color: t.colors.primary 107 | })) 108 | expect(result).toEqual({ 109 | color: "tomato" 110 | }) 111 | }) 112 | 113 | test("supports functional values", () => { 114 | const result = css({ theme })({ 115 | color: t => t.colors.primary 116 | }) 117 | expect(result).toEqual({ 118 | color: "tomato" 119 | }) 120 | }) 121 | 122 | test("returns variants from theme", () => { 123 | const result = css(theme)({ 124 | variant: "buttons.primary" 125 | }) 126 | expect(result).toEqual({ 127 | padding: 16, 128 | fontWeight: "600", 129 | color: "white", 130 | backgroundColor: "tomato", 131 | borderRadius: 2 132 | }) 133 | }) 134 | 135 | test("handles negative margins from scale", () => { 136 | const result = css(theme)({ 137 | mt: -3, 138 | mx: -4 139 | }) 140 | expect(result).toEqual({ 141 | marginTop: -16, 142 | marginHorizontal: -32 143 | }) 144 | }) 145 | 146 | test("handles string negative values", () => { 147 | const result = css(theme)({ 148 | letterSpacing: 1, 149 | mx: 4 150 | }) 151 | expect(result).toEqual({ 152 | letterSpacing: "-0.02em", 153 | marginHorizontal: 32 154 | }) 155 | }) 156 | 157 | test("handles negative string values from scale", () => { 158 | const result = css(theme)({ 159 | my: -8, 160 | mx: 4 161 | }) 162 | expect(result).toEqual({ 163 | marginVertical: "-512", 164 | marginHorizontal: 32 165 | }) 166 | }) 167 | 168 | test("handles negative top, left, bottom, and right from scale", () => { 169 | const result = css(theme)({ 170 | top: -1, 171 | right: -4, 172 | bottom: -3, 173 | left: -2 174 | }) 175 | expect(result).toEqual({ 176 | top: -4, 177 | right: -32, 178 | bottom: -16, 179 | left: -8 180 | }) 181 | }) 182 | 183 | test("multiples are transformed", () => { 184 | const style = css(theme)({ 185 | marginX: 2, 186 | marginY: 2, 187 | paddingX: 2, 188 | paddingY: 2, 189 | size: "large" 190 | }) 191 | expect(style).toEqual({ 192 | marginHorizontal: 8, 193 | marginVertical: 8, 194 | paddingHorizontal: 8, 195 | paddingVertical: 8, 196 | width: 16, 197 | height: 16 198 | }) 199 | }) 200 | 201 | test("returns individual border styles", () => { 202 | const result = css(theme)({ 203 | borderTopWidth: "thin", 204 | borderTopColor: "primary", 205 | borderTopLeftRadius: "small", 206 | borderTopRightRadius: "small", 207 | borderTopStartRadius: "small", 208 | borderTopEndRadius: "small", 209 | borderBottomWidth: "thin", 210 | borderBottomColor: "primary", 211 | borderBottomLeftRadius: "small", 212 | borderBottomRightRadius: "small", 213 | borderBottomStartRadius: "small", 214 | borderBottomEndRadius: "small", 215 | borderRightWidth: "thin", 216 | borderRightColor: "primary", 217 | borderLeftWidth: "thin", 218 | borderLeftColor: "primary" 219 | }) 220 | expect(result).toEqual({ 221 | borderTopColor: "tomato", 222 | borderTopWidth: 1, 223 | borderTopLeftRadius: 5, 224 | borderTopRightRadius: 5, 225 | borderTopStartRadius: 5, 226 | borderTopEndRadius: 5, 227 | borderBottomColor: "tomato", 228 | borderBottomWidth: 1, 229 | borderBottomLeftRadius: 5, 230 | borderBottomRightRadius: 5, 231 | borderBottomStartRadius: 5, 232 | borderBottomEndRadius: 5, 233 | borderRightColor: "tomato", 234 | borderRightWidth: 1, 235 | borderLeftColor: "tomato", 236 | borderLeftWidth: 1 237 | }) 238 | }) 239 | 240 | test("flexBasis uses theme.sizes", () => { 241 | const style = css(theme)({ 242 | flexBasis: "sidebar" 243 | }) 244 | expect(style).toEqual({ 245 | flexBasis: 320 246 | }) 247 | }) 248 | 249 | test("string values are passed as raw value numbers", () => { 250 | const style = css(theme)({ 251 | fontSize: "2", 252 | marginX: "auto", 253 | marginY: "4", 254 | margin: "4", 255 | paddingX: "2", 256 | paddingY: "2", 257 | padding: "2", 258 | borderTopWidth: "2", 259 | fontWeight: "600" 260 | }) 261 | 262 | expect(style).toEqual({ 263 | fontSize: 2, 264 | marginHorizontal: "auto", 265 | marginVertical: 4, 266 | margin: 4, 267 | paddingHorizontal: 2, 268 | paddingVertical: 2, 269 | padding: 2, 270 | borderTopWidth: 2, 271 | fontWeight: "600" 272 | }) 273 | }) 274 | 275 | test("handles style properties that are objects", () => { 276 | const style = css(theme)({ 277 | textShadowOffset: { width: 1, height: 1 }, 278 | color: "primary" 279 | }) 280 | 281 | expect(style).toEqual({ 282 | textShadowOffset: { width: 1, height: 1 }, 283 | color: "tomato" 284 | }) 285 | }) 286 | 287 | test("handles non-scale values", () => { 288 | const result = css(theme)({ 289 | textDecorationLine: "line-through", 290 | mx: 2 291 | }) 292 | expect(result).toEqual({ 293 | textDecorationLine: "line-through", 294 | marginHorizontal: 8 295 | }) 296 | }) 297 | 298 | test("uses raw value if value outside of scale is used", () => { 299 | const result = css(theme)({ 300 | fontSize: 10, 301 | mx: 10 302 | }) 303 | expect(result).toEqual({ 304 | fontSize: 10, 305 | marginHorizontal: 10 306 | }) 307 | }) 308 | }) 309 | 310 | describe("get", () => { 311 | test("fallbacks to default value if object isnt present", () => { 312 | const result = get(null, 1, {}) 313 | expect(result).toEqual({}) 314 | }) 315 | }) 316 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Text } from "react-native" 3 | import { render } from "@testing-library/react-native" 4 | import { toHaveStyle, toHaveProp } from "@testing-library/jest-native" 5 | import { ThemeProvider, useTheme, jsx, styled, sx } from "../src" 6 | 7 | expect.extend({ toHaveStyle, toHaveProp }) 8 | 9 | describe("ThemeProvider", () => { 10 | test("renders", () => { 11 | const { container } = render( 12 | 13 | Hello 14 | 15 | ) 16 | expect(container).toMatchSnapshot() 17 | }) 18 | }) 19 | 20 | describe("useTheme", () => { 21 | test("returns theme context", () => { 22 | let context 23 | const GetContext = () => { 24 | context = useTheme() 25 | return false 26 | } 27 | render( 28 | 35 | 36 | 37 | ) 38 | 39 | expect(context).toBeTruthy() 40 | expect(context.theme.colors.text).toBe("tomato") 41 | }) 42 | 43 | test("returns sx function", () => { 44 | let context 45 | const GetContext = () => { 46 | context = useTheme() 47 | return false 48 | } 49 | render( 50 | 57 | 58 | 59 | ) 60 | 61 | expect(context).toBeTruthy() 62 | expect(context.sx).toBeInstanceOf(Function) 63 | }) 64 | }) 65 | 66 | describe("jsx", () => { 67 | test("custom pragma adds styles", () => { 68 | const { getByTestId } = render( 69 | jsx(Text, { 70 | sx: { marginHorizontal: 2, fontSize: 2, color: "red" }, 71 | testID: "test" 72 | }) 73 | ) 74 | 75 | expect(getByTestId("test")).toHaveStyle({ 76 | marginHorizontal: 8 77 | }) 78 | expect(getByTestId("test")).toHaveStyle({ 79 | fontSize: 16 80 | }) 81 | expect(getByTestId("test")).toHaveStyle({ 82 | color: "red" 83 | }) 84 | }) 85 | 86 | test("custom pragma handles null props", () => { 87 | const json = render(jsx(Text, null, "hello")) 88 | expect(json).toMatchSnapshot() 89 | }) 90 | 91 | test("removes sx prop", () => { 92 | const { getByTestId } = render( 93 | jsx(Text, { 94 | sx: { marginHorizontal: 2, fontSize: 2, color: "red" }, 95 | testID: "test" 96 | }) 97 | ) 98 | expect(getByTestId("test")).not.toHaveProp("sx") 99 | }) 100 | 101 | test("adds raw values from style prop", () => { 102 | const { getByTestId } = render( 103 | jsx(Text, { 104 | style: { marginHorizontal: 2 }, 105 | testID: "test" 106 | }) 107 | ) 108 | 109 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 2 }) 110 | }) 111 | 112 | test("sx prop can accept a function", () => { 113 | const { getByTestId } = render( 114 | jsx( 115 | ThemeProvider, 116 | { 117 | theme: { 118 | colors: { 119 | primary: "tomato" 120 | } 121 | } 122 | }, 123 | jsx(Text, { 124 | sx: t => ({ color: t.colors.primary }), 125 | testID: "test" 126 | }) 127 | ) 128 | ) 129 | expect(getByTestId("test")).toHaveStyle({ color: "tomato" }) 130 | }) 131 | 132 | test("sx and style prop can be used together", () => { 133 | const { getByTestId } = render( 134 | jsx(Text, { 135 | style: { 136 | margin: 0 137 | }, 138 | sx: { 139 | backgroundColor: "tomato" 140 | }, 141 | testID: "test" 142 | }) 143 | ) 144 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "tomato" }) 145 | expect(getByTestId("test")).toHaveStyle({ margin: 0 }) 146 | }) 147 | 148 | test("sx prop supports dot notation", () => { 149 | const { getByTestId } = render( 150 | jsx( 151 | ThemeProvider, 152 | { 153 | theme: { 154 | colors: { 155 | text: "black", 156 | base: { 157 | blue: ["#07c"], 158 | primary: "cyan" 159 | } 160 | } 161 | } 162 | }, 163 | jsx(Text, { 164 | sx: { 165 | color: "base.blue.0", 166 | backgroundColor: "base.primary" 167 | }, 168 | testID: "test" 169 | }) 170 | ) 171 | ) 172 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "cyan" }) 173 | expect(getByTestId("test")).toHaveStyle({ color: "#07c" }) 174 | }) 175 | 176 | test("does not add style prop when not provided", () => { 177 | const { getByTestId } = render(jsx(Text, { testID: "test" }, "hi")) 178 | expect(getByTestId("test")).not.toHaveProp("style") 179 | }) 180 | }) 181 | 182 | describe("styled", () => { 183 | test("does not add style prop when not provided", () => { 184 | const Test = styled(Text) 185 | const { getByTestId } = render() 186 | 187 | expect(getByTestId("test")).not.toHaveProp("style") 188 | }) 189 | 190 | test("works when no styles are added", () => { 191 | const Test = styled(Text, {}) 192 | const { container } = render() 193 | expect(container).toMatchSnapshot() 194 | }) 195 | 196 | test("adds styles when using function call argument", () => { 197 | const theme = { colors: { primary: "#07c" }, space: [0, 8, 16] } 198 | const Test = styled(Text, { 199 | marginHorizontal: 2, 200 | color: "tomato", 201 | backgroundColor: "primary" 202 | }) 203 | 204 | const { getByTestId } = render( 205 | 206 | 207 | 208 | ) 209 | 210 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "#07c" }) 211 | expect(getByTestId("test")).toHaveStyle({ color: "tomato" }) 212 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 16 }) 213 | }) 214 | 215 | test("adds styles when passing function to argument", () => { 216 | const theme = { colors: { primary: "#07c" }, space: [0, 8, 16] } 217 | const Test = styled(Text, ({ marginH }) => ({ 218 | marginHorizontal: marginH, 219 | color: "tomato", 220 | backgroundColor: "primary" 221 | })) 222 | 223 | const { getByTestId } = render( 224 | 225 | 226 | 227 | ) 228 | 229 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "#07c" }) 230 | expect(getByTestId("test")).toHaveStyle({ color: "tomato" }) 231 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 16 }) 232 | }) 233 | 234 | test("adds styles when using sx prop", () => { 235 | const theme = { colors: { primary: "#07c" }, space: [0, 8, 16] } 236 | const Test = styled(Text) 237 | 238 | const { getByTestId } = render( 239 | 240 | 248 | 249 | ) 250 | 251 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "#07c" }) 252 | expect(getByTestId("test")).toHaveStyle({ color: "tomato" }) 253 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 16 }) 254 | }) 255 | 256 | test("styles passed in through sx prop override argument styles", () => { 257 | const Test = styled(Text, { marginHorizontal: 16, color: "red" }) 258 | const { getByTestId } = render( 259 | 260 | ) 261 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 20 }) 262 | expect(getByTestId("test")).toHaveStyle({ color: "red" }) 263 | }) 264 | 265 | test("works with style prop, sx prop and argument styles", () => { 266 | const theme = { colors: { primary: "#07c" }, space: [0, 8, 16] } 267 | const Test = styled(Text, { marginHorizontal: 0, color: "red" }) 268 | const { getByTestId } = render( 269 | 270 | 275 | 276 | ) 277 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 30 }) 278 | expect(getByTestId("test")).toHaveStyle({ color: "#07c" }) 279 | }) 280 | }) 281 | 282 | describe("sx", () => { 283 | test("adds style object to component", () => { 284 | const theme = { colors: { primary: "#07c" }, space: [0, 8, 16] } 285 | 286 | const Test = () => { 287 | const { sx } = useTheme() 288 | return ( 289 | 297 | ) 298 | } 299 | 300 | const { getByTestId } = render( 301 | 302 | 303 | 304 | ) 305 | 306 | expect(getByTestId("test")).toHaveStyle({ backgroundColor: "#07c" }) 307 | expect(getByTestId("test")).toHaveStyle({ color: "tomato" }) 308 | expect(getByTestId("test")).toHaveStyle({ marginHorizontal: 16 }) 309 | }) 310 | }) 311 | --------------------------------------------------------------------------------