.changeset/config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "emotion-js/emotion" }
+  ],
+  "commit": false,
+  "linked": [
+    [
+      "@emotion/core",
+      "@emotion/styled",
+      "@emotion/styled-base",
+      "@emotion/cache",
+      "@emotion/css",
+      "create-emotion",
+      "emotion",
+      "emotion-server",
+      "create-emotion-server",
+      "babel-plugin-emotion",
+      "@emotion/babel-preset-css-prop",
+      "jest-emotion",
+      "@emotion/native",
+      "@emotion/primitives",
+      "@emotion/primitives-core",
+      "eslint-plugin-emotion",
+      "emotion-theming"
+    ]
+  ],
+  "access": "public"
+}

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.89.0
+0.110.0
 
 [ignore]
 .*/node_modules/config-chain/.*
@@ -23,4 +23,5 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
-sharedmemory.hash_table_pow=21
+suppress_comment=.*\\$FlowExpectError
+sharedmemory.hash_table_pow=21

.flowconfig-ci

@@ -1,5 +1,5 @@
 [version]
-0.89.0
+0.110.0
 
 [ignore]
 .*/node_modules/config-chain/.*
@@ -24,5 +24,6 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
+suppress_comment=.*\\$FlowExpectError
 server.max_workers=1
 sharedmemory.hash_table_pow=21

.github/workflows/release.yml

@@ -16,15 +16,18 @@ jobs:
       - name: Setup Node.js 10.x
         uses: actions/setup-node@master
         with:
-          version: 10.x
+          node-version: 10.x
 
       - name: Install Yarn
         run: npm install --global yarn
 
       - name: Install Dependencies
         run: yarn
 
-      - name: Create Pull Request
+      - name: Create Release Pull Request or Publish to npm
         uses: changesets/action@master
+        with:
+          publish: yarn release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -10,4 +10,5 @@ package-lock.json
 .cache
 public/
 !playgrounds/cra/public
-.env
+.env
+.vscode

docs/css-prop.mdx

@@ -54,6 +54,8 @@ Similar to a comment containing linter configuration, this configures the [jsx b
 import { jsx } from '@emotion/core'
 ```
 
+Note that excluding this will cause your css to render as `[Object Object]`.
+
 #### Use the `css` prop
 
 Any component or element that accepts a `className` prop can also use the `css` prop. The styles supplied to the `css` prop are evaluated and the computed class name is applied to the `className` prop.
@@ -113,6 +115,8 @@ render(
 >
 > **`css` from `@emotion/core` does not return the computed class name string.** The function returns an object containing the computed name and flattened styles. The returned object is understood by emotion at a low level and can be composed with other emotion based styles inside of the `css` prop, other `css` calls, or the `styled` API.
 
+You can also pass in your css as variables, which allows for composition (read more about this [here](https://emotion.sh/docs/composition)).
+
 ## Style Precedence
 
 - Class names containing emotion styles from the `className` prop override `css` prop styles.
@@ -243,4 +247,4 @@ Relying on the css spec's ["Order of Appearance"](https://www.w3.org/TR/css-casc
 
 ## Gotchas
 
-- If you include the plugin `babel-plugin-transform-react-inline-elements` in your `.babelrc` your styles will not be applied. The plugin is not compatible with the `css` prop.
+- If you include the plugin `babel-plugin-transform-react-inline-elements` in your `.babelrc` your styles will not be applied. The plugin is not compatible with the `css` prop.

docs/extract-static.mdx

@@ -29,7 +29,7 @@ const Button = styled('button')`
 Configure babel
 
 ```bash
-yarn add babel-plugin-emotion
+yarn add --dev babel-plugin-emotion
 ```
 
 **.babelrc**

docs/globals.mdx

@@ -12,7 +12,7 @@ render(
   <div>
     <Global
       styles={css`
-        * {
+        .some-class {
           color: hotpink !important;
         }
       `}
@@ -25,9 +25,7 @@ render(
         }
       }}
     />
-    <div className="some-class">
-      Everything is hotpink now!
-    </div>
+    <div className="some-class">This is hotpink now!</div>
   </div>
 )
 ```