added yalc due to facebook/react#14257

Author: bennobuilder

.gitignore

@@ -26,3 +26,5 @@ src/*.js
 src/*.js.map
 *.tgz
 dist
+.yalc
+yalc.lock

examples/typescript-app/package.json

@@ -11,7 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "create-styles": "file:../../dist",
+    "create-styles": "file:.yalc/create-styles",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -22,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "install:dev:create-styles": "yalc add create-styles && yarn install",
+    "install:prod:create-styles": "yarn add create-styles && yarn install"
   },
   "browserslist": {
     "production": [

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { createStyles } from '../../../theme';
+import { keyframes } from 'create-styles';
 
 export const useStyles = createStyles<HomeStyles>()((theme, params) => ({
   root: css`
@@ -15,6 +16,22 @@ export const useStyles = createStyles<HomeStyles>()((theme, params) => ({
     fontSize: '100px',
     color: params.toggled ? 'black' : theme.colors.green,
   },
+  rotate: {
+    '& g': {
+      opacity: 0,
+      animation: `${keyframes`
+            60%, 100% {
+                opacity: 0;
+            }
+            0% {
+                opacity: 0;
+            }
+            40% {
+                opacity: 1;
+            }
+            `} 3.5s infinite ease-in-out`,
+    },
+  },
 }));
 
 export default useStyles;

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

@@ -5,11 +5,13 @@ import { css } from '@emotion/react';
 
 const Home: React.FC = () => {
   const [toggled, setToggled] = React.useState(false);
-  const { classes } = useStyles({ toggled });
+  const { classes, cx } = useStyles({ toggled });
 
   return (
     <div className={classes.root}>
-      <p className={classes.text}>Hello world</p>
+      <p className={cx({ [classes.rotate]: toggled }, classes.text)}>
+        Hello world
+      </p>
       <Button
         color={'#4f5be8'}
         radius={20}

examples/typescript-app/yarn.lock

@@ -3377,6 +3377,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3690,8 +3695,10 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-"create-styles@file:../../dist":
-  version "0.0.0"
+"create-styles@file:.yalc/create-styles":
+  version "0.0.3"
+  dependencies:
+    clsx "^1.1.1"
 
 [email protected], cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"

package.json

@@ -19,9 +19,14 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "shx rm -rf dist && rollup --c config/rollup/rollup.config.js",
+    "dev:publish": "yalc publish",
+    "dev:push": "yalc push",
+    "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "prepare": "yarn run build",
     "pack": "npm pack",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint src/**/*",
+    "install:clean": "shx rm -rf dist && shx rm -rf node_modules && yarn install"
   },
   "dependencies": {
     "clsx": "^1.1.1"
@@ -31,8 +36,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/serialize": "^1.0.2",
     "@emotion/utils": "^1.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",

src/GlobalStyles.tsx

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

src/index.ts

@@ -2,5 +2,9 @@ import { makeCreateStyles } from './createStyles';
 
 export * from './createStyles';
 export { CacheContext } from './cache';
+export * from './GlobalStyles';
+
+// Reexport from @emotion/react
+export { keyframes } from '@emotion/react';
 
 export default makeCreateStyles;