Merge pull request #5 from bennodev19/develop

Update stylesheet API

examples/typescript-app/src/theme.ts

@@ -1,4 +1,4 @@
-import { makeCreateStyles } from 'create-styles';
+import { createStyleSheet } from 'create-styles';
 
 export type Theme = {
   colors: {
@@ -26,6 +26,6 @@ export const useTheme = (): Theme => {
   };
 };
 
-export const createStyles = makeCreateStyles(useTheme);
+export const styleSheet = createStyleSheet({ theme: useTheme });
 
-export default createStyles;
+export default styleSheet;

examples/typescript-app/src/ui/components/Button/Button.styles.ts

@@ -1,8 +1,9 @@
-import createStyles from '../../../theme';
-import { ExtractStylesType } from 'create-styles';
+import styleSheet from '../../../theme';
+import { UseStylesExtractStylesType } from 'create-styles';
 
-const useStyles = createStyles<ButtonStyles>()(
-  ({ theme, params: { color, radius } }) => ({
+const useStyles = styleSheet
+  .withParams<ButtonStyles>()
+  .create(({ theme, params: { color, radius } }) => ({
     root: {
       color: theme.colors.white,
       backgroundColor: color,
@@ -13,8 +14,7 @@ const useStyles = createStyles<ButtonStyles>()(
       cursor: 'pointer',
       height: 100,
     },
-  })
-);
+  }));
 
 export default useStyles;
 
@@ -23,4 +23,4 @@ type ButtonStyles = {
   radius: number;
 };
 
-export type ExtractedStylesType = ExtractStylesType<typeof useStyles>;
+export type ExtractedStylesType = UseStylesExtractStylesType<typeof useStyles>;

examples/typescript-app/src/ui/screens/Home/Home.styles.ts

@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import { createStyles } from '../../../theme';
+import { styleSheet } from '../../../theme';
 
 const bounce = keyframes`
   from, 20%, 53%, 80%, to {
@@ -19,8 +19,9 @@ const bounce = keyframes`
   }
 `;
 
-export const useStyles = createStyles<HomeStyles>()(
-  ({ theme, params, createRef, assignRef }) => {
+export const useStyles = styleSheet
+  .withParams<HomeStyles>()
+  .create(({ theme, params, createRef, assignRef }) => {
     // create reference
     const text = createRef('text');
 
@@ -58,8 +59,7 @@ export const useStyles = createStyles<HomeStyles>()(
         animation: ${bounce} 1s ease infinite;
       `,
     };
-  }
-);
+  });
 
 export default useStyles;
 

examples/typescript-app/src/ui/screens/Home/Home.tsx

@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 
 const Home: React.FC = () => {
   const [toggled, setToggled] = React.useState(false);
-  const { classes, cx } = useStyles({ toggled });
+  const { classes, cx } = useStyles({ toggled }, { name: 'Home' });
 
   return (
     <div className={classes.root}>

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "create-styles",
-  "version": "0.0.5",
-  "description": "Css-in-Js styles engine, based on Emotion",
+  "name": "dynamic-styles",
+  "version": "0.0.6",
+  "description": "Dynamic Css-in-Js styles engine, based on Emotion",
   "license": "MIT",
   "homepage": "https://github.com/bennodev19/emotion-create-styles",
   "author": "BennoDev <[email protected]>",

src/components/GlobalStyles.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as ReactEmotion from '@emotion/react';
-import { StyleItem } from '../createStyles';
+import { StyleItem } from '../css/StyleSheet';
 
 // https://emotion.sh/docs/globals#gatsby-focus-wrapper
 const GlobalStyles: React.FC<GlobalStylesProps> = (props) => {

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './CacheProvider';
+export * from './GlobalStyles';
+export * from './NormalizeCSS';