Fix/css type

example/App.tsx

@@ -1,9 +1,8 @@
 import 'react-native-gesture-handler';
-
 import { ColorModeProvider } from './src/components';
 import Example from './src/Example';
 
-export default function App() {
+export function App() {
   return (
     <ColorModeProvider>
       <Example />

example/babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

example/entry.js

@@ -0,0 +1,14 @@
+import 'expo/build/Expo.fx';
+import { AppRegistry, Platform } from 'react-native';
+import withExpoRoot from 'expo/build/launch/withExpoRoot';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+AppRegistry.registerComponent('main', () => withExpoRoot(App));
+if (Platform.OS === 'web') {
+  const rootTag = createRoot(
+    document.getElementById('root') ?? document.getElementById('main')
+  );
+  const RootComponent = withExpoRoot(App);
+  rootTag.render(<RootComponent />);
+}

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "entry.js",
   "scripts": {
     "start": "expo start",
     "start:clean": "expo start --clear",
@@ -11,21 +11,23 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "44.0.0",
-    "expo-device": "4.1.0",
-    "expo-status-bar": "1.2.0",
+    "expo": "^46.0.16",
+    "expo-device": "~4.3.0",
+    "expo-status-bar": "~1.4.0",
     "lodash.merge": "4.6.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "0.64.3",
-    "react-native-gesture-handler": "2.1.0",
-    "react-native-reanimated": "2.3.1",
-    "react-native-web": "0.17.1"
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-web": "~0.18.7",
+    "stitches-native": "link:../"
   },
   "devDependencies": {
     "@babel/core": "7.12.9",
-    "@types/react": "17.0.21",
-    "@types/react-native": "0.64.12",
+    "@expo/webpack-config": "^0.17.0",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.70.6",
     "typescript": "4.7.3"
   },
   "private": true

example/src/Example.tsx

@@ -1,44 +1,89 @@
 import { Switch } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-
-import { Stack, Text, useColorMode } from './components';
+import { useState } from 'react';
+import { Stack, Text, useColorMode, Media, Heading } from './components';
 import { styled } from './styles';
 
 export default function Example() {
   const { toggleColorMode, colorMode } = useColorMode();
+  const [example, changeExample] = useState(false);
 
   return (
     <Wrapper>
       <Content>
         <Stack axis="y" space="4">
-          <Text variant="title1">Example app</Text>
-
-          <Stack axis="y" space="2">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <Box key={i}>
-                <Stack axis="x" space="4">
-                  <Text variant="body" color="primaryText">
-                    Box {i + 1}
-                  </Text>
-                  <Text variant="body" color="primaryText">
-                    XXX
-                  </Text>
-                  <Text variant="body" color="primaryText">
-                    YYY
-                  </Text>
-                </Stack>
-              </Box>
-            ))}
+          <Stack axis="x" space="3" align="center">
+            <Text variant="title1">Example app</Text>
+            <Stack axis="y" space="2">
+              <Text variant="body">Switch Examples</Text>
+              <Switch value={example} onValueChange={changeExample} />
+            </Stack>
           </Stack>
+          {example && (
+            <Stack axis="y" space="2">
+              <Heading>Heading</Heading>
+              <Heading heading="h2">Heading</Heading>
+              <Heading heading="h3">Heading</Heading>
+              <Heading heading="h4">Heading</Heading>
+              <Heading heading="h5">Heading</Heading>
+              <Heading underlined heading="h1">
+                Heading
+              </Heading>
+              <Heading underlined heading="h2">
+                Heading
+              </Heading>
+              <Heading underlined heading="h3">
+                Heading
+              </Heading>
+              <Heading underlined heading="h4">
+                Heading
+              </Heading>
+              <Heading underlined heading="h5">
+                Heading
+              </Heading>
+            </Stack>
+          )}
+          {!example && (
+            <>
+              <Stack axis="y" space="2">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <Box key={i}>
+                    <Stack axis="x" space="4">
+                      <Text variant="body" color="primaryText">
+                        Box {i + 1}
+                      </Text>
+                      <Text variant="body" color="primaryText">
+                        XXX
+                      </Text>
+                      <Text variant="body" color="primaryText">
+                        YYY
+                      </Text>
+                    </Stack>
+                  </Box>
+                ))}
+              </Stack>
 
-          <Stack axis="x" space="3" align="center" justify="end">
-            <Text variant="body">Toggle color mode</Text>
+              <Media
+                color={{
+                  '@xxl': 'primary',
+                  '@xl': 'secondary',
+                  '@lg': 'third',
+                  '@md': 'forth',
+                  '@sm': 'fifth',
+                }}
+              >
+                Font size and color should change as viewport changes
+              </Media>
 
-            <Switch
-              value={colorMode === 'dark'}
-              onValueChange={toggleColorMode}
-            />
-          </Stack>
+              <Stack axis="x" space="3" align="center" justify="end">
+                <Text variant="body">Toggle color mode</Text>
+                <Switch
+                  value={colorMode === 'dark'}
+                  onValueChange={toggleColorMode}
+                />
+              </Stack>
+            </>
+          )}
         </Stack>
       </Content>
 

example/src/components/Heading.tsx

@@ -0,0 +1,89 @@
+import { TextProps as RNTextProps } from 'react-native';
+import { styled, css } from '../styles';
+
+export const Typography = styled('Text', {
+  color: '$plainText',
+  fontSizeRem: 1,
+});
+
+type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+
+export type HeadingProps = RNTextProps & {
+  heading?: HeadingSize;
+};
+
+const underLinedStyle = css({
+  compoundVariants: [
+    {
+      heading: 'h5',
+      underlined: true,
+      css: {
+        borderBottomColor: 'black',
+        borderBottomWidth: 1,
+      },
+    },
+    {
+      heading: 'h4',
+      underlined: true,
+      css: {
+        borderBottomColor: 'red',
+        borderBottomWidth: 1,
+      },
+    },
+    {
+      heading: 'h3',
+      underlined: true,
+      css: {
+        borderBottomColor: 'blue',
+        borderBottomWidth: 1,
+      },
+    },
+    {
+      heading: 'h2',
+      underlined: true,
+      css: {
+        borderBottomColor: 'green',
+        borderBottomWidth: 1,
+      },
+    },
+    {
+      heading: 'h1',
+      underlined: true,
+      css: {
+        borderBottomColor: 'purple',
+        borderBottomWidth: 1,
+      },
+    },
+  ],
+});
+
+export const Heading = styled(
+  'Text',
+  {
+    fontWeight: 'bold',
+    color: '$plainText',
+    width: 'fit-content',
+    variants: {
+      heading: {
+        h5: { fontSizeRem: 1.0, color: 'black' },
+        h4: { fontSizeRem: 1.1, color: 'red' },
+        h3: { fontSizeRem: 1.25, color: 'blue' },
+        h2: { fontSizeRem: 1.5, color: 'green' },
+        h1: { fontSizeRem: 2.5, color: 'purple' },
+      },
+      underlined: {
+        true: {
+          paddingRight: '4px',
+          paddingLeft: '4px',
+        },
+      },
+    },
+    defaultVariants: {
+      heading: 'h1',
+      underlined: true,
+    },
+  },
+  underLinedStyle
+).attrs(() => ({
+  accessibilityRole: 'text',
+}));

example/src/components/Media.tsx

@@ -0,0 +1,31 @@
+import { styled } from '../styles';
+
+export const Media = styled('Text', {
+  color: '$text',
+  '@xxl': {
+    fontSize: 64,
+  },
+  '@xl': {
+    fontSize: 48,
+  },
+  '@lg': {
+    fontSize: 32,
+  },
+  '@md': {
+    fontSize: 24,
+  },
+  '@sm': {
+    fontSize: 12,
+  },
+  marginTopRem: 1,
+  marginBottomRem: 1,
+  variants: {
+    color: {
+      primary: { color: 'red' },
+      secondary: { color: 'blue' },
+      third: { color: 'purple' },
+      forth: { color: 'green' },
+      fifth: { color: 'black' },
+    },
+  },
+});

example/src/components/index.ts

@@ -1,4 +1,6 @@
 export { Text } from './Text';
+export { Media } from './Media';
+export { Heading } from './Heading';
 export { Stack } from './Stack';
 export { Spacer } from './Spacer';
 export { ColorModeProvider, useColorMode } from './ColorMode';

example/src/styles/styled.ts

@@ -3,7 +3,14 @@ import { getDeviceTypeAsync, DeviceType } from 'expo-device';
 import { createStitches } from 'stitches-native';
 import type * as Stitches from 'stitches-native';
 
-import { size, shadow, typography, flexCenter, absoluteFill } from './utils';
+import {
+  size,
+  shadow,
+  typography,
+  flexCenter,
+  absoluteFill,
+  remFunction,
+} from './utils';
 
 const media = {
   // You can provide boolean values for breakpoints when you just need to
@@ -172,6 +179,23 @@ const { styled, css, createTheme, config, theme, useTheme, ThemeProvider } =
       typography,
       flexCenter,
       absoluteFill,
+      fontSizeRem: remFunction('fontSize'),
+      widthRem: remFunction('width'),
+      heightRem: remFunction('height'),
+      lineHeightRem: remFunction('lineHeight'),
+      minWidthRem: remFunction('minWidth'),
+      minHeightRem: remFunction('minHeight'),
+      maxWidthRem: remFunction('maxWidth'),
+      maxHeightRem: remFunction('maxHeight'),
+      marginRightRem: remFunction('marginRight'),
+      marginLeftRem: remFunction('marginLeft'),
+      marginTopRem: remFunction('marginTop'),
+      marginBottomRem: remFunction('marginBottom'),
+      paddingRightRem: remFunction('paddingRight'),
+      paddingLeftRem: remFunction('paddingLeft'),
+      paddingTopRem: remFunction('paddingTop'),
+      paddingBottomRem: remFunction('paddingBottom'),
+      borderRadiusRem: remFunction('borderRadius'),
     },
     media,
   });