├── src
    ├── __tests__
    │   └── index.test.tsx
    ├── utils.ts
    ├── types.ts
    └── index.tsx
├── .gitattributes
├── tsconfig.build.json
├── babel.config.js
├── .yarnrc
├── assets
    ├── transpile-flow.png
    └── styled-variants.jpeg
├── example
    ├── src
    │   ├── App.tsx
    │   ├── AnimeApp
    │   │   ├── theme.ts
    │   │   ├── components
    │   │   │   └── Header.tsx
    │   │   └── App.tsx
    │   └── BenchmarkApp
    │   │   ├── Benchmark.tsx
    │   │   └── theme.ts
    ├── index.js
    ├── extension.d.ts
    ├── tsconfig.json
    ├── app.json
    ├── babel.config.js
    ├── webpack.config.js
    ├── metro.config.js
    └── package.json
├── .editorconfig
├── README.md
├── babel-plugin
    ├── package.json
    ├── index.js
    ├── playground.js
    ├── utility-props.js
    ├── hash.js
    ├── utility-prop-v2.js
    ├── __test__
    │   ├── index.test.jsx
    │   └── __snapshots__
    │   │   └── index.test.jsx.snap
    ├── utility-prop-visitor.js
    ├── utility-prop-v3.js
    └── visitor.js
├── scripts
    └── bootstrap.js
├── tsconfig.json
├── .gitignore
├── LICENSE
├── .circleci
    └── config.yml
├── package.json
└── CONTRIBUTING.md


/src/__tests__/index.test.tsx:
--------------------------------------------------------------------------------
1 | it.todo('write a test');
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 | # specific for windows script files
3 | *.bat text eol=crlf


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | 
2 | {
3 |   "extends": "./tsconfig",
4 |   "exclude": ["example"]
5 | }
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['module:metro-react-native-babel-preset'],
3 | };
4 | 


--------------------------------------------------------------------------------
/.yarnrc:
--------------------------------------------------------------------------------
1 | # Override Yarn command so we can automatically setup the repo on running `yarn`
2 | 
3 | yarn-path "scripts/bootstrap.js"
4 | 


--------------------------------------------------------------------------------
/assets/transpile-flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intergalacticspacehighway/react-native-styled-variants/HEAD/assets/transpile-flow.png


--------------------------------------------------------------------------------
/assets/styled-variants.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intergalacticspacehighway/react-native-styled-variants/HEAD/assets/styled-variants.jpeg


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AnimeApp from './AnimeApp/App';
3 | // import BenchMarkApp from './BenchmarkApp/Benchmark';
4 | 
5 | export default function App() {
6 |   return <AnimeApp />;
7 | }
8 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import { registerRootComponent } from 'expo';
2 | 
3 | import App from './src/App';
4 | 
5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
6 | // It also ensures that whether you load the app in the Expo client or in a native build,
7 | // the environment is set up appropriately
8 | registerRootComponent(App);
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | 
 9 | indent_style = space
10 | indent_size = 2
11 | 
12 | end_of_line = lf
13 | charset = utf-8
14 | trim_trailing_whitespace = true
15 | insert_final_newline = true
16 | 


--------------------------------------------------------------------------------
/example/extension.d.ts:
--------------------------------------------------------------------------------
 1 | import 'react-native';
 2 | import { RNStyles } from 'react-native-styled-variants';
 3 | import type { ITheme, IBreakpoints } from './src/AnimeApp/theme';
 4 | 
 5 | declare module 'react-native' {
 6 |   interface ViewProps {
 7 |     sx?: RNStyles<ITheme, IBreakpoints>;
 8 |   }
 9 |   interface ImageProps {
10 |     sx?: RNStyles<ITheme, IBreakpoints>;
11 |   }
12 |   interface TextProps {
13 |     sx?: RNStyles<ITheme, IBreakpoints>;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react-native",
 4 |     "target": "esnext",
 5 |     "paths": {
 6 |       "react-native-styled-variants": ["../src/index"]
 7 |     },
 8 |     "lib": [
 9 |       "esnext",
10 |       "DOM"
11 |     ],
12 |     "allowJs": true,
13 |     "skipLibCheck": true,
14 |     "noEmit": true,
15 |     "allowSyntheticDefaultImports": true,
16 |     "resolveJsonModule": true,
17 |     "esModuleInterop": true,
18 |     "moduleResolution": "node"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React native styled variants
 2 | 
 3 | Compile time interactive, responsive and theming utilities for React Native.
 4 | 
 5 | [Checkout documentation here](https://styled-variants.vercel.app/)
 6 | 
 7 | <img height="300" alt="loki variants" src="https://raw.githubusercontent.com/intergalacticspacehighway/react-native-styled-variants/main/assets/styled-variants.jpeg" title="loki variants">
 8 | 
 9 | # Run example
10 | 
11 | ```
12 | cd repo/
13 | yarn
14 | cd repo/example
15 | yarn
16 | yarn web-clean
17 | 
18 | ```
19 | 
20 | ## License
21 | 
22 | MIT
23 | 


--------------------------------------------------------------------------------
/babel-plugin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "babel-plugin-styled-variants",
 3 |   "version": "0.2.0",
 4 |   "main": "index.js",
 5 |   "author": "nishan",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "test": "jest"
 9 |   },
10 |   "dependencies": {
11 |     "@babel/helper-module-imports": "^7.15.4",
12 |     "@babel/template": "^7.15.4",
13 |     "@babel/types": "^7.15.6"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/generator": "^7.15.4",
17 |     "@babel/parser": "^7.15.6",
18 |     "@babel/traverse": "^7.15.4",
19 |     "jest": "^27.1.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-styled-variants-example",
 3 |   "displayName": "StyledVariants Example",
 4 |   "expo": {
 5 |     "name": "react-native-styled-variants-example",
 6 |     "slug": "react-native-styled-variants-example",
 7 |     "description": "Example app for react-native-styled-variants",
 8 |     "privacy": "public",
 9 |     "version": "1.0.0",
10 |     "platforms": [
11 |       "ios",
12 |       "android",
13 |       "web"
14 |     ],
15 |     "ios": {
16 |       "supportsTablet": true
17 |     },
18 |     "assetBundlePatterns": [
19 |       "**/*"
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const pak = require('../package.json');
 3 | 
 4 | module.exports = function (api) {
 5 |   api.cache(true);
 6 | 
 7 |   return {
 8 |     presets: ['babel-preset-expo'],
 9 |     plugins: [
10 |       [
11 |         'module-resolver',
12 |         {
13 |           extensions: ['.tsx', '.ts', '.js', '.json'],
14 |           alias: {
15 |             // For development, we want to alias the library to the source
16 |             [pak.name]: path.join(__dirname, '..', pak.source),
17 |           },
18 |         },
19 |       ],
20 |       path.join(__dirname, '..', 'babel-plugin', 'index.js'),
21 |     ],
22 |   };
23 | };
24 | 


--------------------------------------------------------------------------------
/babel-plugin/index.js:
--------------------------------------------------------------------------------
 1 | const visitor = require('./visitor');
 2 | const utilityPropVisitor = require('./utility-prop-visitor');
 3 | 
 4 | function transformer() {
 5 |   return {
 6 |     visitor: {
 7 |       'Program'(path) {
 8 |         visitor.Program(path);
 9 |         utilityPropVisitor.Program(path);
10 |       },
11 |       'FunctionDeclaration|ArrowFunctionExpression'(path, state) {
12 |         utilityPropVisitor['FunctionDeclaration|ArrowFunctionExpression'](
13 |           path,
14 |           state
15 |         );
16 |       },
17 |       'CallExpression'(path, state) {
18 |         visitor.CallExpression(path, state);
19 |       },
20 |     },
21 |   };
22 | }
23 | 
24 | module.exports = transformer;
25 | 


--------------------------------------------------------------------------------
/scripts/bootstrap.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const child_process = require('child_process');
 3 | 
 4 | const root = path.resolve(__dirname, '..');
 5 | const args = process.argv.slice(2);
 6 | const options = {
 7 |   cwd: process.cwd(),
 8 |   env: process.env,
 9 |   stdio: 'inherit',
10 |   encoding: 'utf-8',
11 | };
12 | 
13 | let result;
14 | 
15 | if (process.cwd() !== root || args.length) {
16 |   // We're not in the root of the project, or additional arguments were passed
17 |   // In this case, forward the command to `yarn`
18 |   result = child_process.spawnSync('yarn', args, options);
19 | } else {
20 |   // If `yarn` is run without arguments, perform bootstrap
21 |   result = child_process.spawnSync('yarn', ['bootstrap'], options);
22 | }
23 | 
24 | process.exitCode = result.status;
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "./",
 4 |     "paths": {
 5 |       "react-native-styled-variants": ["./src/index"]
 6 |     },
 7 |     "allowUnreachableCode": false,
 8 |     "allowUnusedLabels": false,
 9 |     "esModuleInterop": true,
10 |     "importsNotUsedAsValues": "error",
11 |     "forceConsistentCasingInFileNames": true,
12 |     "jsx": "react",
13 |     "lib": ["esnext"],
14 |     "module": "esnext",
15 |     "moduleResolution": "node",
16 |     "noFallthroughCasesInSwitch": true,
17 |     "noImplicitReturns": true,
18 |     "noImplicitUseStrict": false,
19 |     "noStrictGenericChecks": false,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "resolveJsonModule": true,
23 |     "skipLibCheck": true,
24 |     "strict": true,
25 |     "target": "esnext"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # XDE
 6 | .expo/
 7 | 
 8 | # VSCode
 9 | .vscode/
10 | jsconfig.json
11 | 
12 | # Xcode
13 | #
14 | build/
15 | *.pbxuser
16 | !default.pbxuser
17 | *.mode1v3
18 | !default.mode1v3
19 | *.mode2v3
20 | !default.mode2v3
21 | *.perspectivev3
22 | !default.perspectivev3
23 | xcuserdata
24 | *.xccheckout
25 | *.moved-aside
26 | DerivedData
27 | *.hmap
28 | *.ipa
29 | *.xcuserstate
30 | project.xcworkspace
31 | 
32 | # Android/IJ
33 | #
34 | .idea
35 | .gradle
36 | local.properties
37 | android.iml
38 | 
39 | # Cocoapods
40 | #
41 | example/ios/Pods
42 | 
43 | # node.js
44 | #
45 | node_modules/
46 | npm-debug.log
47 | yarn-debug.log
48 | yarn-error.log
49 | 
50 | # BUCK
51 | buck-out/
52 | \.buckd/
53 | android/app/libs
54 | android/keystores/debug.keystore
55 | 
56 | # Expo
57 | .expo/*
58 | 
59 | # generated by bob
60 | lib/
61 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 3 | const { resolver } = require('./metro.config');
 4 | 
 5 | const root = path.resolve(__dirname, '..');
 6 | const node_modules = path.join(__dirname, 'node_modules');
 7 | 
 8 | module.exports = async function (env, argv) {
 9 |   const config = await createExpoWebpackConfigAsync(env, argv);
10 | 
11 |   config.module.rules.push({
12 |     test: /\.(js|jsx|ts|tsx)$/,
13 |     include: path.resolve(root, 'src'),
14 |     use: 'babel-loader',
15 |   });
16 | 
17 |   // We need to make sure that only one version is loaded for peerDependencies
18 |   // So we alias them to the versions in example's node_modules
19 |   Object.assign(config.resolve.alias, {
20 |     ...resolver.extraNodeModules,
21 |     'react-native-web': path.join(node_modules, 'react-native-web'),
22 |   });
23 | 
24 |   return config;
25 | };
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 intergalacticspacehighway
 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 | 


--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const blacklist = require('metro-config/src/defaults/blacklist');
 3 | const escape = require('escape-string-regexp');
 4 | const pak = require('../package.json');
 5 | 
 6 | const root = path.resolve(__dirname, '..');
 7 | 
 8 | const modules = Object.keys({
 9 |   ...pak.peerDependencies,
10 | });
11 | 
12 | module.exports = {
13 |   projectRoot: __dirname,
14 |   watchFolders: [root],
15 | 
16 |   // We need to make sure that only one version is loaded for peerDependencies
17 |   // So we blacklist them at the root, and alias them to the versions in example's node_modules
18 |   resolver: {
19 |     blacklistRE: blacklist(
20 |       modules.map(
21 |         (m) =>
22 |           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
23 |       )
24 |     ),
25 | 
26 |     extraNodeModules: modules.reduce((acc, name) => {
27 |       acc[name] = path.join(__dirname, 'node_modules', name);
28 |       return acc;
29 |     }, {}),
30 |   },
31 | 
32 |   transformer: {
33 |     getTransformOptions: async () => ({
34 |       transform: {
35 |         experimentalImportSupport: false,
36 |         inlineRequires: true,
37 |       },
38 |     }),
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/babel-plugin/playground.js:
--------------------------------------------------------------------------------
 1 | const { parse } = require('@babel/parser');
 2 | const traverse = require('@babel/traverse').default;
 3 | const generate = require('@babel/generator').default;
 4 | const visitor = require('./visitor');
 5 | const utilityPropVisitor = require('./utility-prop-visitor');
 6 | 
 7 | function transformToStyles(code) {
 8 |   const ast = parse(code, {
 9 |     sourceType: 'module',
10 |     plugins: ['jsx', 'typescript'],
11 |   });
12 | 
13 |   traverse(ast, {
14 |     'Program'(path) {
15 |       visitor.Program(path);
16 |       utilityPropVisitor.Program(path);
17 |     },
18 |     'FunctionDeclaration|ArrowFunctionExpression'(path, state) {
19 |       utilityPropVisitor['FunctionDeclaration|ArrowFunctionExpression'](
20 |         path,
21 |         state
22 |       );
23 |     },
24 |     'CallExpression'(path, state) {
25 |       visitor.CallExpression(path, state);
26 |     },
27 |   });
28 | 
29 |   // generate code <- ast
30 |   const output = generate(ast, code);
31 |   console.log(output.code); // 'const x = 1;'
32 | }
33 | 
34 | transformToStyles(`
35 | const App = () => {
36 |   const pressed = false;
37 |   return <View sx={pressed ? {backgroundColor: '$colors.blue'} : {}} style={[{margin: 10}]} />
38 | }
39 | `);
40 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-styled-variants-example",
 3 |   "description": "Example app for react-native-styled-variants",
 4 |   "version": "0.0.1",
 5 |   "private": true,
 6 |   "main": "index",
 7 |   "scripts": {
 8 |     "android": "expo start --android",
 9 |     "ios": "expo start --ios",
10 |     "web": "expo start --web",
11 |     "web-clean": "rm -rf .expo && expo start --web -c",
12 |     "start": "expo start",
13 |     "test": "jest"
14 |   },
15 |   "dependencies": {
16 |     "babel-loader": "^8.2.2",
17 |     "babel-plugin-styled-variants": "file:../babel-plugin",
18 |     "expo": "^40.0.0",
19 |     "expo-splash-screen": "~0.8.1",
20 |     "react": "16.13.1",
21 |     "react-dom": "16.13.1",
22 |     "react-native": "0.63.4",
23 |     "react-native-safe-area-context": "3.1.9",
24 |     "react-native-unimodules": "~0.12.0",
25 |     "react-native-web": "^0.17.1",
26 |     "styled-components": "^5.3.1"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "~7.12.10",
30 |     "@babel/runtime": "^7.9.6",
31 |     "@types/react-native": "0.63.4",
32 |     "@types/styled-components": "^5.1.14",
33 |     "babel-plugin-module-resolver": "^4.0.0",
34 |     "babel-preset-expo": "8.3.0",
35 |     "expo-cli": "^4.0.13"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/example/src/AnimeApp/theme.ts:
--------------------------------------------------------------------------------
 1 | import { createTheme } from 'react-native-styled-variants';
 2 | 
 3 | const theme = {
 4 |   colors: {
 5 |     white: '#fff',
 6 |     sky: '#9ab1d9',
 7 |     gray: {
 8 |       0: '#504f63',
 9 |       1: '#34304e',
10 |       2: '#393556',
11 |       3: '#0e0d20',
12 |     },
13 |     blue: {
14 |       0: '#a5f0f7',
15 |       1: '#53abe4',
16 |       2: '#2381dc',
17 |       3: '#001f45',
18 |     },
19 |     maroon: {
20 |       0: '#d66e84',
21 |       1: '#e27b8c',
22 |       2: '#ab4367',
23 |       3: '#631a4e',
24 |     },
25 |     red: {
26 |       0: '#f06d65',
27 |       1: '#f05d58',
28 |       2: '#e02a28',
29 |     },
30 |   },
31 |   space: {
32 |     'px': '1px',
33 |     '0': '0',
34 |     '1': 4,
35 |     '2': 8,
36 |     '3': 12,
37 |     '4': 16,
38 |     '5': 20,
39 |     '6': 24,
40 |     '8': 32,
41 |     '10': 40,
42 |     '12': 48,
43 |     '16': 64,
44 |     '20': 80,
45 |     '24': 96,
46 |     '32': 128,
47 |   },
48 |   fontSize: {
49 |     lg: 20,
50 |   },
51 | };
52 | 
53 | const breakpoints = {
54 |   'base': 0,
55 |   'sm': 480,
56 |   'md': 768,
57 |   'lg': 992,
58 |   'xl': 1280,
59 |   '2xl': 1536,
60 | };
61 | 
62 | export const { createVariant, ThemeProvider, useCurrentBreakpoint, useTheme } =
63 |   createTheme({
64 |     theme,
65 |     breakpoints,
66 |   });
67 | 
68 | export type ITheme = typeof theme;
69 | export type IBreakpoints = typeof breakpoints;
70 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | //@ts-nocheck
 2 | import React from 'react';
 3 | 
 4 | export const useControlledState = <T>(val: T) => {
 5 |   const [state, setState] = React.useState<T>(val);
 6 | 
 7 |   // ToDo make it controlled state
 8 | 
 9 |   return [state, setState];
10 | };
11 | 
12 | export function getClosestBreakpoint(breakpoints: any, windowWidth: number) {
13 |   let dimValues = Object.values(breakpoints);
14 |   let index = -1;
15 |   for (let i = 0; i < dimValues.length; i++) {
16 |     if (dimValues[i] === windowWidth) {
17 |       index = i;
18 |       break;
19 |     } else if (dimValues[i] > windowWidth && i !== 0) {
20 |       index = i - 1;
21 |       break;
22 |     }
23 |     // If windowWidth is greater than last available breakpoint clamp it to last index
24 |     else if (dimValues[i] < windowWidth && i === dimValues.length - 1) {
25 |       index = i;
26 |       break;
27 |     }
28 |   }
29 |   return index;
30 | }
31 | export const getCurrentBreakpoint = (
32 |   windowWidth,
33 |   breakpointsSortedKeys,
34 |   breakpoints
35 | ) => {
36 |   const breakpoint = getClosestBreakpoint(
37 |     breakpointsSortedKeys.map((key) => breakpoints[key]),
38 |     windowWidth
39 |   );
40 |   return breakpointsSortedKeys[breakpoint];
41 | };
42 | 
43 | export const getClosestResponsiveValue = (
44 |   values,
45 |   currentBreakpoint,
46 |   breakpointsSortedKeys
47 | ) => {
48 |   let val;
49 |   if (currentBreakpoint in values) {
50 |     val = currentBreakpoint;
51 |   } else {
52 |     let currentBreakpointIndex = breakpointsSortedKeys.findIndex(
53 |       (v) => v === currentBreakpoint
54 |     );
55 |     for (let i = currentBreakpointIndex; i >= 0; i--) {
56 |       if (breakpointsSortedKeys[i] in values) {
57 |         val = breakpointsSortedKeys[i];
58 |         break;
59 |       }
60 |     }
61 |   }
62 |   return values[val];
63 | };
64 | 


--------------------------------------------------------------------------------
/example/src/AnimeApp/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { View, Image } from 'react-native';
 3 | import { createVariant } from '../theme';
 4 | import { useSafeAreaInsets } from 'react-native-safe-area-context';
 5 | 
 6 | const shadow = {
 7 |   shadowOffset: {
 8 |     width: 0,
 9 |     height: 2,
10 |   },
11 |   shadowOpacity: 0.25,
12 |   shadowRadius: 3.84,
13 |   elevation: 5,
14 | };
15 | 
16 | export const Header = () => {
17 |   const insets = useSafeAreaInsets();
18 | 
19 |   return (
20 |     <View
21 |       sx={{
22 |         backgroundColor: '$colors.white',
23 |         padding: '$space.3',
24 |         flexDirection: 'row',
25 |         flex: 1,
26 |         alignItems: 'center',
27 |         justifyContent: { '@base': 'center', '@sm': 'space-around' },
28 |       }}
29 |       style={{ paddingTop: insets.top }}
30 |     >
31 |       <View
32 |         sx={{
33 |           borderRadius: 50,
34 |           shadowColor: '#000',
35 |           ...shadow,
36 |         }}
37 |       >
38 |         <Avatar
39 |           source={{
40 |             uri: 'https://cdn.vox-cdn.com/thumbor/zFJuBWv5NjSeVilWJntvQcgji5M=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19979927/jomi_avatar_nickleodeon_ringer.jpg',
41 |           }}
42 |           sx={{
43 |             height: { '@base': 100, '@sm': 120 },
44 |             width: { '@base': 100, '@sm': 120 },
45 |           }}
46 |         />
47 |       </View>
48 |       <Image
49 |         source={{
50 |           uri: 'https://i.pinimg.com/originals/ce/27/87/ce27870499a90e05363c91afe6b04aed.png',
51 |         }}
52 |         sx={{
53 |           height: { '@base': 100, '@sm': 120 },
54 |           aspectRatio: 1.7,
55 |           marginLeft: 20,
56 |         }}
57 |       />
58 |     </View>
59 |   );
60 | };
61 | 
62 | const Avatar = createVariant(Image, {
63 |   borderRadius: 50,
64 |   height: 80,
65 |   width: 80,
66 | });
67 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | //@ts-nocheck
 2 | import type { ReactNode } from 'react';
 3 | import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 4 | 
 5 | type IStyle = {
 6 |   [key: string]: any;
 7 |   varians?: {
 8 |     [key: string]: any;
 9 |   };
10 |   defaultVariants?: {
11 |     [key: string]: any;
12 |   };
13 | };
14 | 
15 | export type GetVariantProps<Style extends IStyle> = {
16 |   [Key in keyof Style['variants']]?: keyof Style['variants'][Key] extends
17 |     | 'true'
18 |     | 'false'
19 |     ? boolean
20 |     : keyof Style['variants'][Key];
21 | };
22 | 
23 | type IBreakpoints = {
24 |   'base'?: number;
25 |   'sm'?: number;
26 |   'md'?: number;
27 |   'lg'?: number;
28 |   'xl'?: number;
29 |   '2xl'?: number;
30 | };
31 | 
32 | type AppendPrefixAndTokenise<Theme, IsFirstIteration> = keyof {
33 |   [Key in keyof Theme as Theme[Key] extends string | number
34 |     ? `${Key}`
35 |     : // If first iteration append $
36 |       `${IsFirstIteration extends true
37 |         ? '$'
38 |         : ''}${Key}.${AppendPrefixAndTokenise<Theme[Key], false>}`]: true;
39 | };
40 | 
41 | type TokeniseTheme<Theme> = AppendPrefixAndTokenise<Theme, true>;
42 | 
43 | type ExtendStyleWithBreakpointValues<Theme, Style, Breakpoints> = {
44 |   [Key in keyof Style]?:
45 |     | TokeniseTheme<Theme>
46 |     | (Style[Key] & {})
47 |     | {
48 |         [Breakpoint in keyof Breakpoints as `@${Breakpoint}`]?:
49 |           | TokeniseTheme<Theme>
50 |           | (Style[Key] & {});
51 |       };
52 | };
53 | 
54 | export type RNStyles<Theme, BreakPoints> = ExtendStyleWithBreakpointValues<
55 |   Theme,
56 |   TextStyle & ImageStyle & ViewStyle,
57 |   BreakPoints
58 | >;
59 | 
60 | interface AllStyles<Theme, Breakpoints> extends RNStyles<Theme, Breakpoints> {
61 |   _hovered?: RNStyles<Theme, Breakpoints>;
62 |   _pressed?: RNStyles<Theme, Breakpoints>;
63 |   _focused?: RNStyles<Theme, Breakpoints>;
64 | }
65 | 
66 | export interface IStyles<Theme, Breakpoints, DefinedStyles extends IStyle>
67 |   extends AllStyles<Theme, Breakpoints> {
68 |   variants?: {
69 |     [key: string | number]: {
70 |       [key: string | number]: AllStyles<Theme, Breakpoints>;
71 |     };
72 |   };
73 |   defaultVariants?: 'variants' extends keyof DefinedStyles
74 |     ? GetVariantProps<DefinedStyles>
75 |     : undefined;
76 | }
77 | 
78 | export type IThemeProviderProps = {
79 |   theme: any;
80 |   currentBreakpoint?: any;
81 |   breakpoints: IBreakpoints;
82 |   children: ReactNode;
83 | };
84 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2.1
 2 | 
 3 | executors:
 4 |   default:
 5 |     docker:
 6 |       - image: circleci/node:10
 7 |     working_directory: ~/project
 8 | 
 9 | commands:
10 |   attach_project:
11 |     steps:
12 |       - attach_workspace:
13 |           at: ~/project
14 | 
15 | jobs:
16 |   install-dependencies:
17 |     executor: default
18 |     steps:
19 |       - checkout
20 |       - attach_project
21 |       - restore_cache:
22 |           keys:
23 |             - dependencies-{{ checksum "package.json" }}
24 |             - dependencies-
25 |       - restore_cache:
26 |           keys:
27 |             - dependencies-example-{{ checksum "example/package.json" }}
28 |             - dependencies-example-
29 |       - run:
30 |           name: Install dependencies
31 |           command: |
32 |             yarn install --cwd example --frozen-lockfile
33 |             yarn install --frozen-lockfile
34 |       - save_cache:
35 |           key: dependencies-{{ checksum "package.json" }}
36 |           paths: node_modules
37 |       - save_cache:
38 |           key: dependencies-example-{{ checksum "example/package.json" }}
39 |           paths: example/node_modules
40 |       - persist_to_workspace:
41 |           root: .
42 |           paths: .
43 | 
44 |   lint:
45 |     executor: default
46 |     steps:
47 |       - attach_project
48 |       - run:
49 |           name: Lint files
50 |           command: |
51 |             yarn lint
52 | 
53 |   typescript:
54 |     executor: default
55 |     steps:
56 |       - attach_project
57 |       - run:
58 |           name: Typecheck files
59 |           command: |
60 |             yarn typescript
61 | 
62 |   unit-tests:
63 |     executor: default
64 |     steps:
65 |       - attach_project
66 |       - run:
67 |           name: Run unit tests
68 |           command: |
69 |             yarn test --coverage
70 |       - store_artifacts:
71 |           path: coverage
72 |           destination: coverage
73 | 
74 |   build-package:
75 |     executor: default
76 |     steps:
77 |       - attach_project
78 |       - run:
79 |           name: Build package
80 |           command: |
81 |             yarn prepare
82 | 
83 | workflows:
84 |   build-and-test:
85 |     jobs:
86 |       - install-dependencies
87 |       - lint:
88 |           requires:
89 |             - install-dependencies
90 |       - typescript:
91 |           requires:
92 |             - install-dependencies
93 |       - unit-tests:
94 |           requires:
95 |             - install-dependencies
96 |       - build-package:
97 |           requires:
98 |             - install-dependencies
99 | 


--------------------------------------------------------------------------------
/example/src/BenchmarkApp/Benchmark.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Pressable, Text, View } from 'react-native';
 3 | import { useHover, usePress } from 'react-native-styled-variants';
 4 | import styled, {
 5 |   ThemeProvider as StyledComponentThemeProvider,
 6 | } from 'styled-components/native';
 7 | import { ThemeProvider } from './theme';
 8 | import { createVariant, theme } from './theme';
 9 | 
10 | export const StyledComponentsButton = () => {
11 |   const { onHoverIn, onHoverOut, isHovered } = useHover({});
12 |   const { onPressOut, onPressIn, isPressed } = usePress({});
13 |   return (
14 |     <StyledButton
15 |       onHoverIn={onHoverIn}
16 |       onHoverOut={onHoverOut}
17 |       isHovered={isHovered}
18 |       isPressed={isPressed}
19 |       onPressIn={onPressIn}
20 |       onPressOut={onPressOut}
21 |     >
22 |       <StyledText bold>Bring lightness</StyledText>
23 |     </StyledButton>
24 |   );
25 | };
26 | 
27 | const StyledText = styled(Text)`
28 |   color: white;
29 |   font-weight: ${(props) => (props.bold ? '900' : undefined)};
30 | `;
31 | 
32 | const StyledButton = styled(Pressable)`
33 |   padding-left: 15px;
34 |   padding-right: 15px;
35 |   border-radius: 4px;
36 |   height: 35px;
37 |   justify-content: center;
38 |   align-items: center;
39 |   font-size: 15px;
40 |   background-color:${(props: any) =>
41 |     props.isPressed
42 |       ? props.theme.colors.pressed
43 |       : props.isHovered
44 |       ? props.theme.colors.button_hover
45 |       : props.theme.colors.button_primary}
46 |   };`;
47 | 
48 | export const StyledVariantButton = () => {
49 |   return (
50 |     <VariantButton>
51 |       <VariantText bold>Bring lightness</VariantText>
52 |     </VariantButton>
53 |   );
54 | };
55 | 
56 | const VariantButton = createVariant(Pressable, {
57 |   paddingLeft: 15,
58 |   paddingRight: 15,
59 |   borderRadius: 4,
60 |   height: 35,
61 |   justifyContent: 'center',
62 |   alignItems: 'center',
63 |   fontSize: 15,
64 |   backgroundColor: '$colors.button_primary',
65 |   _pressed: {
66 |     backgroundColor: '$colors.pressed',
67 |   },
68 |   _hovered: {
69 |     backgroundColor: '$colors.button_hover',
70 |   },
71 | });
72 | 
73 | const VariantText = createVariant(Text, {
74 |   color: '$colors.white',
75 |   variants: {
76 |     bold: {
77 |       true: {
78 |         fontWeight: '900',
79 |       },
80 |     },
81 |   },
82 | });
83 | 
84 | export default () => {
85 |   return (
86 |     <StyledComponentThemeProvider theme={theme}>
87 |       <ThemeProvider>
88 |         <View style={{ alignItems: 'center' }}>
89 |           <View style={{ marginVertical: 20 }} />
90 |           <StyledComponentsButton />
91 |           <View style={{ marginVertical: 20 }} />
92 |           <StyledVariantButton />
93 |         </View>
94 |       </ThemeProvider>
95 |     </StyledComponentThemeProvider>
96 |   );
97 | };
98 | 


--------------------------------------------------------------------------------
/babel-plugin/utility-props.js:
--------------------------------------------------------------------------------
  1 | const spacingProperties = {
  2 |   margin: true,
  3 |   marginTop: true,
  4 |   marginRight: true,
  5 |   marginBottom: true,
  6 |   marginLeft: true,
  7 |   marginHorizontal: true,
  8 |   marginVertical: true,
  9 |   marginStart: true,
 10 |   marginEnd: true,
 11 |   padding: true,
 12 |   paddingTop: true,
 13 |   paddingRight: true,
 14 |   paddingBottom: true,
 15 |   paddingLeft: true,
 16 |   paddingHorizontal: true,
 17 |   paddingVertical: true,
 18 |   paddingStart: true,
 19 |   paddingEnd: true,
 20 | };
 21 | 
 22 | const spacingPropertiesShorthand = {
 23 |   m: 'margin',
 24 |   mt: 'marginTop',
 25 |   mr: 'marginRight',
 26 |   mb: 'marginBottom',
 27 |   ml: 'marginLeft',
 28 |   mx: 'marginHorizontal',
 29 |   my: 'marginVertical',
 30 |   ms: 'marginStart',
 31 |   me: 'marginEnd',
 32 |   p: 'padding',
 33 |   pt: 'paddingTop',
 34 |   pr: 'paddingRight',
 35 |   pb: 'paddingBottom',
 36 |   pl: 'paddingLeft',
 37 |   px: 'paddingHorizontal',
 38 |   py: 'paddingVertical',
 39 |   ps: 'paddingStart',
 40 |   pe: 'paddingEnd',
 41 | };
 42 | 
 43 | const typographyProperties = {
 44 |   fontFamily: true,
 45 |   fontSize: true,
 46 |   fontStyle: true,
 47 |   fontWeight: true,
 48 |   letterSpacing: true,
 49 |   lineHeight: true,
 50 |   textAlign: true,
 51 |   textDecorationLine: true,
 52 |   textDecorationStyle: true,
 53 |   textTransform: true,
 54 | };
 55 | 
 56 | const layoutProperties = {
 57 |   width: true,
 58 |   height: true,
 59 |   minWidth: true,
 60 |   maxWidth: true,
 61 |   minHeight: true,
 62 |   maxHeight: true,
 63 |   overflow: true,
 64 |   aspectRatio: true,
 65 |   alignContent: true,
 66 |   alignItems: true,
 67 |   alignSelf: true,
 68 |   justifyContent: true,
 69 |   flex: true,
 70 |   flexBasis: true,
 71 |   flexDirection: true,
 72 |   flexGrow: true,
 73 |   flexShrink: true,
 74 |   flexWrap: true,
 75 | };
 76 | 
 77 | const positionProperties = {
 78 |   position: true,
 79 |   top: true,
 80 |   right: true,
 81 |   bottom: true,
 82 |   left: true,
 83 |   start: true,
 84 |   end: true,
 85 | };
 86 | 
 87 | const borderProperties = {
 88 |   borderBottomWidth: true,
 89 |   borderLeftWidth: true,
 90 |   borderRightWidth: true,
 91 |   borderStyle: true,
 92 |   borderTopWidth: true,
 93 |   borderStartWidth: true,
 94 |   borderEndWidth: true,
 95 |   borderWidth: true,
 96 | };
 97 | 
 98 | const borderRadiusProperties = {
 99 |   borderRadius: true,
100 |   borderBottomLeftRadius: true,
101 |   borderBottomRightRadius: true,
102 |   borderTopLeftRadius: true,
103 |   borderTopRightRadius: true,
104 |   borderBottomStartRadius: true,
105 |   borderBottomEndRadius: true,
106 |   borderTopStartRadius: true,
107 |   borderTopEndRadius: true,
108 | };
109 | 
110 | const borderColorProperties = {
111 |   borderColor: true,
112 |   borderTopColor: true,
113 |   borderRightColor: true,
114 |   borderLeftColor: true,
115 |   borderBottomColor: true,
116 |   borderStartColor: true,
117 |   borderEndColor: true,
118 | };
119 | 
120 | const shadowProperties = {
121 |   shadowOpacity: true,
122 |   shadowOffset: true,
123 |   shadowRadius: true,
124 |   elevation: true,
125 | };
126 | 
127 | const textShadowProperties = {
128 |   textShadowOffset: true,
129 |   textShadowRadius: true,
130 | };
131 | 
132 | module.exports = {
133 |   ...spacingProperties,
134 |   ...layoutProperties,
135 |   ...spacingPropertiesShorthand,
136 |   ...typographyProperties,
137 |   ...positionProperties,
138 |   ...borderColorProperties,
139 |   ...borderProperties,
140 |   ...shadowProperties,
141 |   ...textShadowProperties,
142 |   ...borderRadiusProperties,
143 |   backgroundColor: true,
144 |   bg: 'backgroundColor',
145 |   color: true,
146 |   opacity: true,
147 |   zIndex: true,
148 | };
149 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-native-styled-variants",
  3 |   "version": "0.2.0",
  4 |   "description": "Create styled variants that are transpiled to StyleSheet during build time",
  5 |   "main": "lib/commonjs/index",
  6 |   "module": "lib/module/index",
  7 |   "types": "lib/typescript/index.d.ts",
  8 |   "react-native": "src/index",
  9 |   "source": "src/index",
 10 |   "files": [
 11 |     "src",
 12 |     "lib",
 13 |     "android",
 14 |     "ios",
 15 |     "cpp",
 16 |     "react-native-styled-variants.podspec",
 17 |     "!lib/typescript/example",
 18 |     "!android/build",
 19 |     "!ios/build",
 20 |     "!**/__tests__",
 21 |     "!**/__fixtures__",
 22 |     "!**/__mocks__"
 23 |   ],
 24 |   "scripts": {
 25 |     "test": "jest",
 26 |     "typescript": "tsc --noEmit",
 27 |     "lint": "eslint \"**/*.{js,ts,tsx}\"",
 28 |     "prepare": "bob build",
 29 |     "release": "release-it",
 30 |     "example": "yarn --cwd example",
 31 |     "pods": "cd example && pod-install --quiet",
 32 |     "bootstrap": "yarn example && yarn && yarn pods"
 33 |   },
 34 |   "keywords": [
 35 |     "react-native",
 36 |     "ios",
 37 |     "android"
 38 |   ],
 39 |   "repository": "https://github.com/intergalacticspacehighway/react-native-styled-variants",
 40 |   "author": "intergalacticspacehighway <nishanbende@gmail.com> (https://github.com/intergalacticspacehighway)",
 41 |   "license": "MIT",
 42 |   "bugs": {
 43 |     "url": "https://github.com/intergalacticspacehighway/react-native-styled-variants/issues"
 44 |   },
 45 |   "homepage": "https://github.com/intergalacticspacehighway/react-native-styled-variants#readme",
 46 |   "publishConfig": {
 47 |     "registry": "https://registry.npmjs.org/"
 48 |   },
 49 |   "devDependencies": {
 50 |     "@commitlint/config-conventional": "^11.0.0",
 51 |     "@react-native-community/eslint-config": "^2.0.0",
 52 |     "@release-it/conventional-changelog": "^2.0.0",
 53 |     "@types/jest": "^26.0.0",
 54 |     "@types/react": "^16.9.19",
 55 |     "@types/react-native": "0.62.13",
 56 |     "commitlint": "^11.0.0",
 57 |     "eslint": "^7.2.0",
 58 |     "eslint-config-prettier": "^7.0.0",
 59 |     "eslint-plugin-prettier": "^3.1.3",
 60 |     "husky": "^4.2.5",
 61 |     "jest": "^26.0.1",
 62 |     "pod-install": "^0.1.0",
 63 |     "prettier": "^2.0.5",
 64 |     "react": "16.13.1",
 65 |     "react-native": "0.63.4",
 66 |     "react-native-builder-bob": "^0.18.0",
 67 |     "release-it": "^14.2.2",
 68 |     "typescript": "^4.1.3"
 69 |   },
 70 |   "peerDependencies": {
 71 |     "react": "*",
 72 |     "react-native": "*"
 73 |   },
 74 |   "jest": {
 75 |     "preset": "react-native",
 76 |     "modulePathIgnorePatterns": [
 77 |       "<rootDir>/example/node_modules",
 78 |       "<rootDir>/lib/"
 79 |     ]
 80 |   },
 81 |   "commitlint": {
 82 |     "extends": [
 83 |       "@commitlint/config-conventional"
 84 |     ]
 85 |   },
 86 |   "release-it": {
 87 |     "git": {
 88 |       "commitMessage": "chore: release ${version}",
 89 |       "tagName": "v${version}"
 90 |     },
 91 |     "npm": {
 92 |       "publish": true
 93 |     },
 94 |     "github": {
 95 |       "release": true
 96 |     },
 97 |     "plugins": {
 98 |       "@release-it/conventional-changelog": {
 99 |         "preset": "angular"
100 |       }
101 |     }
102 |   },
103 |   "eslintConfig": {
104 |     "root": true,
105 |     "extends": [
106 |       "@react-native-community",
107 |       "prettier"
108 |     ],
109 |     "rules": {
110 |       "prettier/prettier": [
111 |         "error",
112 |         {
113 |           "quoteProps": "consistent",
114 |           "singleQuote": true,
115 |           "tabWidth": 2,
116 |           "trailingComma": "es5",
117 |           "useTabs": false
118 |         }
119 |       ]
120 |     }
121 |   },
122 |   "eslintIgnore": [
123 |     "node_modules/",
124 |     "lib/"
125 |   ],
126 |   "prettier": {
127 |     "quoteProps": "consistent",
128 |     "singleQuote": true,
129 |     "tabWidth": 2,
130 |     "trailingComma": "es5",
131 |     "useTabs": false
132 |   },
133 |   "react-native-builder-bob": {
134 |     "source": "src",
135 |     "output": "lib",
136 |     "targets": [
137 |       "commonjs",
138 |       "module",
139 |       [
140 |         "typescript",
141 |         {
142 |           "project": "tsconfig.build.json"
143 |         }
144 |       ]
145 |     ]
146 |   }
147 | }
148 | 


--------------------------------------------------------------------------------
/babel-plugin/hash.js:
--------------------------------------------------------------------------------
  1 | //  The unique id generation code is taken from styled component's babel plugin repo
  2 | //  https://github.com/styled-components/babel-plugin-styled-components/blob/main/src/visitors/displayNameAndId.js
  3 | 
  4 | const path = require('path');
  5 | const fs = require('fs');
  6 | const FILE_HASH = 'styled-variants-file-hash';
  7 | const COMPONENT_POSITION = 'styled-variants-component-position';
  8 | const separatorRegExp = new RegExp(`\\${path.sep}`, 'g');
  9 | function getOption({ opts }, name, defaultValue = true) {
 10 |   return opts[name] === undefined || opts[name] === null
 11 |     ? defaultValue
 12 |     : opts[name];
 13 | }
 14 | 
 15 | const getNameSpace = (state) => {
 16 |   const namespace = getOption(state, 'namespace', '');
 17 |   if (namespace) {
 18 |     return `${namespace}__`;
 19 |   }
 20 |   return '';
 21 | };
 22 | 
 23 | /**
 24 |  * JS Implementation of MurmurHash2
 25 |  *
 26 |  * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
 27 |  * @see http://github.com/garycourt/murmurhash-js
 28 |  * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
 29 |  * @see http://sites.google.com/site/murmurhash/
 30 |  *
 31 |  * @param {string} str ASCII only
 32 |  * @return {string} Base 36 encoded hash result
 33 |  */
 34 | function hash(str) {
 35 |   let l = str.length;
 36 |   let h = l;
 37 |   let i = 0;
 38 |   let k;
 39 | 
 40 |   while (l >= 4) {
 41 |     k =
 42 |       (str.charCodeAt(i) & 0xff) |
 43 |       ((str.charCodeAt(++i) & 0xff) << 8) |
 44 |       ((str.charCodeAt(++i) & 0xff) << 16) |
 45 |       ((str.charCodeAt(++i) & 0xff) << 24);
 46 | 
 47 |     k =
 48 |       (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
 49 |     k ^= k >>> 24;
 50 |     k =
 51 |       (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
 52 | 
 53 |     h =
 54 |       ((h & 0xffff) * 0x5bd1e995 +
 55 |         ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
 56 |       k;
 57 | 
 58 |     l -= 4;
 59 |     ++i;
 60 |   } // forgive existing code
 61 | 
 62 |   /* eslint-disable no-fallthrough */ switch (l) {
 63 |     case 3:
 64 |       h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
 65 |     case 2:
 66 |       h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
 67 |     case 1:
 68 |       h ^= str.charCodeAt(i) & 0xff;
 69 |       h =
 70 |         (h & 0xffff) * 0x5bd1e995 +
 71 |         ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
 72 |   }
 73 |   /* eslint-enable no-fallthrough */
 74 | 
 75 |   h ^= h >>> 13;
 76 |   h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
 77 |   h ^= h >>> 15;
 78 | 
 79 |   return (h >>> 0).toString(36);
 80 | }
 81 | 
 82 | const findModuleRoot = (filename) => {
 83 |   if (!filename) {
 84 |     return null;
 85 |   }
 86 |   let dir = path.dirname(filename);
 87 |   if (fs.existsSync(path.join(dir, 'package.json'))) {
 88 |     return dir;
 89 |   } else if (dir !== filename) {
 90 |     return findModuleRoot(dir);
 91 |   } else {
 92 |     return null;
 93 |   }
 94 | };
 95 | 
 96 | const getFileHash = (state) => {
 97 |   const { file } = state;
 98 |   // hash calculation is costly due to fs operations, so we'll cache it per file.
 99 |   if (file.get(FILE_HASH)) {
100 |     return file.get(FILE_HASH);
101 |   }
102 |   const filename = file.opts.filename;
103 |   // find module root directory
104 |   const moduleRoot = findModuleRoot(filename);
105 |   const filePath =
106 |     moduleRoot &&
107 |     path.relative(moduleRoot, filename).replace(separatorRegExp, '/');
108 |   const moduleName =
109 |     moduleRoot &&
110 |     JSON.parse(fs.readFileSync(path.join(moduleRoot, 'package.json'))).name;
111 |   const code = file.code;
112 | 
113 |   const stuffToHash = [moduleName];
114 | 
115 |   if (filePath) {
116 |     stuffToHash.push(filePath);
117 |   } else {
118 |     stuffToHash.push(code);
119 |   }
120 | 
121 |   const fileHash = hash(stuffToHash.join(''));
122 |   file.set(FILE_HASH, fileHash);
123 |   return fileHash;
124 | };
125 | 
126 | const getNextId = (state) => {
127 |   const id = state.file.get(COMPONENT_POSITION) || 0;
128 |   state.file.set(COMPONENT_POSITION, id + 1);
129 |   return id;
130 | };
131 | 
132 | const getComponentId = (state) => {
133 |   if (!state) {
134 |     return 'test';
135 |   }
136 |   // Prefix the identifier with a character because CSS classes cannot start with a number
137 |   return `${getNameSpace(state)}sc${getFileHash(state)}${getNextId(
138 |     state
139 |   )}`.toLowerCase();
140 | };
141 | 
142 | module.exports = { getComponentId };
143 | 


--------------------------------------------------------------------------------
/example/src/AnimeApp/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef } from 'react';
  2 | import { Pressable, Text, View, Platform } from 'react-native';
  3 | import { Header } from './components/Header';
  4 | import { createVariant, ThemeProvider } from './theme';
  5 | import { SafeAreaProvider } from 'react-native-safe-area-context';
  6 | import { Animated } from 'react-native';
  7 | 
  8 | function getRandomInt(max) {
  9 |   return Math.floor(Math.random() * max);
 10 | }
 11 | 
 12 | const avatarImages = {
 13 |   iroh: 'https://therockle.com/wp-content/uploads/2021/05/Best-Uncle-Iroh-Quotes-min-2.jpg',
 14 |   fire: 'https://i.redd.it/o8zi2sok5a461.jpg',
 15 |   zuko: 'https://images.squarespace-cdn.com/content/57fd5882e6f2e1489b27ecb7/1595447779082-AN5W87XI9KSMLVMSMR0C/avatar-the-last-airbenderzuko.png?content-type=image%2Fpng',
 16 |   katara:
 17 |     'https://qph.fs.quoracdn.net/main-qimg-2e4d0f3f76aad3529ec36c6f0b643301',
 18 | };
 19 | 
 20 | const mood = Object.keys(avatarImages);
 21 | 
 22 | export default () => {
 23 |   useEffect(() => {
 24 |     if (Platform.OS === 'web') {
 25 |       document.body.style.overflowY = 'hidden';
 26 |       document.body.style.overflow = 'hidden';
 27 |       document.body.style.height = '100%';
 28 |     }
 29 |   }, []);
 30 | 
 31 |   return (
 32 |     <SafeAreaProvider>
 33 |       <ThemeProvider>
 34 |         <Container>
 35 |           <View sx={{ flex: 1 }}>
 36 |             <View sx={{ flex: 2 }}>
 37 |               <Header />
 38 |             </View>
 39 |             <Screen />
 40 |           </View>
 41 |         </Container>
 42 |       </ThemeProvider>
 43 |     </SafeAreaProvider>
 44 |   );
 45 | };
 46 | 
 47 | const Screen = () => {
 48 |   const [imageIndex, setImageIndex] = React.useState(getRandomInt(mood.length));
 49 |   const changeImage = () => {
 50 |     setImageIndex((imageIndex + 1) % mood.length);
 51 |   };
 52 | 
 53 |   return (
 54 |     <>
 55 |       <View
 56 |         sx={{
 57 |           justifyContent: 'center',
 58 |           alignItems: 'center',
 59 |           flex: 4,
 60 |         }}
 61 |       >
 62 |         <AnimatedImage uri={avatarImages[mood[imageIndex]]} />
 63 |       </View>
 64 |       <View
 65 |         sx={{
 66 |           alignItems: 'center',
 67 |           flex: 1,
 68 |         }}
 69 |       >
 70 |         <Button onPress={changeImage} accessibilityRole="button">
 71 |           {({ pressed, hovered, focused }: any) => {
 72 |             return (
 73 |               <StyledText
 74 |                 uppercase
 75 |                 bold
 76 |                 sx={
 77 |                   pressed || hovered || focused
 78 |                     ? {
 79 |                         color: Platform.select({
 80 |                           web: '$colors.white',
 81 |                           ios: '$colors.sky',
 82 |                         }),
 83 |                       }
 84 |                     : undefined
 85 |                 }
 86 |               >
 87 |                 {mood[imageIndex]}
 88 |               </StyledText>
 89 |             );
 90 |           }}
 91 |         </Button>
 92 |       </View>
 93 |     </>
 94 |   );
 95 | };
 96 | 
 97 | const AnimatedImage = ({ uri }) => {
 98 |   const opacityValue = useRef(new Animated.Value(0)).current;
 99 | 
100 |   const onLoad = () => {
101 |     Animated.timing(opacityValue, {
102 |       toValue: 1,
103 |       duration: 500,
104 |       useNativeDriver: true,
105 |     }).start();
106 |   };
107 | 
108 |   useEffect(() => {
109 |     opacityValue.setValue(0);
110 |   }, [uri, opacityValue]);
111 | 
112 |   return (
113 |     <Animated.Image
114 |       onLoad={onLoad}
115 |       source={{
116 |         uri: uri,
117 |         cache: 'force-cache',
118 |       }}
119 |       resizeMode="contain"
120 |       sx={{ flex: 0.9, width: '95%', borderRadius: 10 }}
121 |       style={{
122 |         opacity: opacityValue,
123 |         transform: [
124 |           {
125 |             scale: opacityValue.interpolate({
126 |               inputRange: [0, 1],
127 |               outputRange: [0.95, 1],
128 |             }),
129 |           },
130 |         ],
131 |       }}
132 |       key={uri}
133 |     />
134 |   );
135 | };
136 | 
137 | const Container = createVariant(View, {
138 |   backgroundColor: '$colors.gray.3',
139 |   height: '100%',
140 | });
141 | 
142 | const Button = createVariant(Pressable, {
143 |   borderWidth: 2,
144 |   borderRadius: 4,
145 |   paddingHorizontal: '$space.5',
146 |   paddingVertical: '$space.4',
147 |   borderColor: '$colors.red.2',
148 |   width: Platform.select({ web: 250, default: '80%' as any }),
149 |   alignItems: 'center',
150 |   _hovered: {
151 |     backgroundColor: '$colors.red.0',
152 |   },
153 |   _pressed: {
154 |     backgroundColor: '$colors.red.1',
155 |   },
156 |   _focused: {
157 |     backgroundColor: '$colors.red.2',
158 |   },
159 | });
160 | 
161 | const StyledText = createVariant(Text, {
162 |   color: '$colors.maroon.0',
163 |   fontSize: '$fontSize.lg',
164 |   variants: {
165 |     uppercase: {
166 |       true: {
167 |         textTransform: 'uppercase',
168 |       },
169 |     },
170 |     bold: {
171 |       true: {
172 |         fontWeight: 'bold',
173 |       },
174 |     },
175 |     buttonPressed: {
176 |       true: {
177 |         color: '$colors.white',
178 |       },
179 |     },
180 |   },
181 | });
182 | 


--------------------------------------------------------------------------------
/example/src/BenchmarkApp/theme.ts:
--------------------------------------------------------------------------------
  1 | import { createTheme } from 'react-native-styled-variants';
  2 | 
  3 | const palettes = {
  4 |   white: '#FFFFFF',
  5 |   black: '#000000',
  6 |   lightText: '#FFFFFF',
  7 |   darkText: '#000000',
  8 |   // Primary colors
  9 |   rose: {
 10 |     50: '#fff1f2',
 11 |     100: '#ffe4e6',
 12 |     200: '#fecdd3',
 13 |     300: '#fda4af',
 14 |     400: '#fb7185',
 15 |     500: '#f43f5e',
 16 |     600: '#e11d48',
 17 |     700: '#be123c',
 18 |     800: '#9f1239',
 19 |     900: '#881337',
 20 |   },
 21 |   pink: {
 22 |     50: '#fdf2f8',
 23 |     100: '#fce7f3',
 24 |     200: '#fbcfe8',
 25 |     300: '#f9a8d4',
 26 |     400: '#f472b6',
 27 |     500: '#ec4899',
 28 |     600: '#db2777',
 29 |     700: '#be185d',
 30 |     800: '#9d174d',
 31 |     900: '#831843',
 32 |   },
 33 |   fuchsia: {
 34 |     50: '#fdf4ff',
 35 |     100: '#fae8ff',
 36 |     200: '#f5d0fe',
 37 |     300: '#f0abfc',
 38 |     400: '#e879f9',
 39 |     500: '#d946ef',
 40 |     600: '#c026d3',
 41 |     700: '#a21caf',
 42 |     800: '#86198f',
 43 |     900: '#701a75',
 44 |   },
 45 |   purple: {
 46 |     50: '#faf5ff',
 47 |     100: '#f3e8ff',
 48 |     200: '#e9d5ff',
 49 |     300: '#d8b4fe',
 50 |     400: '#c084fc',
 51 |     500: '#a855f7',
 52 |     600: '#9333ea',
 53 |     700: '#7e22ce',
 54 |     800: '#6b21a8',
 55 |     900: '#581c87',
 56 |   },
 57 |   violet: {
 58 |     50: '#f5f3ff',
 59 |     100: '#ede9fe',
 60 |     200: '#ddd6fe',
 61 |     300: '#c4b5fd',
 62 |     400: '#a78bfa',
 63 |     500: '#8b5cf6',
 64 |     600: '#7c3aed',
 65 |     700: '#6d28d9',
 66 |     800: '#5b21b6',
 67 |     900: '#4c1d95',
 68 |   },
 69 |   indigo: {
 70 |     50: '#eef2ff',
 71 |     100: '#e0e7ff',
 72 |     200: '#c7d2fe',
 73 |     300: '#a5b4fc',
 74 |     400: '#818cf8',
 75 |     500: '#6366f1',
 76 |     600: '#4f46e5',
 77 |     700: '#4338ca',
 78 |     800: '#3730a3',
 79 |     900: '#312e81',
 80 |   },
 81 |   blue: {
 82 |     50: '#eff6ff',
 83 |     100: '#dbeafe',
 84 |     200: '#bfdbfe',
 85 |     300: '#93c5fd',
 86 |     400: '#60a5fa',
 87 |     500: '#3b82f6',
 88 |     600: '#2563eb',
 89 |     700: '#1d4ed8',
 90 |     800: '#1e40af',
 91 |     900: '#1e3a8a',
 92 |   },
 93 |   lightBlue: {
 94 |     50: '#f0f9ff',
 95 |     100: '#e0f2fe',
 96 |     200: '#bae6fd',
 97 |     300: '#7dd3fc',
 98 |     400: '#38bdf8',
 99 |     500: '#0ea5e9',
100 |     600: '#0284c7',
101 |     700: '#0369a1',
102 |     800: '#075985',
103 |     900: '#0c4a6e',
104 |   },
105 |   darkBlue: {
106 |     50: '#dbf4ff',
107 |     100: '#addbff',
108 |     200: '#7cc2ff',
109 |     300: '#4aa9ff',
110 |     400: '#1a91ff',
111 |     500: '#0077e6',
112 |     600: '#005db4',
113 |     700: '#004282',
114 |     800: '#002851',
115 |     900: '#000e21',
116 |   },
117 |   cyan: {
118 |     50: '#ecfeff',
119 |     100: '#cffafe',
120 |     200: '#a5f3fc',
121 |     300: '#67e8f9',
122 |     400: '#22d3ee',
123 |     500: '#06b6d4',
124 |     600: '#0891b2',
125 |     700: '#0e7490',
126 |     800: '#155e75',
127 |     900: '#164e63',
128 |   },
129 |   teal: {
130 |     50: '#f0fdfa',
131 |     100: '#ccfbf1',
132 |     200: '#99f6e4',
133 |     300: '#5eead4',
134 |     400: '#2dd4bf',
135 |     500: '#14b8a6',
136 |     600: '#0d9488',
137 |     700: '#0f766e',
138 |     800: '#115e59',
139 |     900: '#134e4a',
140 |   },
141 |   emerald: {
142 |     50: '#ecfdf5',
143 |     100: '#d1fae5',
144 |     200: '#a7f3d0',
145 |     300: '#6ee7b7',
146 |     400: '#34d399',
147 |     500: '#10b981',
148 |     600: '#059669',
149 |     700: '#047857',
150 |     800: '#065f46',
151 |     900: '#064e3b',
152 |   },
153 |   green: {
154 |     50: '#f0fdf4',
155 |     100: '#dcfce7',
156 |     200: '#bbf7d0',
157 |     300: '#86efac',
158 |     400: '#4ade80',
159 |     500: '#22c55e',
160 |     600: '#16a34a',
161 |     700: '#15803d',
162 |     800: '#166534',
163 |     900: '#14532d',
164 |   },
165 |   lime: {
166 |     50: '#f7fee7',
167 |     100: '#ecfccb',
168 |     200: '#d9f99d',
169 |     300: '#bef264',
170 |     400: '#a3e635',
171 |     500: '#84cc16',
172 |     600: '#65a30d',
173 |     700: '#4d7c0f',
174 |     800: '#3f6212',
175 |     900: '#365314',
176 |   },
177 |   yellow: {
178 |     50: '#fefce8',
179 |     100: '#fef9c3',
180 |     200: '#fef08a',
181 |     300: '#fde047',
182 |     400: '#facc15',
183 |     500: '#eab308',
184 |     600: '#ca8a04',
185 |     700: '#a16207',
186 |     800: '#854d0e',
187 |     900: '#713f12',
188 |   },
189 |   amber: {
190 |     50: '#fffbeb',
191 |     100: '#fef3c7',
192 |     200: '#fde68a',
193 |     300: '#fcd34d',
194 |     400: '#fbbf24',
195 |     500: '#f59e0b',
196 |     600: '#d97706',
197 |     700: '#b45309',
198 |     800: '#92400e',
199 |     900: '#78350f',
200 |   },
201 |   orange: {
202 |     50: '#fff7ed',
203 |     100: '#ffedd5',
204 |     200: '#fed7aa',
205 |     300: '#fdba74',
206 |     400: '#fb923c',
207 |     500: '#f97316',
208 |     600: '#ea580c',
209 |     700: '#c2410c',
210 |     800: '#9a3412',
211 |     900: '#7c2d12',
212 |   },
213 |   red: {
214 |     50: '#fef2f2',
215 |     100: '#fee2e2',
216 |     200: '#fecaca',
217 |     300: '#fca5a5',
218 |     400: '#f87171',
219 |     500: '#ef4444',
220 |     600: '#dc2626',
221 |     700: '#b91c1c',
222 |     800: '#991b1b',
223 |     900: '#7f1d1d',
224 |   },
225 |   warmGray: {
226 |     50: '#fafaf9',
227 |     100: '#f5f5f4',
228 |     200: '#e7e5e4',
229 |     300: '#d6d3d1',
230 |     400: '#a8a29e',
231 |     500: '#78716c',
232 |     600: '#57534e',
233 |     700: '#44403c',
234 |     800: '#292524',
235 |     900: '#1c1917',
236 |   },
237 |   trueGray: {
238 |     50: '#fafafa',
239 |     100: '#f5f5f5',
240 |     200: '#e5e5e5',
241 |     300: '#d4d4d4',
242 |     400: '#a3a3a3',
243 |     500: '#737373',
244 |     600: '#525252',
245 |     700: '#404040',
246 |     800: '#262626',
247 |     900: '#171717',
248 |   },
249 |   gray: {
250 |     50: '#fafafa',
251 |     100: '#f4f4f5',
252 |     200: '#e4e4e7',
253 |     300: '#d4d4d8',
254 |     400: '#a1a1aa',
255 |     500: '#71717a',
256 |     600: '#52525b',
257 |     700: '#3f3f46',
258 |     800: '#27272a',
259 |     900: '#18181b',
260 |   },
261 |   coolGray: {
262 |     50: '#f9fafb',
263 |     100: '#f3f4f6',
264 |     200: '#e5e7eb',
265 |     300: '#d1d5db',
266 |     400: '#9ca3af',
267 |     500: '#6b7280',
268 |     600: '#4b5563',
269 |     700: '#374151',
270 |     800: '#1f2937',
271 |     900: '#111827',
272 |   },
273 |   blueGray: {
274 |     50: '#f8fafc',
275 |     100: '#f1f5f9',
276 |     200: '#e2e8f0',
277 |     300: '#cbd5e1',
278 |     400: '#94a3b8',
279 |     500: '#64748b',
280 |     600: '#475569',
281 |     700: '#334155',
282 |     800: '#1e293b',
283 |     900: '#0f172a',
284 |   },
285 |   dark: {
286 |     50: '#18181b',
287 |     100: '#27272a',
288 |     200: '#3f3f46',
289 |     300: '#52525b',
290 |     400: '#71717a',
291 |     500: '#a1a1aa',
292 |     600: '#d4d4d8',
293 |     700: '#e4e4e7',
294 |     800: '#f4f4f5',
295 |     900: '#fafafa',
296 |   },
297 | };
298 | 
299 | export const darkColors = {
300 |   button_hover: palettes.indigo[600],
301 |   button_primary: palettes.indigo[500],
302 |   cardBg: palettes.coolGray[800],
303 |   textColor: palettes.coolGray[50],
304 |   borderColor: palettes.coolGray[50],
305 |   shadowColor: palettes.coolGray[50],
306 |   hover: palettes.blue[800],
307 |   pressed: palettes.blue[900],
308 |   pressed_secondary: palettes.blue[400],
309 | 
310 |   primary: palettes.blue[400],
311 | };
312 | 
313 | export const lightColors = {
314 |   primary: palettes.amber[500],
315 | 
316 |   button_hover: palettes.indigo[700],
317 |   button_primary: palettes.indigo[600],
318 |   cardBg: palettes.coolGray[50],
319 |   textColor: palettes.coolGray[900],
320 |   borderColor: palettes.coolGray[900],
321 |   shadowColor: palettes.coolGray[900],
322 |   hover: palettes.blue[100],
323 |   pressed: palettes.blue[200],
324 |   pressed_secondary: palettes.blue[400],
325 | };
326 | 
327 | export const theme = {
328 |   colors: {
329 |     ...palettes,
330 |     ...lightColors,
331 |   },
332 |   space: {
333 |     1: 10,
334 |     2: 20,
335 |     3: 30,
336 |     8: 50,
337 |     50: 100,
338 |   },
339 | };
340 | 
341 | export const breakpoints = {
342 |   'base': 0,
343 |   'sm': 480,
344 |   'md': 768,
345 |   'lg': 992,
346 |   'xl': 1280,
347 |   '2xl': 1536,
348 | };
349 | 
350 | export const { createVariant, ThemeProvider, useTheme, useCurrentBreakpoint } =
351 |   createTheme({
352 |     theme,
353 |     breakpoints,
354 |   });
355 | 
356 | export type ITheme = typeof theme;
357 | export type IBreakpoints = typeof breakpoints;
358 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ReactNode, useCallback } from 'react';
  2 | import { Dimensions, StyleSheet } from 'react-native';
  3 | import type {
  4 |   GetVariantProps,
  5 |   IStyles,
  6 |   IThemeProviderProps,
  7 |   RNStyles,
  8 | } from './types';
  9 | import {
 10 |   useControlledState,
 11 |   getCurrentBreakpoint,
 12 |   getClosestResponsiveValue,
 13 | } from './utils';
 14 | 
 15 | const ThemeProviderImpl = (props: IThemeProviderProps) => {
 16 |   const [theme, _setTheme] = useControlledState(props.theme);
 17 |   const [breakpoints] = useControlledState(props.breakpoints);
 18 | 
 19 |   const breakpointsSortedKeys = React.useMemo(() => {
 20 |     return Object.entries(breakpoints)
 21 |       .sort(([, a], [, b]) => a - b)
 22 |       .map((v) => v[0]);
 23 |   }, [breakpoints]);
 24 | 
 25 |   const [currentBreakpoint, _setCurrentBreakpoint] = useControlledState(
 26 |     props.currentBreakpoint ??
 27 |       getCurrentBreakpoint(
 28 |         Dimensions.get('window').width,
 29 |         breakpointsSortedKeys,
 30 |         breakpoints
 31 |       )
 32 |   );
 33 | 
 34 |   const styleSheets = React.useRef({} as any).current;
 35 |   const themeDependentStyleSheetIds = React.useRef({} as any).current;
 36 |   const breakpointDependentStyleSheetIds = React.useRef({} as any).current;
 37 | 
 38 |   const generateStyleSheet = (
 39 |     id: any,
 40 |     stylesFn: any,
 41 |     dependsUpon: string[]
 42 |   ) => {
 43 |     if (styleSheets[id]) {
 44 |       return styleSheets[id];
 45 |     } else {
 46 |       styleSheets[id] = StyleSheet.create(
 47 |         stylesFn({
 48 |           theme,
 49 |           currentBreakpoint,
 50 |           getClosestResponsiveValue: (values: any) =>
 51 |             getClosestResponsiveValue(
 52 |               values,
 53 |               currentBreakpoint,
 54 |               breakpointsSortedKeys
 55 |             ),
 56 |         })
 57 |       );
 58 | 
 59 |       if (dependsUpon.includes('theme')) {
 60 |         themeDependentStyleSheetIds[id] = stylesFn;
 61 |       }
 62 |       if (dependsUpon.includes('currentBreakpoint')) {
 63 |         breakpointDependentStyleSheetIds[id] = stylesFn;
 64 |       }
 65 | 
 66 |       return styleSheets[id];
 67 |     }
 68 |   };
 69 | 
 70 |   const setTheme = useCallback(
 71 |     (newTheme: any) => {
 72 |       for (let key in themeDependentStyleSheetIds) {
 73 |         const styleFn = themeDependentStyleSheetIds[key];
 74 |         styleSheets[key] = StyleSheet.create(
 75 |           styleFn({
 76 |             theme: newTheme,
 77 |             currentBreakpoint,
 78 |             getClosestResponsiveValue: (values: any) =>
 79 |               getClosestResponsiveValue(
 80 |                 values,
 81 |                 currentBreakpoint,
 82 |                 breakpointsSortedKeys
 83 |               ),
 84 |           })
 85 |         );
 86 |       }
 87 |       _setTheme(newTheme);
 88 |     },
 89 |     [
 90 |       _setTheme,
 91 |       breakpointsSortedKeys,
 92 |       currentBreakpoint,
 93 |       styleSheets,
 94 |       themeDependentStyleSheetIds,
 95 |     ]
 96 |   );
 97 | 
 98 |   const setCurrentBreakpoint = useCallback(
 99 |     (newBreakpoint: any) => {
100 |       for (let key in breakpointDependentStyleSheetIds) {
101 |         const styleFn = breakpointDependentStyleSheetIds[key];
102 |         styleSheets[key] = StyleSheet.create(
103 |           styleFn({
104 |             theme,
105 |             currentBreakpoint: newBreakpoint,
106 |             getClosestResponsiveValue: (values: any) =>
107 |               getClosestResponsiveValue(
108 |                 values,
109 |                 newBreakpoint,
110 |                 breakpointsSortedKeys
111 |               ),
112 |           })
113 |         );
114 |       }
115 |       _setCurrentBreakpoint(newBreakpoint);
116 |     },
117 |     [
118 |       _setCurrentBreakpoint,
119 |       breakpointDependentStyleSheetIds,
120 |       breakpointsSortedKeys,
121 |       styleSheets,
122 |       theme,
123 |     ]
124 |   );
125 | 
126 |   const resolveResponsiveValue = (values: any) => {
127 |     return getClosestResponsiveValue(
128 |       values,
129 |       currentBreakpoint,
130 |       breakpointsSortedKeys
131 |     );
132 |   };
133 | 
134 |   React.useEffect(() => {
135 |     function updateCurrentBreakpoint(dimensions: any) {
136 |       setCurrentBreakpoint(
137 |         getCurrentBreakpoint(
138 |           dimensions.window.width,
139 |           breakpointsSortedKeys,
140 |           breakpoints
141 |         )
142 |       );
143 |     }
144 |     Dimensions.addEventListener('change', updateCurrentBreakpoint);
145 |     return () => {
146 |       Dimensions.removeEventListener('change', updateCurrentBreakpoint);
147 |     };
148 |   }, [setCurrentBreakpoint, breakpointsSortedKeys, breakpoints]);
149 | 
150 |   return (
151 |     <ThemeContext.Provider
152 |       {...props}
153 |       value={{
154 |         setCurrentBreakpoint,
155 |         setTheme,
156 |         theme,
157 |         currentBreakpoint,
158 |         generateStyleSheet,
159 |         breakpoints,
160 |         resolveResponsiveValue,
161 |       }}
162 |     />
163 |   );
164 | };
165 | 
166 | export const useTheme = () => {
167 |   const style = React.useContext(ThemeContext);
168 |   return { theme: style.theme, setTheme: style.setTheme };
169 | };
170 | 
171 | export const useCurrentBreakpoint = () => {
172 |   const style = React.useContext(ThemeContext);
173 |   return {
174 |     currentBreakpoint: style.currentBreakpoint,
175 |     resolveResponsiveValue: style.resolveResponsiveValue,
176 |   };
177 | };
178 | 
179 | export const useStyleSheet = (id: any, styleFn: any, dependsUpon: string[]) => {
180 |   const style = React.useContext(ThemeContext);
181 |   return style.generateStyleSheet(id, styleFn, dependsUpon);
182 | };
183 | 
184 | const ThemeContext = React.createContext({
185 |   theme: {},
186 |   currentBreakpoint: null,
187 |   setTheme: (_theme: any) => {},
188 |   setCurrentBreakpoint: (_currentBreakpoint: any) => {},
189 |   generateStyleSheet: (_id: any, _styleFn: any, _dependsUpon: any) => {},
190 |   breakpoints: {},
191 |   resolveResponsiveValue: (_values: any) => {},
192 | });
193 | 
194 | export const useHover = ({ onHoverIn, onHoverOut }: any) => {
195 |   const [isHovered, setHovered] = React.useState(false);
196 | 
197 |   return {
198 |     isHovered,
199 |     onHoverIn: (e: any) => {
200 |       onHoverIn && onHoverIn(e);
201 |       setHovered(true);
202 |     },
203 |     onHoverOut: (e: any) => {
204 |       onHoverOut && onHoverOut(e);
205 |       setHovered(false);
206 |     },
207 |   };
208 | };
209 | 
210 | export const usePress = ({ onPressIn, onPressOut }: any) => {
211 |   const [isPressed, setPressed] = React.useState(false);
212 | 
213 |   return {
214 |     isPressed,
215 |     onPressIn: (e: any) => {
216 |       onPressIn && onPressIn(e);
217 |       setPressed(true);
218 |     },
219 |     onPressOut: (e: any) => {
220 |       onPressOut && onPressOut(e);
221 |       setPressed(false);
222 |     },
223 |   };
224 | };
225 | 
226 | export const useFocus = ({ onFocus, onBlur }: any) => {
227 |   const [isFocused, setFocused] = React.useState(false);
228 | 
229 |   return {
230 |     isFocused,
231 |     onFocus: (e: any) => {
232 |       onFocus && onFocus(e);
233 |       setFocused(true);
234 |     },
235 |     onBlur: (e: any) => {
236 |       onBlur && onBlur(e);
237 |       setFocused(false);
238 |     },
239 |   };
240 | };
241 | 
242 | export function createTheme<Theme, Breakpoints>({
243 |   theme,
244 |   breakpoints,
245 | }: {
246 |   theme: Theme;
247 |   breakpoints: Breakpoints;
248 | }) {
249 |   function ThemeProvider({ children }: { children: ReactNode }) {
250 |     return (
251 |       <ThemeProviderImpl
252 |         theme={theme}
253 |         breakpoints={breakpoints}
254 |         children={children}
255 |       />
256 |     );
257 |   }
258 |   // The below is a noOp function, it'll be removed by the transpiler and replaced with React component
259 |   function createVariant<Component extends React.ComponentType, DefinedStyles>(
260 |     _Component: Component,
261 |     _styles: DefinedStyles | (IStyles<Theme, Breakpoints, DefinedStyles> & {})
262 |   ) {
263 |     return {} as React.FC<
264 |       GetVariantProps<DefinedStyles> & React.ComponentProps<Component>
265 |     >;
266 |   }
267 | 
268 |   function useTheme() {
269 |     const style = React.useContext(ThemeContext);
270 |     return { theme: style.theme, setTheme: style.setTheme } as {
271 |       theme: Theme;
272 |       setTheme: (theme: Theme) => void;
273 |     };
274 |   }
275 | 
276 |   function useCurrentBreakpoint() {
277 |     const style = React.useContext(ThemeContext);
278 |     return {
279 |       currentBreakpoint: style.currentBreakpoint,
280 |       resolveResponsiveValue: style.resolveResponsiveValue,
281 |     } as unknown as {
282 |       currentBreakpoint: keyof Breakpoints;
283 |       resolveResponsiveValue: (values: {
284 |         [Key in keyof Breakpoints]?: unknown;
285 |       }) => unknown;
286 |     };
287 |   }
288 | 
289 |   return { ThemeProvider, createVariant, useTheme, useCurrentBreakpoint };
290 | }
291 | 
292 | export type { RNStyles };
293 | 


--------------------------------------------------------------------------------
/babel-plugin/utility-prop-v2.js:
--------------------------------------------------------------------------------
  1 | const template = require('@babel/template').default;
  2 | const t = require('@babel/types');
  3 | const { addNamespace, addNamed } = require('@babel/helper-module-imports');
  4 | 
  5 | let importsAdded = false;
  6 | let packageNameSpace = '';
  7 | let styleSheetNameSpace = '';
  8 | let reactNameSpace = '';
  9 | let root;
 10 | const buildThemeTemplate = template(
 11 |   'const THEME_IDENTIFIER = PACKAGE_NAME_SPACE.useTheme().theme;'
 12 | );
 13 | const buildBreakPointTemplate = template(
 14 |   'const BREAKPOINT_IDENTIFIER = PACKAGE_NAME_SPACE.useCurrentBreakpoint();'
 15 | );
 16 | 
 17 | const source = 'react-native-styled-variants';
 18 | 
 19 | const PACKAGE_NAMESPACE_HINT = '_rnStyledVariants_';
 20 | 
 21 | const attrMaps = {
 22 |   sx: 'style',
 23 |   contentContainerSX: 'contentContainerStyle',
 24 | };
 25 | 
 26 | let visitor = {
 27 |   'Program'(path) {
 28 |     root = path;
 29 |     importsAdded = false;
 30 |   },
 31 |   'FunctionDeclaration|ArrowFunctionExpression'(path) {
 32 |     // Put check if starts with capital name to make sure it's a react component!
 33 | 
 34 |     let count = 0;
 35 |     const getStyleId = () => {
 36 |       count++;
 37 |       return count.toString();
 38 |     };
 39 | 
 40 |     let hasThemeStyles = false;
 41 |     let hasResponsiveStyles = false;
 42 |     let themeIdentifier = path.scope.generateUidIdentifier('theme');
 43 |     let breakPointIdentifier =
 44 |       path.scope.generateUidIdentifier('currentBreakpoint');
 45 |     const resolveResponsiveValueMemberExpression = t.memberExpression(
 46 |       breakPointIdentifier,
 47 |       t.identifier('resolveResponsiveValue')
 48 |     );
 49 | 
 50 |     let foundSXAttribute = false;
 51 |     let styleSheetIdentifier = path.scope.generateUidIdentifier('styleSheet');
 52 | 
 53 |     let styleSheet = t.objectExpression([]);
 54 | 
 55 |     path.traverse({
 56 |       JSXOpeningElement(jsxPath) {
 57 |         // If sx or contentContainerSX includes variables, we'll not memoize it for now!
 58 |         let containsVariables = false;
 59 | 
 60 |         const jsxAttributes = jsxPath
 61 |           .get('attributes')
 62 |           .filter((attr) => t.isJSXAttribute(attr.node));
 63 | 
 64 |         const styleAttributePath = jsxAttributes.find(
 65 |           (attr) => attr.node.name.name === 'style'
 66 |         );
 67 |         if (styleAttributePath) {
 68 |           styleAttributePath.traverse({
 69 |             CallExpression(path) {
 70 |               if (
 71 |                 path.node.callee.name === 'sx' &&
 72 |                 t.isObjectExpression(path.node.arguments[0])
 73 |               ) {
 74 |                 foundSXAttribute = true;
 75 |                 const styleId = getStyleId();
 76 |                 path.traverse({
 77 |                   SpreadElement() {
 78 |                     containsVariables = true;
 79 |                   },
 80 |                   ObjectProperty: {
 81 |                     enter(path) {
 82 |                       // If at any point we come across a variable in styles
 83 |                       if (t.isIdentifier(path.node.value)) {
 84 |                         containsVariables = true;
 85 |                       }
 86 |                       // Converts $color.yellow => theme['color']['yellow']
 87 |                       if (t.isStringLiteral(path.node.value)) {
 88 |                         const literalNode = path.node.value;
 89 |                         // convert $colors.blue.500 => theme["blue"]["500"]
 90 |                         if (literalNode.value.includes('$')) {
 91 |                           hasThemeStyles = true;
 92 | 
 93 |                           const tokens = literalNode.value
 94 |                             .replace('$', themeIdentifier.name + '.')
 95 |                             .split('.');
 96 |                           const token = tokens.shift();
 97 |                           const property = tokens.shift();
 98 |                           let tokenMemberExpression = t.memberExpression(
 99 |                             t.identifier(token),
100 |                             t.stringLiteral(property),
101 |                             true
102 |                           );
103 |                           while (tokens.length) {
104 |                             const property = tokens.shift();
105 |                             tokenMemberExpression = t.memberExpression(
106 |                               tokenMemberExpression,
107 |                               t.stringLiteral(property),
108 |                               true
109 |                             );
110 |                           }
111 | 
112 |                           path.node.value = tokenMemberExpression;
113 |                         }
114 |                       }
115 | 
116 |                       // Converts {"@sm": 20, "@base": 10} => resolveResponsiveValue({sm: 20, base: 10});
117 |                       else if (t.isObjectExpression(path.node.value)) {
118 |                         const objectExpressionNode = path.node.value;
119 | 
120 |                         if (
121 |                           objectExpressionNode.properties.some((p) => {
122 |                             return (
123 |                               p.key && p.key.value && p.key.value.includes('@')
124 |                             );
125 |                           })
126 |                         ) {
127 |                           hasResponsiveStyles = true;
128 | 
129 |                           objectExpressionNode.properties.forEach(
130 |                             (p) =>
131 |                               (p.key = t.stringLiteral(
132 |                                 p.key.value.replace('@', '')
133 |                               ))
134 |                           );
135 | 
136 |                           path.node.value = t.callExpression(
137 |                             resolveResponsiveValueMemberExpression,
138 |                             [objectExpressionNode]
139 |                           );
140 |                         }
141 |                       }
142 |                     },
143 |                   },
144 |                 });
145 | 
146 |                 let sxReplacement;
147 |                 // If contains a variable, add inline object instead of creating stylesheet
148 |                 if (containsVariables) {
149 |                   sxReplacement = path.node.arguments[0];
150 |                 } else {
151 |                   // Append style expression to function level stylesheet object
152 |                   styleSheet = t.objectExpression([
153 |                     ...styleSheet.properties,
154 |                     t.objectProperty(
155 |                       t.identifier(styleId),
156 |                       path.node.arguments[0]
157 |                     ),
158 |                   ]);
159 | 
160 |                   sxReplacement = t.memberExpression(
161 |                     styleSheetIdentifier,
162 |                     t.stringLiteral(styleId),
163 |                     true
164 |                   );
165 |                 }
166 | 
167 |                 path.replaceWith(sxReplacement);
168 |               }
169 |             },
170 |           });
171 |         }
172 |       },
173 |     });
174 | 
175 |     if (!importsAdded && foundSXAttribute) {
176 |       // Adds import * as X from "package"
177 |       packageNameSpace = addNamespace(root, source, {
178 |         nameHint: PACKAGE_NAMESPACE_HINT,
179 |       }).name;
180 |       styleSheetNameSpace = addNamed(root, 'StyleSheet', 'react-native', {
181 |         nameHint: PACKAGE_NAMESPACE_HINT + '_styleSheet',
182 |       }).name;
183 |       // Adds import * as Y from "react"
184 |       reactNameSpace = addNamespace(root, 'react', {
185 |         nameHint: PACKAGE_NAMESPACE_HINT + '_react',
186 |       }).name;
187 |       importsAdded = true;
188 |     }
189 | 
190 |     if (styleSheet.properties.length) {
191 |       let memoArray = [];
192 |       if (hasThemeStyles) {
193 |         memoArray.push(themeIdentifier);
194 |       }
195 |       if (hasResponsiveStyles) {
196 |         memoArray.push(resolveResponsiveValueMemberExpression);
197 |       }
198 |       const styleSheetMemoized = t.callExpression(
199 |         t.memberExpression(
200 |           t.identifier(reactNameSpace),
201 |           t.identifier('useMemo')
202 |         ),
203 |         [
204 |           t.arrowFunctionExpression(
205 |             [],
206 |             t.callExpression(
207 |               t.memberExpression(
208 |                 t.identifier(styleSheetNameSpace),
209 |                 t.identifier('create')
210 |               ),
211 |               [styleSheet]
212 |             )
213 |           ),
214 |           t.arrayExpression(memoArray),
215 |         ]
216 |       );
217 | 
218 |       path
219 |         .get('body')
220 |         .unshiftContainer(
221 |           'body',
222 |           t.variableDeclaration('const', [
223 |             t.variableDeclarator(styleSheetIdentifier, styleSheetMemoized),
224 |           ])
225 |         );
226 |     }
227 | 
228 |     if (hasThemeStyles) {
229 |       path.get('body').unshiftContainer(
230 |         'body',
231 |         buildThemeTemplate({
232 |           THEME_IDENTIFIER: themeIdentifier,
233 |           PACKAGE_NAME_SPACE: packageNameSpace,
234 |         })
235 |       );
236 |     }
237 | 
238 |     if (hasResponsiveStyles) {
239 |       path.get('body').unshiftContainer(
240 |         'body',
241 |         buildBreakPointTemplate({
242 |           BREAKPOINT_IDENTIFIER: breakPointIdentifier,
243 |           PACKAGE_NAME_SPACE: packageNameSpace,
244 |         })
245 |       );
246 |     }
247 |   },
248 | };
249 | 
250 | module.exports = visitor;
251 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing
  2 | 
  3 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project.
  4 | 
  5 | ## Development workflow
  6 | 
  7 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
  8 | 
  9 | ```sh
 10 | yarn
 11 | ```
 12 | 
 13 | > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development.
 14 | 
 15 | While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
 16 | 
 17 | To start the packager:
 18 | 
 19 | ```sh
 20 | yarn example start
 21 | ```
 22 | 
 23 | To run the example app on Android:
 24 | 
 25 | ```sh
 26 | yarn example android
 27 | ```
 28 | 
 29 | To run the example app on iOS:
 30 | 
 31 | ```sh
 32 | yarn example ios
 33 | ```
 34 | 
 35 | To run the example app on Web:
 36 | 
 37 | ```sh
 38 | yarn example web
 39 | ```
 40 | 
 41 | Make sure your code passes TypeScript and ESLint. Run the following to verify:
 42 | 
 43 | ```sh
 44 | yarn typescript
 45 | yarn lint
 46 | ```
 47 | 
 48 | To fix formatting errors, run the following:
 49 | 
 50 | ```sh
 51 | yarn lint --fix
 52 | ```
 53 | 
 54 | Remember to add tests for your change if possible. Run the unit tests by:
 55 | 
 56 | ```sh
 57 | yarn test
 58 | ```
 59 | 
 60 | ### Commit message convention
 61 | 
 62 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
 63 | 
 64 | - `fix`: bug fixes, e.g. fix crash due to deprecated method.
 65 | - `feat`: new features, e.g. add new method to the module.
 66 | - `refactor`: code refactor, e.g. migrate from class components to hooks.
 67 | - `docs`: changes into documentation, e.g. add usage example for the module..
 68 | - `test`: adding or updating tests, e.g. add integration tests using detox.
 69 | - `chore`: tooling changes, e.g. change CI config.
 70 | 
 71 | Our pre-commit hooks verify that your commit message matches this format when committing.
 72 | 
 73 | ### Linting and tests
 74 | 
 75 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
 76 | 
 77 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
 78 | 
 79 | Our pre-commit hooks verify that the linter and tests pass when committing.
 80 | 
 81 | ### Publishing to npm
 82 | 
 83 | We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.
 84 | 
 85 | To publish new versions, run the following:
 86 | 
 87 | ```sh
 88 | yarn release
 89 | ```
 90 | 
 91 | ### Scripts
 92 | 
 93 | The `package.json` file contains various scripts for common tasks:
 94 | 
 95 | - `yarn bootstrap`: setup project by installing all dependencies and pods.
 96 | - `yarn typescript`: type-check files with TypeScript.
 97 | - `yarn lint`: lint files with ESLint.
 98 | - `yarn test`: run unit tests with Jest.
 99 | - `yarn example start`: start the Metro server for the example app.
100 | - `yarn example android`: run the example app on Android.
101 | - `yarn example ios`: run the example app on iOS.
102 | 
103 | ### Sending a pull request
104 | 
105 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
106 | 
107 | When you're sending a pull request:
108 | 
109 | - Prefer small pull requests focused on one change.
110 | - Verify that linters and tests are passing.
111 | - Review the documentation to make sure it looks good.
112 | - Follow the pull request template when opening a pull request.
113 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.
114 | 
115 | ## Code of Conduct
116 | 
117 | ### Our Pledge
118 | 
119 | 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.
120 | 
121 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
122 | 
123 | ### Our Standards
124 | 
125 | Examples of behavior that contributes to a positive environment for our community include:
126 | 
127 | - Demonstrating empathy and kindness toward other people
128 | - Being respectful of differing opinions, viewpoints, and experiences
129 | - Giving and gracefully accepting constructive feedback
130 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
131 | - Focusing on what is best not just for us as individuals, but for the overall community
132 | 
133 | Examples of unacceptable behavior include:
134 | 
135 | - The use of sexualized language or imagery, and sexual attention or
136 |   advances of any kind
137 | - Trolling, insulting or derogatory comments, and personal or political attacks
138 | - Public or private harassment
139 | - Publishing others' private information, such as a physical or email
140 |   address, without their explicit permission
141 | - Other conduct which could reasonably be considered inappropriate in a
142 |   professional setting
143 | 
144 | ### Enforcement Responsibilities
145 | 
146 | 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.
147 | 
148 | 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.
149 | 
150 | ### Scope
151 | 
152 | 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.
153 | 
154 | ### Enforcement
155 | 
156 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly.
157 | 
158 | All community leaders are obligated to respect the privacy and security of the reporter of any incident.
159 | 
160 | ### Enforcement Guidelines
161 | 
162 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
163 | 
164 | #### 1. Correction
165 | 
166 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
167 | 
168 | **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.
169 | 
170 | #### 2. Warning
171 | 
172 | **Community Impact**: A violation through a single incident or series of actions.
173 | 
174 | **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.
175 | 
176 | #### 3. Temporary Ban
177 | 
178 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
179 | 
180 | **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.
181 | 
182 | #### 4. Permanent Ban
183 | 
184 | **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.
185 | 
186 | **Consequence**: A permanent ban from any sort of public interaction within the community.
187 | 
188 | ### Attribution
189 | 
190 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
191 | available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
192 | 
193 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
194 | 
195 | [homepage]: https://www.contributor-covenant.org
196 | 
197 | For answers to common questions about this code of conduct, see the FAQ at
198 | https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
199 | 


--------------------------------------------------------------------------------
/babel-plugin/__test__/index.test.jsx:
--------------------------------------------------------------------------------
  1 | const { parse } = require('@babel/parser');
  2 | const traverse = require('@babel/traverse').default;
  3 | const generate = require('@babel/generator').default;
  4 | const visitor = require('../visitor');
  5 | const utilityPropVisitor = require('../utility-prop-visitor');
  6 | 
  7 | function transformToStyles(code) {
  8 |   const ast = parse(code, {
  9 |     sourceType: 'module',
 10 |     plugins: ['jsx', 'typescript'],
 11 |   });
 12 | 
 13 |   traverse(ast, {
 14 |     'Program'(path) {
 15 |       visitor.Program(path);
 16 |       utilityPropVisitor.Program(path);
 17 |     },
 18 |     'FunctionDeclaration|ArrowFunctionExpression'(path, state) {
 19 |       utilityPropVisitor['FunctionDeclaration|ArrowFunctionExpression'](
 20 |         path,
 21 |         state
 22 |       );
 23 |     },
 24 |     'CallExpression'(path, state) {
 25 |       visitor.CallExpression(path, state);
 26 |     },
 27 |   });
 28 | 
 29 |   // generate code <- ast
 30 |   const output = generate(ast, code);
 31 |   return output.code;
 32 | }
 33 | 
 34 | describe('test createVariant transform plugin', () => {
 35 |   it('generates styled component', () => {
 36 |     const code = `
 37 |       const StyledText = createVariant(Text, {
 38 |         padding: { '@base': 30, '@md': 90, '@xl': 5 },
 39 |         backgroundColor: "$colors.indigo.500",
 40 |         variants: {
 41 |           color: {
 42 |             blue: {
 43 |               color: "white",
 44 |             },
 45 |             indigo: {
 46 |               color: "black",
 47 |             },
 48 |           },
 49 |           checked: {
 50 |             true: {
 51 |               color: "white",
 52 |             },
 53 |           },
 54 |           size: {
 55 |             md: {
 56 |               padding: 10,
 57 |             },
 58 |           },
 59 |         },
 60 |       });
 61 |     `;
 62 |     const output = transformToStyles(code);
 63 |     expect(output).toMatchSnapshot();
 64 |   });
 65 | 
 66 |   it('generates styled component for baseStyle', () => {
 67 |     const code = `
 68 |     const StyledPressable = createVariant(Pressable, {
 69 |       padding: "$space.3",
 70 |       backgroundColor: "$colors.blue.800",
 71 |     });
 72 |     `;
 73 |     const output = transformToStyles(code);
 74 |     expect(output).toMatchSnapshot();
 75 |   });
 76 | 
 77 |   it('verifies base hover styles', () => {
 78 |     const code = `
 79 |     const StyledPressable = createVariant(Pressable, {
 80 |       padding: "$space.3",
 81 |       backgroundColor: "$colors.blue.800",
 82 |       _hovered: {
 83 |         backgroundColor: "$colors.hover",
 84 |       },
 85 |       variants: {
 86 |         color: {
 87 |           gray: {
 88 |           backgroundColor: "$colors.gray",
 89 |           }
 90 |         }
 91 |       }
 92 |     });
 93 |     `;
 94 |     const output = transformToStyles(code);
 95 |     expect(output).toMatchSnapshot();
 96 |   });
 97 | 
 98 |   it('verifies base pressed styles', () => {
 99 |     const code = `
100 |     const StyledPressable = createVariant(Pressable, {
101 |       padding: "$space.3",
102 |       backgroundColor: "$colors.primary",
103 |       _pressed: {
104 |         backgroundColor: "$colors.pressed",
105 |       },
106 |     });
107 |     `;
108 |     const output = transformToStyles(code);
109 |     expect(output).toMatchSnapshot();
110 |   });
111 | 
112 |   it('verifies base/variants pressed styles', () => {
113 |     const code = `
114 |     const StyledPressable = createVariant(Pressable, {
115 |       padding: "$space.3",
116 |       backgroundColor: "$colors.primary",
117 |       _pressed: {
118 |         backgroundColor: "$colors.pressed",
119 |       },
120 |       variants: {
121 |         checked: {
122 |           true: {
123 |             _pressed: {
124 |               backgroundColor: "$colors.pressed_checked",
125 |             },
126 |           }
127 |         }
128 |       }
129 |     });
130 |     `;
131 |     const output = transformToStyles(code);
132 |     expect(output).toMatchSnapshot();
133 |   });
134 | 
135 |   it('verifies base focus styles', () => {
136 |     const code = `
137 |     const StyledPressable = createVariant(Pressable, {
138 |       padding: "$space.3",
139 |       backgroundColor: "$colors.primary",
140 |       _focused: {
141 |         backgroundColor: "$colors.pressed",
142 |       },
143 |     });
144 |     `;
145 |     const output = transformToStyles(code);
146 |     expect(output).toMatchSnapshot();
147 |   });
148 | 
149 |   it('verifies base focus styles', () => {
150 |     const code = `
151 |     const StyledPressable = createVariant(Pressable, {
152 |       padding: "$space.3",
153 |       backgroundColor: "$colors.primary",
154 |       _focused: {
155 |         backgroundColor: "$colors.pressed",
156 |       },
157 |       variants: {
158 |         checked: {
159 |           true: {
160 |             _focused: {
161 |               backgroundColor: "$colors.pressed_checked",
162 |             },
163 |           }
164 |         }
165 |       }
166 |     });
167 |     `;
168 |     const output = transformToStyles(code);
169 |     expect(output).toMatchSnapshot();
170 |   });
171 | });
172 | 
173 | describe('test sx transform plugin', () => {
174 |   it("creates memoized stylesheet without dependency array", () => {
175 |     const code = `
176 |       const App = () => {
177 |         return <View sx={{margin: 10, padding: 20}} />
178 |       }
179 |     `
180 |     const output = transformToStyles(code);
181 |     expect(output).toMatchSnapshot();
182 |   })
183 | 
184 |   it("creates memoized stylesheet with theme dependency", () => {
185 |     const code = `
186 |       const App = () => {
187 |         return <View sx={{margin: '$colors.blue', padding: 20}} />
188 |       }
189 |     `
190 |     const output = transformToStyles(code);
191 |     expect(output).toMatchSnapshot();
192 |   })
193 | 
194 |   it("creates memoized stylesheet with responsive breakpoint dependency", () => {
195 |     const code = `
196 |       const App = () => {
197 |         return <View sx={{margin: '$colors.blue', padding: {'@sm': 20, '@base': 10} }} />
198 |       }
199 |     `
200 |     const output = transformToStyles(code);
201 |     expect(output).toMatchSnapshot();
202 |   })
203 | 
204 |   it("creates memoized stylesheet and updates existing style property", () => {
205 |     const code = `
206 |       const App = () => {
207 |         return <View sx={{margin: '$colors.blue', padding: {'@sm': 20, '@base': 10} }} style={{margin: 10}} />
208 |       }
209 |     `
210 |     const output = transformToStyles(code);
211 |     expect(output).toMatchSnapshot();
212 |   })
213 | 
214 |   it("creates memoized stylesheet and updates existing style array property", () => {
215 |     const code = `
216 |       const App = () => {
217 |         return <View sx={{margin: '$colors.blue', padding: {'@sm': 20, '@base': 10} }} style={[{margin: 10}]} />
218 |       }
219 |     `
220 |     const output = transformToStyles(code);
221 |     expect(output).toMatchSnapshot();
222 |   })
223 | 
224 |   it("adds conditional sx property in style", () => {
225 |     const code = `
226 |       const App = () => {
227 |         const pressed = false;
228 |         return <View sx={pressed ? {backgroundColor: '$colors.blue'} : {}} style={[{margin: 10}]} />
229 |       }
230 |     `
231 |     const output = transformToStyles(code);
232 |     expect(output).toMatchSnapshot();
233 |   })
234 | 
235 |   it("verifies contentContainerSX prop gets appended to contentContainerStyle prop", () => {
236 |     const code = `
237 |       const App = () => {
238 |         const pressed = false;
239 |         return <ScrollView contentContainerSX={{backgroundColor: '$colors.blue'}} style={[{margin: 10}]} />
240 |       }
241 |     `
242 |     const output = transformToStyles(code);
243 |     expect(output).toMatchSnapshot();
244 |   })
245 | 
246 |   it("verifies sx is added inline when it contains variable", () => {
247 |     const code = `
248 |       const App = () => {
249 |         const a = 10;
250 |         return <View sx={{padding: a}} style={[{margin: 10}]} />
251 |       }
252 |     `
253 |     const output = transformToStyles(code);
254 |     expect(output).toMatchSnapshot();
255 |   })
256 | 
257 |   it("verifies sx is added inline when it contains variable - conditional", () => {
258 |     const code = `
259 |       const App = () => {
260 |         const a = 10;
261 |         return <View sx={a ? {color: "black"} : {}} style={[{margin: 10}]} />
262 |       }
263 |     `
264 |     const output = transformToStyles(code);
265 |     expect(output).toMatchSnapshot();
266 |   })
267 | 
268 |   it("verifies sx is added inline when it contains variable in responsive value", () => {
269 |     const code = `
270 |       const App = () => {
271 |         const a = 'black';
272 |         return <View sx={{color: {"@sm" : a} }} />
273 |       }
274 |     `
275 |     const output = transformToStyles(code);
276 |     expect(output).toMatchSnapshot();
277 |   })
278 | 
279 |   it("verifies sx and contentContainerStyle resolves to respective style props", () => {
280 |     const code = `
281 |       const App = () => {
282 |         return <View sx={{color: "pink"}} contentContainerSX={{margin: 10}} />
283 |       }
284 |     `
285 |     const output = transformToStyles(code);
286 |     expect(output).toMatchSnapshot();
287 |   })
288 | 
289 |   it("arrow function short hand component definition", () => {
290 |     const code = `
291 |       const App = () => <View sx={{color: "pink"}} contentContainerSX={{margin: 10}} />
292 |     `
293 |     const output = transformToStyles(code);
294 |     expect(output).toMatchSnapshot();
295 |   })
296 | 
297 |   it("verify shadow object is added to stylesheet", () => {
298 |     const code = `
299 |       const App = () => <View sx={{
300 |         shadowColor: "#000",
301 |         shadowOffset: {
302 |           width: 0,
303 |           height: 2,
304 |         },
305 |         shadowOpacity: 0.22,
306 |         shadowRadius: 2.22,
307 | 
308 |         elevation: 2,
309 |       }} />
310 |     `
311 |     const output = transformToStyles(code);
312 |     expect(output).toMatchSnapshot();
313 |   })
314 | })


--------------------------------------------------------------------------------
/babel-plugin/utility-prop-visitor.js:
--------------------------------------------------------------------------------
  1 | const template = require('@babel/template').default;
  2 | const t = require('@babel/types');
  3 | const { addNamespace, addNamed } = require('@babel/helper-module-imports');
  4 | 
  5 | let packageNameSpace = '';
  6 | let styleSheetNameSpace = '';
  7 | let reactNameSpace = '';
  8 | let root;
  9 | const buildThemeTemplate = template(
 10 |   'const THEME_IDENTIFIER = PACKAGE_NAME_SPACE.useTheme().theme;'
 11 | );
 12 | const buildBreakPointTemplate = template(
 13 |   'const BREAKPOINT_IDENTIFIER = PACKAGE_NAME_SPACE.useCurrentBreakpoint();'
 14 | );
 15 | 
 16 | const source = 'react-native-styled-variants';
 17 | 
 18 | const PACKAGE_NAMESPACE_HINT = '_rnStyledVariants_';
 19 | 
 20 | const attrMaps = {
 21 |   sx: 'style',
 22 |   contentContainerSX: 'contentContainerStyle',
 23 | };
 24 | 
 25 | const getThemeTokenFromThemeLiteral = (node, themeIdentifier) => {
 26 |   const tokens = node.value.replace('$', themeIdentifier.name + '.').split('.');
 27 |   const token = tokens.shift();
 28 |   const property = tokens.shift();
 29 |   let tokenMemberExpression = t.memberExpression(
 30 |     t.identifier(token),
 31 |     t.stringLiteral(property),
 32 |     true
 33 |   );
 34 |   while (tokens.length) {
 35 |     const property = tokens.shift();
 36 |     tokenMemberExpression = t.memberExpression(
 37 |       tokenMemberExpression,
 38 |       t.stringLiteral(property),
 39 |       true
 40 |     );
 41 |   }
 42 |   return tokenMemberExpression;
 43 | };
 44 | 
 45 | let visitor = {
 46 |   'Program'(path) {
 47 |     root = path;
 48 |     packageNameSpace = '';
 49 |     styleSheetNameSpace = '';
 50 |     reactNameSpace = '';
 51 |   },
 52 |   'FunctionDeclaration|ArrowFunctionExpression'(path) {
 53 |     // Put check if starts with capital name to make sure it's a react component!
 54 | 
 55 |     let count = 0;
 56 |     const getStyleId = () => {
 57 |       count++;
 58 |       return count.toString();
 59 |     };
 60 | 
 61 |     let hasThemeToken = false;
 62 |     let hasResponsiveToken = false;
 63 |     let hasThemeStyleSheet = false;
 64 |     let hasResponsiveStyleSheet = false;
 65 |     let themeIdentifier = path.scope.generateUidIdentifier('theme');
 66 |     let breakPointIdentifier =
 67 |       path.scope.generateUidIdentifier('currentBreakpoint');
 68 |     const resolveResponsiveValueMemberExpression = t.memberExpression(
 69 |       breakPointIdentifier,
 70 |       t.identifier('resolveResponsiveValue')
 71 |     );
 72 | 
 73 |     let foundSXAttribute = false;
 74 |     let styleSheetIdentifier = path.scope.generateUidIdentifier('styleSheet');
 75 | 
 76 |     let styleSheet = t.objectExpression([]);
 77 | 
 78 |     path.traverse({
 79 |       JSXOpeningElement(jsxPath) {
 80 |         // If sx or contentContainerSX includes variables, we'll not memoize it for now!
 81 |         let containsVariables = false;
 82 | 
 83 |         const jsxAttributes = jsxPath
 84 |           .get('attributes')
 85 |           .filter((attr) => t.isJSXAttribute(attr.node));
 86 | 
 87 |         const sxAttributes = jsxAttributes.filter(
 88 |           (attr) =>
 89 |             attr.node.name.name === 'sx' ||
 90 |             attr.node.name.name === 'contentContainerSX'
 91 |         );
 92 | 
 93 |         // If const App = (props) => <View sx={{color: "red"}} />
 94 |         // convert it to
 95 |         // const App = (props) => {
 96 |         // return <View sx={{color: "red"}} />
 97 |         // }
 98 |         if (sxAttributes.length > 0 && t.isJSXElement(path.node.body)) {
 99 |           path
100 |             .get('body')
101 |             .replaceWith(t.blockStatement([t.returnStatement(path.node.body)]));
102 |         }
103 | 
104 |         sxAttributes.forEach((sxAttribute) => {
105 |           let newStyleValue;
106 |           const styleAttributeName = attrMaps[sxAttribute.node.name.name];
107 | 
108 |           const newJSXAttributes = jsxPath
109 |             .get('attributes')
110 |             .filter((attr) => t.isJSXAttribute(attr.node));
111 | 
112 |           const styleAttribute = newJSXAttributes.find(
113 |             (attr) => attr.node.name.name === styleAttributeName
114 |           );
115 | 
116 |           if (
117 |             t.isJSXExpressionContainer(sxAttribute.node.value) &&
118 |             t.isObjectExpression(sxAttribute.node.value.expression)
119 |           ) {
120 |             // Search for variables in sx attribute expression properties. e.g. sx={{margin: x}}
121 |             sxAttribute.traverse({
122 |               ObjectProperty(path) {
123 |                 if (t.isIdentifier(path.node.value)) {
124 |                   containsVariables = true;
125 |                 }
126 |               },
127 |             });
128 |           }
129 | 
130 |           sxAttribute.traverse({
131 |             // Replace Theme tokens - '$colors.blue' => theme['colors']['blue']
132 |             StringLiteral(path) {
133 |               if (path.node.value.includes('$')) {
134 |                 hasThemeToken = true;
135 |                 path.replaceWith(
136 |                   getThemeTokenFromThemeLiteral(path.node, themeIdentifier)
137 |                 );
138 |               }
139 |             },
140 |           });
141 | 
142 |           // Converts {sm: 20, base: 10} => resolveResponsiveValue({sm: 20, base: 10});
143 |           // Responsive values
144 |           sxAttribute.traverse({
145 |             ObjectExpression(path) {
146 |               if (
147 |                 path.node.properties.some((p) => {
148 |                   return p.key && p.key.value && p.key.value.includes('@');
149 |                 })
150 |               ) {
151 |                 hasResponsiveToken = true;
152 | 
153 |                 // Converts "@sm" to "sm"
154 |                 path.node.properties.forEach(
155 |                   (p) => (p.key = t.stringLiteral(p.key.value.replace('@', '')))
156 |                 );
157 | 
158 |                 path.replaceWith(
159 |                   t.callExpression(resolveResponsiveValueMemberExpression, [
160 |                     path.node,
161 |                   ])
162 |                 );
163 |               }
164 |             },
165 |           });
166 | 
167 |           // Case sx={{margin: 10}}
168 |           if (
169 |             t.isJSXExpressionContainer(sxAttribute.node.value) &&
170 |             t.isObjectExpression(sxAttribute.node.value.expression)
171 |           ) {
172 |             const styleId = getStyleId();
173 | 
174 |             // If contains a variable, add inline object instead of creating stylesheet
175 |             if (containsVariables) {
176 |               newStyleValue = sxAttribute.node.value.expression;
177 |             } else {
178 |               // Append style expression to function level stylesheet object
179 |               styleSheet.properties.push(
180 |                 t.objectProperty(
181 |                   t.identifier(styleId),
182 |                   sxAttribute.node.value.expression
183 |                 )
184 |               );
185 | 
186 |               if (hasThemeToken) {
187 |                 hasThemeStyleSheet = true;
188 |               }
189 |               if (hasResponsiveToken) {
190 |                 hasResponsiveStyleSheet = true;
191 |               }
192 | 
193 |               newStyleValue = t.memberExpression(
194 |                 styleSheetIdentifier,
195 |                 t.stringLiteral(styleId),
196 |                 true
197 |               );
198 |             }
199 |           }
200 |           // Case: sx={pressed ?  {color: white} :  undefined }
201 |           else if (t.isJSXExpressionContainer(sxAttribute.node.value)) {
202 |             newStyleValue = sxAttribute.node.value.expression;
203 |           }
204 | 
205 |           if (newStyleValue) {
206 |             foundSXAttribute = true;
207 | 
208 |             // Remove sx attribute
209 |             sxAttribute.remove();
210 | 
211 |             // Modify style attribute
212 |             // Case 1 - no style attribute
213 |             if (!styleAttribute) {
214 |               jsxPath.node.attributes.push(
215 |                 t.jsxAttribute(
216 |                   t.jsxIdentifier(styleAttributeName),
217 |                   t.jsxExpressionContainer(newStyleValue)
218 |                 )
219 |               );
220 |             }
221 |             // Case 2 - style is object. style={{margin: 10}} => style={[styleSheet['1'], {margin:10}]}
222 |             // Case 3 - style is a identifier style={style} => style={[styleSheet['1'], style]}
223 |             // Case 4- style is a member expression style={style.y} => style={[styleSheet['1'], style]}
224 |             // Case 5- style is a member expression style={x ? style.y : y} => style={[styleSheet['1'], x ? style.y : y]}
225 |             else if (
226 |               t.isObjectExpression(styleAttribute.node.value.expression) ||
227 |               t.isIdentifier(styleAttribute.node.value.expression) ||
228 |               t.isMemberExpression(styleAttribute.node.value.expression) ||
229 |               t.isConditionalExpression(styleAttribute.node.value.expression)
230 |             ) {
231 |               styleAttribute.node.value.expression = t.arrayExpression([
232 |                 newStyleValue,
233 |                 styleAttribute.node.value.expression,
234 |               ]);
235 |             }
236 |             // Case 5 - style is array. style={[{margin: 10}]} => style={[styleSheet['1'], {margin:10}]}
237 |             else if (
238 |               t.isArrayExpression(styleAttribute.node.value.expression)
239 |             ) {
240 |               styleAttribute.node.value.expression.elements.unshift(
241 |                 newStyleValue
242 |               );
243 |             }
244 |             // Case 6 - style is a identifier style={style} => style={[styleSheet['1'], style]}
245 |             else if (t.isIdentifier(styleAttribute.node.value.expression)) {
246 |               styleAttribute.node.value.expression = t.arrayExpression([
247 |                 newStyleValue,
248 |                 styleAttribute.node.value.expression,
249 |               ]);
250 |             }
251 |           }
252 |         });
253 |       },
254 |     });
255 | 
256 |     if (styleSheet.properties.length) {
257 |       let memoArray = [];
258 |       if (hasThemeStyleSheet) {
259 |         memoArray.push(themeIdentifier);
260 |       }
261 |       if (hasResponsiveStyleSheet) {
262 |         memoArray.push(resolveResponsiveValueMemberExpression);
263 |       }
264 | 
265 |       if (!reactNameSpace) {
266 |         // Adds import * as Y from "react"
267 |         reactNameSpace = addNamespace(root, 'react', {
268 |           nameHint: PACKAGE_NAMESPACE_HINT + '_react',
269 |         }).name;
270 |       }
271 | 
272 |       if (!styleSheetNameSpace) {
273 |         styleSheetNameSpace = addNamed(root, 'StyleSheet', 'react-native', {
274 |           nameHint: PACKAGE_NAMESPACE_HINT + '_styleSheet',
275 |         }).name;
276 |       }
277 | 
278 |       const styleSheetMemoized = t.callExpression(
279 |         t.memberExpression(
280 |           t.identifier(reactNameSpace),
281 |           t.identifier('useMemo')
282 |         ),
283 |         [
284 |           t.arrowFunctionExpression(
285 |             [],
286 |             t.callExpression(
287 |               t.memberExpression(
288 |                 t.identifier(styleSheetNameSpace),
289 |                 t.identifier('create')
290 |               ),
291 |               [styleSheet]
292 |             )
293 |           ),
294 |           t.arrayExpression(memoArray),
295 |         ]
296 |       );
297 | 
298 |       path
299 |         .get('body')
300 |         .unshiftContainer(
301 |           'body',
302 |           t.variableDeclaration('const', [
303 |             t.variableDeclarator(styleSheetIdentifier, styleSheetMemoized),
304 |           ])
305 |         );
306 |     }
307 | 
308 |     if (hasThemeToken) {
309 |       if (!packageNameSpace) {
310 |         // Adds import * as X from "package"
311 |         packageNameSpace = addNamespace(root, source, {
312 |           nameHint: PACKAGE_NAMESPACE_HINT,
313 |         }).name;
314 |       }
315 | 
316 |       path.get('body').unshiftContainer(
317 |         'body',
318 |         buildThemeTemplate({
319 |           THEME_IDENTIFIER: themeIdentifier,
320 |           PACKAGE_NAME_SPACE: packageNameSpace,
321 |         })
322 |       );
323 |     }
324 | 
325 |     if (hasResponsiveToken) {
326 |       if (!packageNameSpace) {
327 |         // Adds import * as X from "package"
328 |         packageNameSpace = addNamespace(root, source, {
329 |           nameHint: PACKAGE_NAMESPACE_HINT,
330 |         }).name;
331 |       }
332 | 
333 |       path.get('body').unshiftContainer(
334 |         'body',
335 |         buildBreakPointTemplate({
336 |           BREAKPOINT_IDENTIFIER: breakPointIdentifier,
337 |           PACKAGE_NAME_SPACE: packageNameSpace,
338 |         })
339 |       );
340 |     }
341 |   },
342 | };
343 | 
344 | module.exports = visitor;
345 | 


--------------------------------------------------------------------------------
/babel-plugin/utility-prop-v3.js:
--------------------------------------------------------------------------------
  1 | const template = require('@babel/template').default;
  2 | const t = require('@babel/types');
  3 | const { addNamespace, addNamed } = require('@babel/helper-module-imports');
  4 | const generate = require('@babel/generator').default;
  5 | const utilityProps = require('./utility-props');
  6 | 
  7 | let importsAdded = false;
  8 | let packageNameSpace = '';
  9 | let styleSheetNameSpace = '';
 10 | let reactNameSpace = '';
 11 | let root;
 12 | const buildThemeTemplate = template(
 13 |   'const THEME_IDENTIFIER = PACKAGE_NAME_SPACE.useTheme().theme;'
 14 | );
 15 | const buildBreakPointTemplate = template(
 16 |   'const BREAKPOINT_IDENTIFIER = PACKAGE_NAME_SPACE.useCurrentBreakpoint();'
 17 | );
 18 | 
 19 | const source = 'react-native-styled-variants';
 20 | 
 21 | const PACKAGE_NAMESPACE_HINT = '_rnStyledVariants_';
 22 | 
 23 | const getThemeTokenFromThemeLiteral = (node, themeIdentifier) => {
 24 |   const tokens = node.value.replace('$', themeIdentifier.name + '.').split('.');
 25 |   const token = tokens.shift();
 26 |   const property = tokens.shift();
 27 |   let tokenMemberExpression = t.memberExpression(
 28 |     t.identifier(token),
 29 |     t.stringLiteral(property),
 30 |     true
 31 |   );
 32 |   while (tokens.length) {
 33 |     const property = tokens.shift();
 34 |     tokenMemberExpression = t.memberExpression(
 35 |       tokenMemberExpression,
 36 |       t.stringLiteral(property),
 37 |       true
 38 |     );
 39 |   }
 40 |   return tokenMemberExpression;
 41 | };
 42 | 
 43 | let visitor = {
 44 |   'Program'(path) {
 45 |     root = path;
 46 |     importsAdded = false;
 47 |   },
 48 |   'FunctionDeclaration|ArrowFunctionExpression'(path) {
 49 |     // Put check if starts with capital name to make sure it's a react component!
 50 | 
 51 |     let count = 0;
 52 |     const getStyleId = () => {
 53 |       count++;
 54 |       return count.toString();
 55 |     };
 56 | 
 57 |     let hasThemeToken = false;
 58 |     let hasThemeStyleSheet = false;
 59 |     let hasResponsiveToken = false;
 60 |     let hasResponsiveStyleSheet = false;
 61 |     let themeIdentifier = path.scope.generateUidIdentifier('theme');
 62 |     let breakPointIdentifier =
 63 |       path.scope.generateUidIdentifier('currentBreakpoint');
 64 |     const resolveResponsiveValueMemberExpression = t.memberExpression(
 65 |       breakPointIdentifier,
 66 |       t.identifier('resolveResponsiveValue')
 67 |     );
 68 | 
 69 |     let foundUtilityAttrs = false;
 70 |     let styleSheetIdentifier = path.scope.generateUidIdentifier('styleSheet');
 71 | 
 72 |     let styleSheet = t.objectExpression([]);
 73 | 
 74 |     path.traverse({
 75 |       JSXOpeningElement(jsxPath) {
 76 |         const jsxAttributes = jsxPath
 77 |           .get('attributes')
 78 |           .filter((attr) => t.isJSXAttribute(attr.node));
 79 | 
 80 |         let styleAttributePath = jsxAttributes.find(
 81 |           (attr) => attr.node.name.name === 'style'
 82 |         );
 83 | 
 84 |         // Check for sx functions in style prop style={sx({})}
 85 |         /*********************/
 86 |         /*********************/
 87 |         /*********************/
 88 |         /*********************/
 89 |         if (styleAttributePath) {
 90 |           let containsVariables = false;
 91 | 
 92 |           styleAttributePath.traverse({
 93 |             CallExpression(path) {
 94 |               if (
 95 |                 path.node.callee.name === 'sx' &&
 96 |                 t.isObjectExpression(path.node.arguments[0])
 97 |               ) {
 98 |                 const styleId = getStyleId();
 99 |                 path.traverse({
100 |                   SpreadElement() {
101 |                     containsVariables = true;
102 |                   },
103 |                   ObjectProperty(path) {
104 |                     // If at any point we come across a variable in styles
105 |                     if (t.isIdentifier(path.node.value)) {
106 |                       containsVariables = true;
107 |                     }
108 |                     // Converts $color.yellow => theme['color']['yellow']
109 |                     if (t.isStringLiteral(path.node.value)) {
110 |                       const literalNode = path.node.value;
111 |                       // convert $colors.blue.500 => theme["blue"]["500"]
112 |                       if (literalNode.value.includes('$')) {
113 |                         hasThemeToken = true;
114 | 
115 |                         const tokens = literalNode.value
116 |                           .replace('$', themeIdentifier.name + '.')
117 |                           .split('.');
118 |                         const token = tokens.shift();
119 |                         const property = tokens.shift();
120 |                         let tokenMemberExpression = t.memberExpression(
121 |                           t.identifier(token),
122 |                           t.stringLiteral(property),
123 |                           true
124 |                         );
125 |                         while (tokens.length) {
126 |                           const property = tokens.shift();
127 |                           tokenMemberExpression = t.memberExpression(
128 |                             tokenMemberExpression,
129 |                             t.stringLiteral(property),
130 |                             true
131 |                           );
132 |                         }
133 | 
134 |                         path.node.value = tokenMemberExpression;
135 |                       }
136 |                     }
137 | 
138 |                     // Converts {"@sm": 20, "@base": 10} => resolveResponsiveValue({sm: 20, base: 10});
139 |                     else if (t.isObjectExpression(path.node.value)) {
140 |                       const objectExpressionNode = path.node.value;
141 | 
142 |                       if (
143 |                         objectExpressionNode.properties.some((p) => {
144 |                           return (
145 |                             p.key && p.key.value && p.key.value.includes('@')
146 |                           );
147 |                         })
148 |                       ) {
149 |                         hasResponsiveToken = true;
150 | 
151 |                         objectExpressionNode.properties.forEach(
152 |                           (p) =>
153 |                             (p.key = t.stringLiteral(
154 |                               p.key.value.replace('@', '')
155 |                             ))
156 |                         );
157 | 
158 |                         path.node.value = t.callExpression(
159 |                           resolveResponsiveValueMemberExpression,
160 |                           [objectExpressionNode]
161 |                         );
162 |                       }
163 |                     }
164 |                   },
165 |                 });
166 | 
167 |                 let sxReplacement;
168 |                 // If contains a variable, add inline object instead of creating stylesheet
169 |                 if (containsVariables) {
170 |                   sxReplacement = path.node.arguments[0];
171 |                 } else {
172 |                   // Append style expression to function level stylesheet object
173 |                   styleSheet.properties.push(
174 |                     t.objectProperty(
175 |                       t.identifier(styleId),
176 |                       path.node.arguments[0]
177 |                     )
178 |                   );
179 | 
180 |                   sxReplacement = t.memberExpression(
181 |                     styleSheetIdentifier,
182 |                     t.stringLiteral(styleId),
183 |                     true
184 |                   );
185 | 
186 |                   if (hasThemeToken) {
187 |                     hasThemeStyleSheet = true;
188 |                   }
189 |                   if (hasResponsiveToken) {
190 |                     hasResponsiveStyleSheet = true;
191 |                   }
192 |                 }
193 | 
194 |                 path.replaceWith(sxReplacement);
195 |               }
196 |             },
197 |           });
198 |         }
199 | 
200 |         // Check for utility props in jsx
201 |         /*********************/
202 |         /*********************/
203 |         /*********************/
204 |         /*********************/
205 | 
206 |         const utilityAttrs = jsxAttributes.filter(
207 |           (attr) => utilityProps[attr.node.name.name]
208 |         );
209 | 
210 |         if (utilityAttrs.length > 0) {
211 |           let styleId = getStyleId();
212 |           foundUtilityAttrs = true;
213 | 
214 |           // Construct a style object
215 |           // Case 1 - Literals
216 |           // <View mt={5} /> => <View style={styleSheet['1']} />
217 |           // Case 2 - Variables
218 |           // <View mt={x} mx={4} /> => <View style={[styleSheet, {marginTop: x}]} />
219 |           // Case 3 - Literals + existing style object
220 |           // <View mt={5} style={style} /> => <View style={[styleSheet['1], style]} />
221 |           // Case 4 - Literals + constants + existing style object
222 |           // <View mt={x} mx={4} style={style} /> => <View style={[styleSheet['1'], {marginTop: x}, style]} />
223 | 
224 |           let styleSheetStyle = t.objectExpression([]);
225 |           let variableStyles = t.objectExpression([]);
226 | 
227 |           utilityAttrs.forEach((prop) => {
228 |             let containsVariables = false;
229 |             let actualPropName = prop.node.name.name;
230 |             if (typeof utilityProps[actualPropName] === 'string') {
231 |               actualPropName = utilityProps[actualPropName];
232 |             }
233 | 
234 |             // Converts <View a="1" /> => <View a={"1"} />
235 |             if (!t.isJSXExpressionContainer(prop.node.value)) {
236 |               prop.node.value = t.jsxExpressionContainer(prop.node.value);
237 |             }
238 | 
239 |             prop.traverse({
240 |               Identifier(path) {
241 |                 containsVariables = true;
242 |               },
243 |             });
244 | 
245 |             prop.traverse({
246 |               // Replace Theme tokens
247 |               StringLiteral(path) {
248 |                 if (path.node.value.includes('$')) {
249 |                   hasThemeToken = true;
250 |                   path.replaceWith(
251 |                     getThemeTokenFromThemeLiteral(path.node, themeIdentifier)
252 |                   );
253 |                 }
254 |               },
255 |             });
256 | 
257 |             // Converts {sm: 20, base: 10} => getClosestBreakpointValue({sm: 20, base: 10}, currentBreakpoint);
258 |             // Responsive values
259 |             prop.traverse({
260 |               ObjectExpression(path) {
261 |                 if (
262 |                   path.node.properties.some((p) => {
263 |                     return p.key && p.key.value && p.key.value.includes('@');
264 |                   })
265 |                 ) {
266 |                   path.node.properties.forEach(
267 |                     (p) =>
268 |                       (p.key = t.stringLiteral(p.key.value.replace('@', '')))
269 |                   );
270 | 
271 |                   hasResponsiveToken = true;
272 |                   path.replaceWith(
273 |                     t.callExpression(resolveResponsiveValueMemberExpression, [
274 |                       path.node,
275 |                     ])
276 |                   );
277 |                 }
278 |               },
279 |             });
280 | 
281 |             let style = prop.node.value.expression;
282 | 
283 |             if (containsVariables) {
284 |               variableStyles.properties.push(
285 |                 t.objectProperty(t.identifier(actualPropName), style)
286 |               );
287 |             } else {
288 |               styleSheetStyle.properties.push(
289 |                 t.objectProperty(t.identifier(actualPropName), style)
290 |               );
291 |               if (hasResponsiveToken) {
292 |                 hasResponsiveStyleSheet = true;
293 |               }
294 |               if (hasThemeToken) {
295 |                 hasThemeStyleSheet = true;
296 |               }
297 |             }
298 | 
299 |             // Remove the utility prop
300 |             prop.remove();
301 |           });
302 | 
303 |           const hasVariableStyles = variableStyles.properties.length > 0;
304 |           const hasStyleSheetStyles = styleSheetStyle.properties.length > 0;
305 | 
306 |           let styleSheetMemberExpression = hasStyleSheetStyles
307 |             ? t.memberExpression(
308 |                 styleSheetIdentifier,
309 |                 t.stringLiteral(styleId),
310 |                 true
311 |               )
312 |             : undefined;
313 | 
314 |           if (!styleAttributePath) {
315 |             let newStyle;
316 |             if (styleSheetMemberExpression && hasVariableStyles) {
317 |               newStyle = [styleSheetMemberExpression, variableStyles];
318 |             } else if (styleSheetMemberExpression) {
319 |               newStyle = styleSheetMemberExpression;
320 |             } else {
321 |               newStyle = variableStyles;
322 |             }
323 | 
324 |             if (Array.isArray(newStyle)) {
325 |               jsxPath.node.attributes.push(
326 |                 t.jsxAttribute(
327 |                   t.jsxIdentifier('style'),
328 |                   t.jsxExpressionContainer(t.arrayExpression(newStyle))
329 |                 )
330 |               );
331 |             } else {
332 |               jsxPath.node.attributes.push(
333 |                 t.jsxAttribute(
334 |                   t.jsxIdentifier('style'),
335 |                   t.jsxExpressionContainer(newStyle)
336 |                 )
337 |               );
338 |             }
339 |           }
340 |           // Case 2 - style is object. style={{margin: 10}} => style={[styleSheet['1'], {margin:10}]}
341 |           // Case 3 - style is a identifier style={style} => style={[styleSheet['1'], style]}
342 |           // Case 4- style is a member expression style={style.y} => style={[styleSheet['1'], style]}
343 |           else if (
344 |             t.isObjectExpression(styleAttributePath.node.value.expression) ||
345 |             t.isIdentifier(styleAttributePath.node.value.expression) ||
346 |             t.isMemberExpression(styleAttributePath.node.value.expression)
347 |           ) {
348 |             let styleArrayValues = [];
349 | 
350 |             if (hasVariableStyles) {
351 |               styleArrayValues.unshift(variableStyles);
352 |             }
353 | 
354 |             if (styleSheetMemberExpression) {
355 |               styleArrayValues.unshift(styleSheetMemberExpression);
356 |             }
357 | 
358 |             styleAttributePath.node.value.expression = t.arrayExpression([
359 |               ...styleArrayValues,
360 |               styleAttributePath.node.value.expression,
361 |             ]);
362 |           }
363 |           // Case 5 - style is array. style={[{margin: 10}]} => style={[styleSheet['1'], {margin:10}]}
364 |           else if (
365 |             t.isArrayExpression(styleAttributePath.node.value.expression)
366 |           ) {
367 |             if (hasVariableStyles) {
368 |               styleAttributePath.node.value.expression.elements.unshift(
369 |                 variableStyles
370 |               );
371 |             }
372 | 
373 |             if (styleSheetMemberExpression) {
374 |               styleAttributePath.node.value.expression.elements.unshift(
375 |                 styleSheetMemberExpression
376 |               );
377 |             }
378 |           }
379 | 
380 |           // Append to function level styleSheet object
381 |           if (styleSheetStyle.properties.length > 0) {
382 |             styleSheet = t.objectExpression([
383 |               ...styleSheet.properties,
384 |               t.objectProperty(t.identifier(styleId), styleSheetStyle),
385 |             ]);
386 |           }
387 |         }
388 |       },
389 |     });
390 | 
391 |     if (!importsAdded && foundUtilityAttrs) {
392 |       // Adds import * as X from "package"
393 |       packageNameSpace = addNamespace(root, source, {
394 |         nameHint: PACKAGE_NAMESPACE_HINT,
395 |       }).name;
396 |       styleSheetNameSpace = addNamed(root, 'StyleSheet', 'react-native', {
397 |         nameHint: PACKAGE_NAMESPACE_HINT + '_styleSheet',
398 |       }).name;
399 |       // Adds import * as Y from "react"
400 |       reactNameSpace = addNamespace(root, 'react', {
401 |         nameHint: PACKAGE_NAMESPACE_HINT + '_react',
402 |       }).name;
403 |       importsAdded = true;
404 |     }
405 | 
406 |     if (styleSheet.properties.length) {
407 |       let memoArray = [];
408 |       if (hasThemeStyleSheet) {
409 |         memoArray.push(themeIdentifier);
410 |       }
411 |       if (hasResponsiveStyleSheet) {
412 |         memoArray.push(resolveResponsiveValueMemberExpression);
413 |       }
414 |       const styleSheetMemoized = t.callExpression(
415 |         t.memberExpression(
416 |           t.identifier(reactNameSpace),
417 |           t.identifier('useMemo')
418 |         ),
419 |         [
420 |           t.arrowFunctionExpression(
421 |             [],
422 |             t.callExpression(
423 |               t.memberExpression(
424 |                 t.identifier(styleSheetNameSpace),
425 |                 t.identifier('create')
426 |               ),
427 |               [styleSheet]
428 |             )
429 |           ),
430 |           t.arrayExpression(memoArray),
431 |         ]
432 |       );
433 | 
434 |       path
435 |         .get('body')
436 |         .unshiftContainer(
437 |           'body',
438 |           t.variableDeclaration('const', [
439 |             t.variableDeclarator(styleSheetIdentifier, styleSheetMemoized),
440 |           ])
441 |         );
442 |     }
443 | 
444 |     if (hasThemeToken) {
445 |       path.get('body').unshiftContainer(
446 |         'body',
447 |         buildThemeTemplate({
448 |           THEME_IDENTIFIER: themeIdentifier,
449 |           PACKAGE_NAME_SPACE: packageNameSpace,
450 |         })
451 |       );
452 |     }
453 | 
454 |     if (hasResponsiveToken) {
455 |       path.get('body').unshiftContainer(
456 |         'body',
457 |         buildBreakPointTemplate({
458 |           BREAKPOINT_IDENTIFIER: breakPointIdentifier,
459 |           PACKAGE_NAME_SPACE: packageNameSpace,
460 |         })
461 |       );
462 |     }
463 |   },
464 | };
465 | 
466 | module.exports = visitor;
467 | 


--------------------------------------------------------------------------------
/babel-plugin/visitor.js:
--------------------------------------------------------------------------------
  1 | const template = require('@babel/template').default;
  2 | const t = require('@babel/types');
  3 | const { addNamespace } = require('@babel/helper-module-imports');
  4 | const { getComponentId } = require('./hash');
  5 | 
  6 | const source = 'react-native-styled-variants';
  7 | 
  8 | const PACKAGE_NAMESPACE_HINT = '_rnStyledVariants_';
  9 | 
 10 | const hoverPropName = '_hovered';
 11 | const focusPropName = '_focused';
 12 | const pressPropName = '_pressed';
 13 | 
 14 | let root;
 15 | let packageNameSpace = '';
 16 | let reactNameSpace = '';
 17 | const visitor = {
 18 |   Program(path) {
 19 |     root = path;
 20 |     packageNameSpace = '';
 21 |     reactNameSpace = '';
 22 |   },
 23 |   // Traverse for call expression beginning with `styled()`
 24 |   CallExpression(path, state) {
 25 |     if (path.node.callee.name === 'createVariant') {
 26 |       if (!packageNameSpace) {
 27 |         // Adds import * as X from "package"
 28 |         packageNameSpace = addNamespace(root, source, {
 29 |           nameHint: PACKAGE_NAMESPACE_HINT,
 30 |         }).name;
 31 |       }
 32 | 
 33 |       if (!reactNameSpace) {
 34 |         // Adds import * as Y from "react"
 35 |         reactNameSpace = addNamespace(root, 'react', {
 36 |           nameHint: PACKAGE_NAMESPACE_HINT + '_react',
 37 |         }).name;
 38 |       }
 39 | 
 40 |       let hasResponsiveStyles = false;
 41 |       let hasThemeStyles = false;
 42 |       let hasVariants = false;
 43 |       let hasVariantsHoverStyles = false;
 44 |       let hasBaseHoverStyles = false;
 45 | 
 46 |       let hasVariantsPressedStyles = false;
 47 |       let hasBasePressedStyles = false;
 48 | 
 49 |       let hasVariantsFocusStyles = false;
 50 |       let hasBaseFocusStyles = false;
 51 | 
 52 |       const variantsIdentifier = [];
 53 | 
 54 |       const [componentIdentifier, styleObjectExpression] = path.node.arguments;
 55 |       // Variants object
 56 |       const variants = styleObjectExpression.properties.find(
 57 |         (prop) => prop.key.name === 'variants'
 58 |       );
 59 | 
 60 |       // Default variants object
 61 |       const defaultVariants = styleObjectExpression.properties.find(
 62 |         (prop) => prop.key.name === 'defaultVariants'
 63 |       );
 64 | 
 65 |       // Base style properties
 66 |       const baseStyleProperties = styleObjectExpression.properties
 67 |         .filter((prop) => prop.key.name !== 'variants')
 68 |         .filter((p) => p.key.name !== 'defaultVariants')
 69 |         .filter((p) => p.key.name !== hoverPropName)
 70 |         .filter((p) => p.key.name !== focusPropName)
 71 |         .filter((p) => p.key.name !== pressPropName);
 72 | 
 73 |       // Base hover style property.
 74 |       const baseHoverStyleProperty = styleObjectExpression.properties.filter(
 75 |         (p) => p.key.name === hoverPropName
 76 |       )[0];
 77 | 
 78 |       // Base pressed style property.
 79 |       const basePressedStyleProperty = styleObjectExpression.properties.filter(
 80 |         (p) => p.key.name === pressPropName
 81 |       )[0];
 82 | 
 83 |       // Base focus style property.
 84 |       const baseFocusStyleProperty = styleObjectExpression.properties.filter(
 85 |         (p) => p.key.name === focusPropName
 86 |       )[0];
 87 | 
 88 |       // Empty style properties. We'll start filling it from scratch
 89 |       // To convert {backgroundColor:"white", variants: {a : {b : {}}}} => { baseStyle: {}, a_b: {} }
 90 |       styleObjectExpression.properties = [];
 91 | 
 92 |       // Flattens base hover styles
 93 |       // Converts {_hovered: {}} => {baseStyle_hovered: {}}
 94 |       if (baseHoverStyleProperty) {
 95 |         hasBaseHoverStyles = true;
 96 |         styleObjectExpression.properties.push(
 97 |           t.objectProperty(
 98 |             t.identifier(`baseStyle${hoverPropName}`),
 99 |             baseHoverStyleProperty.value
100 |           )
101 |         );
102 |       }
103 | 
104 |       // Flattens base pressed styles
105 |       // Converts {_pressed: {}} => {baseStyle_pressed: {}}
106 |       if (basePressedStyleProperty) {
107 |         hasBasePressedStyles = true;
108 |         styleObjectExpression.properties.push(
109 |           t.objectProperty(
110 |             t.identifier(`baseStyle${pressPropName}`),
111 |             basePressedStyleProperty.value
112 |           )
113 |         );
114 |       }
115 | 
116 |       // Flattens base pressed styles
117 |       // Converts {_focused: {}} => {baseStyle_focused: {}}
118 |       if (baseFocusStyleProperty) {
119 |         hasBaseFocusStyles = true;
120 |         styleObjectExpression.properties.push(
121 |           t.objectProperty(
122 |             t.identifier(`baseStyle${focusPropName}`),
123 |             baseFocusStyleProperty.value
124 |           )
125 |         );
126 |       }
127 | 
128 |       // Converts {backgroundColor: "white"} => {baseStyle: {backgroundColor: "white"}}
129 |       styleObjectExpression.properties.push(
130 |         t.objectProperty(
131 |           t.identifier('baseStyle'),
132 |           t.objectExpression(baseStyleProperties)
133 |         )
134 |       );
135 | 
136 |       // **Below code flattens variant styles**
137 |       // {
138 |       //   variants: {
139 |       //     color: {
140 |       //       gray: {},
141 |       //     },
142 |       //   },
143 |       // }
144 |       // **to**
145 |       // {
146 |       //   color_gray: {}
147 |       // }
148 |       if (variants) {
149 |         hasVariants = true;
150 |         // Variants  {checked: {true: {backgroundColor:"x", _hovered: {backgroundColor: "y"}}}}
151 |         [...variants.value.properties].forEach((variantProp, index) => {
152 |           const variantName = variantProp.key.name;
153 |           variantsIdentifier.push(variantName);
154 |           variantProp.value.properties.forEach((nestedVariant) => {
155 |             const variantValueName = t.isLiteral(nestedVariant.key)
156 |               ? nestedVariant.key.value
157 |               : nestedVariant.key.name;
158 | 
159 |             const variantHoverObjectProperty =
160 |               nestedVariant.value.properties.filter((p) => {
161 |                 return p.key.name === hoverPropName;
162 |               })[0];
163 | 
164 |             const variantPressedObjectProperty =
165 |               nestedVariant.value.properties.filter((p) => {
166 |                 return p.key.name === pressPropName;
167 |               })[0];
168 | 
169 |             const variantFocusObjectProperty =
170 |               nestedVariant.value.properties.filter((p) => {
171 |                 return p.key.name === focusPropName;
172 |               })[0];
173 | 
174 |             // Remove _hovered from nested variant props i.i
175 |             nestedVariant.value.properties = nestedVariant.value.properties
176 |               .filter((p) => p.key.name !== hoverPropName)
177 |               .filter((p) => p.key.name !== focusPropName)
178 |               .filter((p) => p.key.name !== pressPropName);
179 | 
180 |             if (variantHoverObjectProperty) {
181 |               hasVariantsHoverStyles = true;
182 |               const variantHoverId = t.identifier(
183 |                 variantName + '_' + variantValueName + hoverPropName
184 |               );
185 |               styleObjectExpression.properties.push(
186 |                 t.objectProperty(
187 |                   variantHoverId,
188 |                   variantHoverObjectProperty.value
189 |                 )
190 |               );
191 |             }
192 | 
193 |             if (variantFocusObjectProperty) {
194 |               hasVariantsFocusStyles = true;
195 |               const variantFocusId = t.identifier(
196 |                 variantName + '_' + variantValueName + focusPropName
197 |               );
198 |               styleObjectExpression.properties.push(
199 |                 t.objectProperty(
200 |                   variantFocusId,
201 |                   variantFocusObjectProperty.value
202 |                 )
203 |               );
204 |             }
205 | 
206 |             if (variantPressedObjectProperty) {
207 |               hasVariantsPressedStyles = true;
208 |               const variantPressedId = t.identifier(
209 |                 variantName + '_' + variantValueName + pressPropName
210 |               );
211 |               styleObjectExpression.properties.push(
212 |                 t.objectProperty(
213 |                   variantPressedId,
214 |                   variantPressedObjectProperty.value
215 |                 )
216 |               );
217 |             }
218 | 
219 |             // After removing _hovered, _pressed append rest flattened styles in styleObjectExpression
220 |             const newId = t.identifier(variantName + '_' + variantValueName);
221 |             styleObjectExpression.properties.push(
222 |               t.objectProperty(newId, nestedVariant.value)
223 |             );
224 |           });
225 |         });
226 |       }
227 | 
228 |       // Converts {sm: 20, base: 10} => getClosestBreakpointValue({sm: 20, base: 10}, currentBreakpoint);
229 |       const breakpointReplacePath = [];
230 |       // Traverse object expression whose properties has '@' breakpoint property in it.
231 |       path.traverse({
232 |         ObjectExpression: {
233 |           enter(path) {
234 |             if (
235 |               path.node.properties.some((p) => {
236 |                 return p.key && p.key.value && p.key.value.includes('@');
237 |               })
238 |             ) {
239 |               path.node.properties.forEach(
240 |                 (p) => (p.key = t.stringLiteral(p.key.value.replace('@', '')))
241 |               );
242 | 
243 |               hasResponsiveStyles = true;
244 | 
245 |               breakpointReplacePath.push({
246 |                 path,
247 |                 value: t.callExpression(
248 |                   t.identifier('getClosestResponsiveValue'),
249 |                   [path.node, t.identifier('currentBreakpoint')]
250 |                 ),
251 |               });
252 |             }
253 |           },
254 |         },
255 |       });
256 | 
257 |       // Do replacement outside or else it can cause max callstack. ToDo - find alternate approach
258 |       breakpointReplacePath.forEach((v) => {
259 |         v.path.replaceWith(v.value);
260 |       });
261 | 
262 |       // Converts $color.yellow => theme.color.yellow
263 |       path.traverse({
264 |         StringLiteral: {
265 |           enter(path) {
266 |             // convert $colors.blue.500 => theme["blue"]["500"]
267 |             if (path.node.value.includes('$')) {
268 |               hasThemeStyles = true;
269 | 
270 |               const tokens = path.node.value.replace('$', 'theme.').split('.');
271 |               const token = tokens.shift();
272 |               const property = tokens.shift();
273 |               let tokenMemberExpression = t.memberExpression(
274 |                 t.identifier(token),
275 |                 t.stringLiteral(property),
276 |                 true
277 |               );
278 |               while (tokens.length) {
279 |                 const property = tokens.shift();
280 |                 tokenMemberExpression = t.memberExpression(
281 |                   tokenMemberExpression,
282 |                   t.stringLiteral(property),
283 |                   true
284 |                 );
285 |               }
286 | 
287 |               path.replaceWith(tokenMemberExpression);
288 |             }
289 |           },
290 |         },
291 |       });
292 | 
293 |       const hasHoverStyles = hasBaseHoverStyles || hasVariantsHoverStyles;
294 |       const hasPressedStyles = hasBasePressedStyles || hasVariantsPressedStyles;
295 |       const hasFocusStyles = hasBaseFocusStyles || hasVariantsFocusStyles;
296 | 
297 |       // Component template
298 |       const componentTemplate = template(
299 |         `
300 |           ${reactNameSpace}.forwardRef((props, ref) => {
301 | 
302 |             COMPONENT_PROPS
303 |             
304 |             BREAKPOINT_HOOK
305 | 
306 |             THEME_HOOK
307 | 
308 |             HOVER_HOOK
309 | 
310 |             PRESSED_HOOK
311 | 
312 |             FOCUS_HOOK
313 |             
314 |             
315 |            const styleSheet = ${packageNameSpace}.useStyleSheet("KEY", ({theme, currentBreakpoint, getClosestResponsiveValue}) => STYLE_OBJECT, USE_STYLE_SHEET_DEPS);
316 |            
317 |           
318 |             const style = ${reactNameSpace}.useMemo(() => {
319 |               const newStyle = STYLES.filter(Boolean);
320 | 
321 |               return newStyle;
322 |             }, STYLE_MEMO_DEPS);
323 | 
324 |             return <COMP ${
325 |               hasHoverStyles
326 |                 ? 'onHoverIn={onHoverIn} onHoverOut={onHoverOut}'
327 |                 : 'onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp}'
328 |             }
329 | 
330 |             ${
331 |               hasPressedStyles
332 |                 ? 'onPressIn={onPressIn} onPressOut={onPressOut}'
333 |                 : 'onPressIn={onPressInProp} onPressOut={onPressOutProp}'
334 |             }
335 | 
336 |             ${
337 |               hasFocusStyles
338 |                 ? 'onFocus={onFocus} onBlur={onBlur}'
339 |                 : 'onFocus={onFocusProp} onBlur={onBlurProp}'
340 |             }
341 | 
342 |             ref={ref} style={style} {...rest} />;
343 |           })
344 |         `,
345 |         {
346 |           plugins: ['jsx', 'typescript'],
347 |         }
348 |       );
349 | 
350 |       const KEY = getComponentId(state);
351 |       const variantStyles = variantsIdentifier
352 |         .map(
353 |           (v) => `
354 |             styleSheet[\`${v}_\${${v}}\`]
355 |         `
356 |         )
357 |         .join(',');
358 | 
359 |       const variantHoverStyles = variantsIdentifier
360 |         .map(
361 |           (v) =>
362 |             `isHovered ? styleSheet[\`${v}_\${${v}}${hoverPropName}\`] : undefined`
363 |         )
364 |         .join(',');
365 | 
366 |       const variantPressedStyles = variantsIdentifier
367 |         .map(
368 |           (v) =>
369 |             `isPressed ? styleSheet[\`${v}_\${${v}}${pressPropName}\`] : undefined`
370 |         )
371 |         .join(',');
372 | 
373 |       const variantFocusStyles = variantsIdentifier
374 |         .map(
375 |           (v) =>
376 |             `isFocused ? styleSheet[\`${v}_\${${v}}${focusPropName}\`] : undefined`
377 |         )
378 |         .join(',');
379 | 
380 |       const variantStyleMemoDeps = variantsIdentifier.join(', ');
381 | 
382 |       let variantProps = '';
383 |       if (hasVariants) {
384 |         if (defaultVariants && t.isObjectExpression(defaultVariants.value)) {
385 |           variantProps =
386 |             variantsIdentifier
387 |               .map((v) => {
388 |                 let property = defaultVariants.value.properties.find(
389 |                   (p) => p.key.name === v
390 |                 );
391 |                 if (property) {
392 |                   let value = property.value.value;
393 |                   value = typeof value === 'string' ? `"${value}"` : value;
394 |                   return `${v}=${value}`;
395 |                 } else {
396 |                   return v;
397 |                 }
398 |               })
399 |               .join(', ') + ',';
400 |         } else {
401 |           variantProps = variantsIdentifier.join(', ') + ',';
402 |         }
403 |       }
404 | 
405 |       const substitutions = {
406 |         KEY,
407 |         HOVER_HOOK: '',
408 |         BREAKPOINT_HOOK: '',
409 |         USE_STYLE_SHEET_DEPS: '',
410 |         PRESSED_HOOK: '',
411 |         FOCUS_HOOK: '',
412 |         STYLES: '',
413 |         THEME_HOOK: '',
414 |         STYLE_MEMO_DEPS: '',
415 |         COMP: t.jSXIdentifier(componentIdentifier.name),
416 |         COMPONENT_PROPS: `const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp, ${variantProps} ...rest} = props;`,
417 | 
418 |         STYLE_OBJECT: styleObjectExpression,
419 |       };
420 | 
421 |       // Style Priority is concated in below order
422 |       // baseStyle < variantStyle < baseFocusStyle < variantFocusStyle < baseHoverStyle < variantHoverStyle < basePressedStyle < variantPressedStyle
423 | 
424 |       substitutions.USE_STYLE_SHEET_DEPS = '[';
425 |       substitutions.STYLES = '[styleSheet.baseStyle';
426 |       substitutions.STYLE_MEMO_DEPS = '[styleSheet';
427 | 
428 |       if (hasThemeStyles) {
429 |         substitutions.THEME_HOOK = packageNameSpace + '.useTheme()';
430 |         substitutions.USE_STYLE_SHEET_DEPS =
431 |           substitutions.USE_STYLE_SHEET_DEPS + '"theme"';
432 |       }
433 | 
434 |       if (hasResponsiveStyles) {
435 |         substitutions.BREAKPOINT_HOOK =
436 |           packageNameSpace + '.useCurrentBreakpoint()';
437 |         substitutions.USE_STYLE_SHEET_DEPS =
438 |           substitutions.USE_STYLE_SHEET_DEPS + ', "currentBreakpoint"';
439 |       }
440 | 
441 |       if (hasHoverStyles) {
442 |         substitutions.HOVER_HOOK = `const {onHoverIn, onHoverOut, isHovered} = ${packageNameSpace}.useHover({onHoverIn: onHoverInProp, onHoverOut: onHoverOutProp})`;
443 |         substitutions.STYLE_MEMO_DEPS =
444 |           substitutions.STYLE_MEMO_DEPS + `, isHovered`;
445 |       }
446 | 
447 |       if (hasPressedStyles) {
448 |         substitutions.PRESSED_HOOK = `const {onPressIn, onPressOut, isPressed} = ${packageNameSpace}.usePress({onPressIn: onPressInProp, onPressOut: onPressOutProp})`;
449 |         substitutions.STYLE_MEMO_DEPS =
450 |           substitutions.STYLE_MEMO_DEPS + `, isPressed`;
451 |       }
452 | 
453 |       if (hasFocusStyles) {
454 |         substitutions.FOCUS_HOOK = `const {onFocus, onBlur, isFocused} = ${packageNameSpace}.useFocus({onFocus: onFocusProp, onBlur: onBlurProp})`;
455 |         substitutions.STYLE_MEMO_DEPS =
456 |           substitutions.STYLE_MEMO_DEPS + `, isFocused`;
457 |       }
458 | 
459 |       if (hasVariants) {
460 |         substitutions.STYLES = substitutions.STYLES + `, ${variantStyles}`;
461 |         substitutions.STYLE_MEMO_DEPS =
462 |           substitutions.STYLE_MEMO_DEPS + `, ${variantStyleMemoDeps}`;
463 |       }
464 | 
465 |       if (hasBaseFocusStyles) {
466 |         substitutions.STYLES =
467 |           substitutions.STYLES +
468 |           `, isFocused ? styleSheet.baseStyle${focusPropName} : undefined`;
469 |       }
470 | 
471 |       if (hasVariantsFocusStyles) {
472 |         substitutions.STYLES = substitutions.STYLES + `, ${variantFocusStyles}`;
473 |       }
474 | 
475 |       if (hasBaseHoverStyles) {
476 |         substitutions.STYLES =
477 |           substitutions.STYLES +
478 |           `, isHovered ? styleSheet.baseStyle${hoverPropName} : undefined`;
479 |       }
480 | 
481 |       if (hasVariantsHoverStyles) {
482 |         substitutions.STYLES = substitutions.STYLES + `, ${variantHoverStyles}`;
483 |       }
484 | 
485 |       if (hasBasePressedStyles) {
486 |         substitutions.STYLES =
487 |           substitutions.STYLES +
488 |           `, isPressed ? styleSheet.baseStyle${pressPropName} : undefined`;
489 |       }
490 | 
491 |       if (hasVariantsPressedStyles) {
492 |         substitutions.STYLES =
493 |           substitutions.STYLES + `, ${variantPressedStyles}`;
494 |       }
495 | 
496 |       substitutions.USE_STYLE_SHEET_DEPS =
497 |         substitutions.USE_STYLE_SHEET_DEPS + ']';
498 | 
499 |       substitutions.STYLES = substitutions.STYLES + ', propStyle]';
500 | 
501 |       substitutions.STYLE_MEMO_DEPS =
502 |         substitutions.STYLE_MEMO_DEPS + ', propStyle]';
503 | 
504 |       const ast = componentTemplate(substitutions);
505 | 
506 |       path.replaceWith(ast);
507 |     }
508 |   },
509 | };
510 | 
511 | module.exports = visitor;
512 | 


--------------------------------------------------------------------------------
/babel-plugin/__test__/__snapshots__/index.test.jsx.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`test createVariant transform plugin generates styled component 1`] = `
  4 | "import * as _rnStyledVariants__react from \\"react\\";
  5 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
  6 | 
  7 | const StyledText = _rnStyledVariants__react.forwardRef((props, ref) => {
  8 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp, color, checked, size, ...rest} = props;;
  9 |   _rnStyledVariants_.useCurrentBreakpoint();
 10 |   _rnStyledVariants_.useTheme();
 11 | 
 12 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
 13 |     theme,
 14 |     currentBreakpoint,
 15 |     getClosestResponsiveValue
 16 |   }) => ({
 17 |     baseStyle: {
 18 |       padding: getClosestResponsiveValue({
 19 |         \\"base\\": 30,
 20 |         \\"md\\": 90,
 21 |         \\"xl\\": 5
 22 |       }, currentBreakpoint),
 23 |       backgroundColor: theme[\\"colors\\"][\\"indigo\\"][\\"500\\"]
 24 |     },
 25 |     color_blue: {
 26 |       color: \\"white\\"
 27 |     },
 28 |     color_indigo: {
 29 |       color: \\"black\\"
 30 |     },
 31 |     checked_true: {
 32 |       color: \\"white\\"
 33 |     },
 34 |     size_md: {
 35 |       padding: 10
 36 |     }
 37 |   }), [\\"theme\\", \\"currentBreakpoint\\"]);
 38 | 
 39 |   const style = _rnStyledVariants__react.useMemo(() => {
 40 |     const newStyle = [styleSheet.baseStyle, 
 41 |             styleSheet[\`color_\${color}\`]
 42 |         ,
 43 |             styleSheet[\`checked_\${checked}\`]
 44 |         ,
 45 |             styleSheet[\`size_\${size}\`]
 46 |         , propStyle].filter(Boolean);
 47 |     return newStyle;
 48 |   }, [styleSheet, color, checked, size, propStyle]);
 49 | 
 50 |   return <Text onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressInProp} onPressOut={onPressOutProp} onFocus={onFocusProp} onBlur={onBlurProp} ref={ref} style={style} {...rest} />;
 51 | });"
 52 | `;
 53 | 
 54 | exports[`test createVariant transform plugin generates styled component for baseStyle 1`] = `
 55 | "import * as _rnStyledVariants__react from \\"react\\";
 56 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
 57 | 
 58 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
 59 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp,  ...rest} = props;;
 60 |   _rnStyledVariants_.useTheme();
 61 | 
 62 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
 63 |     theme,
 64 |     currentBreakpoint,
 65 |     getClosestResponsiveValue
 66 |   }) => ({
 67 |     baseStyle: {
 68 |       padding: theme[\\"space\\"][\\"3\\"],
 69 |       backgroundColor: theme[\\"colors\\"][\\"blue\\"][\\"800\\"]
 70 |     }
 71 |   }), [\\"theme\\"]);
 72 | 
 73 |   const style = _rnStyledVariants__react.useMemo(() => {
 74 |     const newStyle = [styleSheet.baseStyle, propStyle].filter(Boolean);
 75 |     return newStyle;
 76 |   }, [styleSheet, propStyle]);
 77 | 
 78 |   return <Pressable onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressInProp} onPressOut={onPressOutProp} onFocus={onFocusProp} onBlur={onBlurProp} ref={ref} style={style} {...rest} />;
 79 | });"
 80 | `;
 81 | 
 82 | exports[`test createVariant transform plugin verifies base focus styles 1`] = `
 83 | "import * as _rnStyledVariants__react from \\"react\\";
 84 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
 85 | 
 86 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
 87 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp,  ...rest} = props;;
 88 |   _rnStyledVariants_.useTheme();
 89 |   const {onFocus, onBlur, isFocused} = _rnStyledVariants_.useFocus({onFocus: onFocusProp, onBlur: onBlurProp});
 90 | 
 91 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
 92 |     theme,
 93 |     currentBreakpoint,
 94 |     getClosestResponsiveValue
 95 |   }) => ({
 96 |     baseStyle_focused: {
 97 |       backgroundColor: theme[\\"colors\\"][\\"pressed\\"]
 98 |     },
 99 |     baseStyle: {
100 |       padding: theme[\\"space\\"][\\"3\\"],
101 |       backgroundColor: theme[\\"colors\\"][\\"primary\\"]
102 |     }
103 |   }), [\\"theme\\"]);
104 | 
105 |   const style = _rnStyledVariants__react.useMemo(() => {
106 |     const newStyle = [styleSheet.baseStyle, isFocused ? styleSheet.baseStyle_focused : undefined, propStyle].filter(Boolean);
107 |     return newStyle;
108 |   }, [styleSheet, isFocused, propStyle]);
109 | 
110 |   return <Pressable onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressInProp} onPressOut={onPressOutProp} onFocus={onFocus} onBlur={onBlur} ref={ref} style={style} {...rest} />;
111 | });"
112 | `;
113 | 
114 | exports[`test createVariant transform plugin verifies base focus styles 2`] = `
115 | "import * as _rnStyledVariants__react from \\"react\\";
116 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
117 | 
118 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
119 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp, checked, ...rest} = props;;
120 |   _rnStyledVariants_.useTheme();
121 |   const {onFocus, onBlur, isFocused} = _rnStyledVariants_.useFocus({onFocus: onFocusProp, onBlur: onBlurProp});
122 | 
123 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
124 |     theme,
125 |     currentBreakpoint,
126 |     getClosestResponsiveValue
127 |   }) => ({
128 |     baseStyle_focused: {
129 |       backgroundColor: theme[\\"colors\\"][\\"pressed\\"]
130 |     },
131 |     baseStyle: {
132 |       padding: theme[\\"space\\"][\\"3\\"],
133 |       backgroundColor: theme[\\"colors\\"][\\"primary\\"]
134 |     },
135 |     checked_true_focused: {
136 |       backgroundColor: theme[\\"colors\\"][\\"pressed_checked\\"]
137 |     },
138 |     checked_true: {}
139 |   }), [\\"theme\\"]);
140 | 
141 |   const style = _rnStyledVariants__react.useMemo(() => {
142 |     const newStyle = [styleSheet.baseStyle, 
143 |             styleSheet[\`checked_\${checked}\`]
144 |         , isFocused ? styleSheet.baseStyle_focused : undefined, isFocused ? styleSheet[\`checked_\${checked}_focused\`] : undefined, propStyle].filter(Boolean);
145 |     return newStyle;
146 |   }, [styleSheet, isFocused, checked, propStyle]);
147 | 
148 |   return <Pressable onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressInProp} onPressOut={onPressOutProp} onFocus={onFocus} onBlur={onBlur} ref={ref} style={style} {...rest} />;
149 | });"
150 | `;
151 | 
152 | exports[`test createVariant transform plugin verifies base hover styles 1`] = `
153 | "import * as _rnStyledVariants__react from \\"react\\";
154 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
155 | 
156 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
157 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp, color, ...rest} = props;;
158 |   _rnStyledVariants_.useTheme();
159 |   const {onHoverIn, onHoverOut, isHovered} = _rnStyledVariants_.useHover({onHoverIn: onHoverInProp, onHoverOut: onHoverOutProp});
160 | 
161 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
162 |     theme,
163 |     currentBreakpoint,
164 |     getClosestResponsiveValue
165 |   }) => ({
166 |     baseStyle_hovered: {
167 |       backgroundColor: theme[\\"colors\\"][\\"hover\\"]
168 |     },
169 |     baseStyle: {
170 |       padding: theme[\\"space\\"][\\"3\\"],
171 |       backgroundColor: theme[\\"colors\\"][\\"blue\\"][\\"800\\"]
172 |     },
173 |     color_gray: {
174 |       backgroundColor: theme[\\"colors\\"][\\"gray\\"]
175 |     }
176 |   }), [\\"theme\\"]);
177 | 
178 |   const style = _rnStyledVariants__react.useMemo(() => {
179 |     const newStyle = [styleSheet.baseStyle, 
180 |             styleSheet[\`color_\${color}\`]
181 |         , isHovered ? styleSheet.baseStyle_hovered : undefined, propStyle].filter(Boolean);
182 |     return newStyle;
183 |   }, [styleSheet, isHovered, color, propStyle]);
184 | 
185 |   return <Pressable onHoverIn={onHoverIn} onHoverOut={onHoverOut} onPressIn={onPressInProp} onPressOut={onPressOutProp} onFocus={onFocusProp} onBlur={onBlurProp} ref={ref} style={style} {...rest} />;
186 | });"
187 | `;
188 | 
189 | exports[`test createVariant transform plugin verifies base pressed styles 1`] = `
190 | "import * as _rnStyledVariants__react from \\"react\\";
191 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
192 | 
193 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
194 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp,  ...rest} = props;;
195 |   _rnStyledVariants_.useTheme();
196 |   const {onPressIn, onPressOut, isPressed} = _rnStyledVariants_.usePress({onPressIn: onPressInProp, onPressOut: onPressOutProp});
197 | 
198 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
199 |     theme,
200 |     currentBreakpoint,
201 |     getClosestResponsiveValue
202 |   }) => ({
203 |     baseStyle_pressed: {
204 |       backgroundColor: theme[\\"colors\\"][\\"pressed\\"]
205 |     },
206 |     baseStyle: {
207 |       padding: theme[\\"space\\"][\\"3\\"],
208 |       backgroundColor: theme[\\"colors\\"][\\"primary\\"]
209 |     }
210 |   }), [\\"theme\\"]);
211 | 
212 |   const style = _rnStyledVariants__react.useMemo(() => {
213 |     const newStyle = [styleSheet.baseStyle, isPressed ? styleSheet.baseStyle_pressed : undefined, propStyle].filter(Boolean);
214 |     return newStyle;
215 |   }, [styleSheet, isPressed, propStyle]);
216 | 
217 |   return <Pressable onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressIn} onPressOut={onPressOut} onFocus={onFocusProp} onBlur={onBlurProp} ref={ref} style={style} {...rest} />;
218 | });"
219 | `;
220 | 
221 | exports[`test createVariant transform plugin verifies base/variants pressed styles 1`] = `
222 | "import * as _rnStyledVariants__react from \\"react\\";
223 | import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
224 | 
225 | const StyledPressable = _rnStyledVariants__react.forwardRef((props, ref) => {
226 |   const {style: propStyle, onPressIn: onPressInProp, onPressOut: onPressOutProp, onHoverIn: onHoverInProp , onHoverOut: onHoverOutProp, onFocus: onFocusProp, onBlur: onBlurProp, checked, ...rest} = props;;
227 |   _rnStyledVariants_.useTheme();
228 |   const {onPressIn, onPressOut, isPressed} = _rnStyledVariants_.usePress({onPressIn: onPressInProp, onPressOut: onPressOutProp});
229 | 
230 |   const styleSheet = _rnStyledVariants_.useStyleSheet(\\"test\\", ({
231 |     theme,
232 |     currentBreakpoint,
233 |     getClosestResponsiveValue
234 |   }) => ({
235 |     baseStyle_pressed: {
236 |       backgroundColor: theme[\\"colors\\"][\\"pressed\\"]
237 |     },
238 |     baseStyle: {
239 |       padding: theme[\\"space\\"][\\"3\\"],
240 |       backgroundColor: theme[\\"colors\\"][\\"primary\\"]
241 |     },
242 |     checked_true_pressed: {
243 |       backgroundColor: theme[\\"colors\\"][\\"pressed_checked\\"]
244 |     },
245 |     checked_true: {}
246 |   }), [\\"theme\\"]);
247 | 
248 |   const style = _rnStyledVariants__react.useMemo(() => {
249 |     const newStyle = [styleSheet.baseStyle, 
250 |             styleSheet[\`checked_\${checked}\`]
251 |         , isPressed ? styleSheet.baseStyle_pressed : undefined, isPressed ? styleSheet[\`checked_\${checked}_pressed\`] : undefined, propStyle].filter(Boolean);
252 |     return newStyle;
253 |   }, [styleSheet, isPressed, checked, propStyle]);
254 | 
255 |   return <Pressable onHoverIn={onHoverInProp} onHoverOut={onHoverOutProp} onPressIn={onPressIn} onPressOut={onPressOut} onFocus={onFocusProp} onBlur={onBlurProp} ref={ref} style={style} {...rest} />;
256 | });"
257 | `;
258 | 
259 | exports[`test sx transform plugin adds conditional sx property in style 1`] = `
260 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
261 | 
262 | const App = () => {
263 |   const _theme = _rnStyledVariants_.useTheme().theme;
264 | 
265 |   const pressed = false;
266 |   return <View style={[pressed ? {
267 |     backgroundColor: _theme[\\"colors\\"][\\"blue\\"]
268 |   } : {}, {
269 |     margin: 10
270 |   }]} />;
271 | };"
272 | `;
273 | 
274 | exports[`test sx transform plugin arrow function short hand component definition 1`] = `
275 | "import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
276 | import * as _rnStyledVariants__react from \\"react\\";
277 | 
278 | const App = () => {
279 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
280 |     1: {
281 |       color: \\"pink\\"
282 |     },
283 |     2: {
284 |       margin: 10
285 |     }
286 |   }), []);
287 | 
288 |   return <View style={_styleSheet[\\"1\\"]} contentContainerStyle={_styleSheet[\\"2\\"]} />;
289 | };"
290 | `;
291 | 
292 | exports[`test sx transform plugin creates memoized stylesheet and updates existing style array property 1`] = `
293 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
294 | import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
295 | import * as _rnStyledVariants__react from \\"react\\";
296 | 
297 | const App = () => {
298 |   const _currentBreakpoint = _rnStyledVariants_.useCurrentBreakpoint();
299 | 
300 |   const _theme = _rnStyledVariants_.useTheme().theme;
301 | 
302 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
303 |     1: {
304 |       margin: _theme[\\"colors\\"][\\"blue\\"],
305 |       padding: _currentBreakpoint.resolveResponsiveValue({
306 |         \\"sm\\": 20,
307 |         \\"base\\": 10
308 |       })
309 |     }
310 |   }), [_theme, _currentBreakpoint.resolveResponsiveValue]);
311 | 
312 |   return <View style={[_styleSheet[\\"1\\"], {
313 |     margin: 10
314 |   }]} />;
315 | };"
316 | `;
317 | 
318 | exports[`test sx transform plugin creates memoized stylesheet and updates existing style property 1`] = `
319 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
320 | import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
321 | import * as _rnStyledVariants__react from \\"react\\";
322 | 
323 | const App = () => {
324 |   const _currentBreakpoint = _rnStyledVariants_.useCurrentBreakpoint();
325 | 
326 |   const _theme = _rnStyledVariants_.useTheme().theme;
327 | 
328 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
329 |     1: {
330 |       margin: _theme[\\"colors\\"][\\"blue\\"],
331 |       padding: _currentBreakpoint.resolveResponsiveValue({
332 |         \\"sm\\": 20,
333 |         \\"base\\": 10
334 |       })
335 |     }
336 |   }), [_theme, _currentBreakpoint.resolveResponsiveValue]);
337 | 
338 |   return <View style={[_styleSheet[\\"1\\"], {
339 |     margin: 10
340 |   }]} />;
341 | };"
342 | `;
343 | 
344 | exports[`test sx transform plugin creates memoized stylesheet with responsive breakpoint dependency 1`] = `
345 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
346 | import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
347 | import * as _rnStyledVariants__react from \\"react\\";
348 | 
349 | const App = () => {
350 |   const _currentBreakpoint = _rnStyledVariants_.useCurrentBreakpoint();
351 | 
352 |   const _theme = _rnStyledVariants_.useTheme().theme;
353 | 
354 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
355 |     1: {
356 |       margin: _theme[\\"colors\\"][\\"blue\\"],
357 |       padding: _currentBreakpoint.resolveResponsiveValue({
358 |         \\"sm\\": 20,
359 |         \\"base\\": 10
360 |       })
361 |     }
362 |   }), [_theme, _currentBreakpoint.resolveResponsiveValue]);
363 | 
364 |   return <View style={_styleSheet[\\"1\\"]} />;
365 | };"
366 | `;
367 | 
368 | exports[`test sx transform plugin creates memoized stylesheet with theme dependency 1`] = `
369 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
370 | import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
371 | import * as _rnStyledVariants__react from \\"react\\";
372 | 
373 | const App = () => {
374 |   const _theme = _rnStyledVariants_.useTheme().theme;
375 | 
376 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
377 |     1: {
378 |       margin: _theme[\\"colors\\"][\\"blue\\"],
379 |       padding: 20
380 |     }
381 |   }), [_theme]);
382 | 
383 |   return <View style={_styleSheet[\\"1\\"]} />;
384 | };"
385 | `;
386 | 
387 | exports[`test sx transform plugin creates memoized stylesheet without dependency array 1`] = `
388 | "import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
389 | import * as _rnStyledVariants__react from \\"react\\";
390 | 
391 | const App = () => {
392 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
393 |     1: {
394 |       margin: 10,
395 |       padding: 20
396 |     }
397 |   }), []);
398 | 
399 |   return <View style={_styleSheet[\\"1\\"]} />;
400 | };"
401 | `;
402 | 
403 | exports[`test sx transform plugin verifies contentContainerSX prop gets appended to contentContainerStyle prop 1`] = `
404 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
405 | import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
406 | import * as _rnStyledVariants__react from \\"react\\";
407 | 
408 | const App = () => {
409 |   const _theme = _rnStyledVariants_.useTheme().theme;
410 | 
411 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
412 |     1: {
413 |       backgroundColor: _theme[\\"colors\\"][\\"blue\\"]
414 |     }
415 |   }), [_theme]);
416 | 
417 |   const pressed = false;
418 |   return <ScrollView style={[{
419 |     margin: 10
420 |   }]} contentContainerStyle={_styleSheet[\\"1\\"]} />;
421 | };"
422 | `;
423 | 
424 | exports[`test sx transform plugin verifies sx and contentContainerStyle resolves to respective style props 1`] = `
425 | "import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
426 | import * as _rnStyledVariants__react from \\"react\\";
427 | 
428 | const App = () => {
429 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
430 |     1: {
431 |       color: \\"pink\\"
432 |     },
433 |     2: {
434 |       margin: 10
435 |     }
436 |   }), []);
437 | 
438 |   return <View style={_styleSheet[\\"1\\"]} contentContainerStyle={_styleSheet[\\"2\\"]} />;
439 | };"
440 | `;
441 | 
442 | exports[`test sx transform plugin verifies sx is added inline when it contains variable - conditional 1`] = `
443 | "const App = () => {
444 |   const a = 10;
445 |   return <View style={[a ? {
446 |     color: \\"black\\"
447 |   } : {}, {
448 |     margin: 10
449 |   }]} />;
450 | };"
451 | `;
452 | 
453 | exports[`test sx transform plugin verifies sx is added inline when it contains variable 1`] = `
454 | "const App = () => {
455 |   const a = 10;
456 |   return <View style={[{
457 |     padding: a
458 |   }, {
459 |     margin: 10
460 |   }]} />;
461 | };"
462 | `;
463 | 
464 | exports[`test sx transform plugin verifies sx is added inline when it contains variable in responsive value 1`] = `
465 | "import * as _rnStyledVariants_ from \\"react-native-styled-variants\\";
466 | 
467 | const App = () => {
468 |   const _currentBreakpoint = _rnStyledVariants_.useCurrentBreakpoint();
469 | 
470 |   const a = 'black';
471 |   return <View style={{
472 |     color: _currentBreakpoint.resolveResponsiveValue({
473 |       \\"sm\\": a
474 |     })
475 |   }} />;
476 | };"
477 | `;
478 | 
479 | exports[`test sx transform plugin verify shadow object is added to stylesheet 1`] = `
480 | "import { StyleSheet as _rnStyledVariants__styleSheet } from \\"react-native\\";
481 | import * as _rnStyledVariants__react from \\"react\\";
482 | 
483 | const App = () => {
484 |   const _styleSheet = _rnStyledVariants__react.useMemo(() => _rnStyledVariants__styleSheet.create({
485 |     1: {
486 |       shadowColor: \\"#000\\",
487 |       shadowOffset: {
488 |         width: 0,
489 |         height: 2
490 |       },
491 |       shadowOpacity: 0.22,
492 |       shadowRadius: 2.22,
493 |       elevation: 2
494 |     }
495 |   }), []);
496 | 
497 |   return <View style={_styleSheet[\\"1\\"]} />;
498 | };"
499 | `;
500 | 


--------------------------------------------------------------------------------