emotion-js · Jun 26, 2019 · Jun 26, 2019 · Jul 4, 2019 · Jul 8, 2019 · Jul 9, 2019
diff --git a/.changeset/config.js b/.changeset/config.js
@@ -1,5 +1,137 @@
 require('dotenv').config()
-const { getInfo } = require('@changesets/get-github-info')
+
+const fetch = require('node-fetch')
+const DataLoader = require('dataloader')
+
+function makeQuery(repos) {
+  return `
+      query {
+        ${Object.keys(repos)
+          .map(
+            (repo, i) =>
+              `a${i}: repository(
+            owner: ${JSON.stringify(repo.split('/')[0])}
+            name: ${JSON.stringify(repo.split('/')[1])}
+          ) {
+            ${repos[repo]
+              .map(
+                (commit, i) => `a${commit}: object(expression: ${JSON.stringify(
+                  commit
+                )}) {
+            ... on Commit {
+            commitUrl
+            associatedPullRequests(first: 1) {
+              nodes {
+                number
+                url
+              }
+            }
+            author {
+              user {
+                login
+                url
+              }
+            }
+          }}`
+              )
+              .join('\n')}
+          }`
+          )
+          .join('\n')}
+        }
+    `
+}
+
+// why are we using dataloader?
+// it provides use with two things
+// 1. caching
+// since getInfo will be called inside of changeset's getReleaseLine
+// and there could be a lot of release lines for a single commit
+// caching is important so we don't do a bunch of requests for the same commit
+// 2. batching
+// getReleaseLine will be called a large number of times but it'll be called at the same time
+// so instead of doing a bunch of network requests, we can do a single one.
+const GHDataLoader = new DataLoader(async requests => {
+  if (!process.env.GITHUB_TOKEN) {
+    throw new Error(
+      'Please create a GitHub personal access token at https://github.com/settings/tokens/new and add it as the GITHUB_TOKEN environment variable'
+    )
+  }
+  let repos = {}
+  requests.forEach(({ commit, repo }) => {
+    if (repos[repo] === undefined) {
+      repos[repo] = []
+    }
+    repos[repo].push(commit)
+  })
+
+  const data = await fetch(
+    `https://api.github.com/graphql?access_token=${process.env.GITHUB_TOKEN}`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ query: makeQuery(repos) })
+    }
+  ).then(x => x.json())
+
+  // this is mainly for the case where there's an authentication problem
+  if (!data.data) {
+    throw new Error(
+      `An error occurred when fetching data from GitHub\n${JSON.stringify(
+        data
+      )}`
+    )
+  }
+
+  let cleanedData = {}
+  let dataKeys = Object.keys(data.data)
+  Object.keys(repos).forEach((repo, index) => {
+    cleanedData[repo] = {}
+    for (let nearlyCommit in data.data[dataKeys[index]]) {
+      cleanedData[repo][nearlyCommit.substring(1)] =
+        data.data[dataKeys[index]][nearlyCommit]
+    }
+  })
+
+  return requests.map(({ repo, commit }) => cleanedData[repo][commit])
+})
+
+async function getInfo(request) {
+  if (!request.commit) {
+    throw new Error('Please pass a commit SHA to getInfo')
+  }
+
+  if (!request.repo) {
+    throw new Error(
+      'Please pass a GitHub repository in the form of userOrOrg/repoName to getInfo'
+    )
+  }
+
+  const data = await GHDataLoader.load(request)
+  return {
+    user: data.author && data.author.user ? data.author.user.login : null,
+    pull:
+      data.associatedPullRequests &&
+      data.associatedPullRequests.nodes &&
+      data.associatedPullRequests.nodes[0]
+        ? data.associatedPullRequests.nodes[0].number
+        : null,
+    links: {
+      commit: `[${request.commit}](${data.commitUrl})`,
+      pull:
+        data.associatedPullRequests &&
+        data.associatedPullRequests.nodes &&
+        data.associatedPullRequests.nodes[0]
+          ? `[#${data.associatedPullRequests.nodes[0].number}](${
+              data.associatedPullRequests.nodes[0].url
+            })`
+          : null,
+      user:
+        data.author && data.author.user
+          ? `[@${data.author.user.login}](${data.author.user.url})`
+          : null
+    }
+  }
+}
 
 /*
 Hey, welcome to the changeset config! This file has been generated

diff --git a/.flowconfig b/.flowconfig
@@ -7,6 +7,7 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/preact/.*
+.*/node_modules/@parcel/.*
 
 [untyped]
 .*/node_modules/polished/.*
@@ -22,3 +23,4 @@
 
 [options]
 suppress_comment=.*\\$FlowFixMe
+sharedmemory.hash_table_pow=21
diff --git a/.flowconfig-ci b/.flowconfig-ci
@@ -7,6 +7,8 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/preact/.*
+.*/node_modules/@parcel/.*
+
 
 [untyped]
 .*/node_modules/polished/.*
@@ -23,3 +25,4 @@
 [options]
 suppress_comment=.*\\$FlowFixMe
 server.max_workers=1
+sharedmemory.hash_table_pow=21
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@master
+
+      - name: Setup Node.js 10.x
+        uses: actions/setup-node@master
+        with:
+          version: 10.x
+
+      - name: Install Yarn
+        run: npm install --global yarn
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Create Pull Request
+        uses: changesets/action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 - [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
 - [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
 - [monad-ui](https://github.com/muhajirdev/monad-ui/) - Utility First CSS-In-JS
+- [css-in-js-media](https://github.com/zx6658/css-in-js-media) - you can deal with responsive design using css-in-js easily with this `css-in-js-media` which is similar with include-media
 
 ### In the Wild
 

diff --git a/babel.config.js b/babel.config.js
@@ -10,14 +10,17 @@ module.exports = api => {
     overrides: [
       {
         test: filename =>
-          (!filename.includes('no-babel') &&
+          filename &&
+          ((!filename.includes('no-babel') &&
             needsBabelPluginEmotion(filename)) ||
-          filename.includes(path.join('__tests__', 'babel')),
+            filename.includes(path.join('__tests__', 'babel'))),
         plugins: ['babel-plugin-emotion']
       },
       {
         test: filename =>
-          filename.includes('source-map') && needsBabelPluginEmotion(filename),
+          filename &&
+          filename.includes('source-map') &&
+          needsBabelPluginEmotion(filename),
         plugins: [['babel-plugin-emotion', { sourceMap: true }]]
       }
     ]

diff --git a/docs/babel-macros.md → docs/babel-macros.mdx b/docs/babel-macros.md → docs/babel-macros.mdx
diff --git a/docs/babel.md → docs/babel.mdx b/docs/babel.md → docs/babel.mdx
diff --git a/docs/cache-provider.md → docs/cache-provider.mdx b/docs/cache-provider.md → docs/cache-provider.mdx
diff --git a/docs/class-names.md → docs/class-names.mdx b/docs/class-names.md → docs/class-names.mdx
diff --git a/docs/composition.md → docs/composition.mdx b/docs/composition.md → docs/composition.mdx
diff --git a/docs/css-prop.md → docs/css-prop.mdx b/docs/css-prop.md → docs/css-prop.mdx
diff --git a/docs/extract-static.md → docs/extract-static.mdx b/docs/extract-static.md → docs/extract-static.mdx
diff --git a/docs/globals.md → docs/globals.mdx b/docs/globals.md → docs/globals.mdx
diff --git a/docs/homepage-buttons.md b/docs/homepage-buttons.md
diff --git a/docs/install.md → docs/install.mdx b/docs/install.md → docs/install.mdx
diff --git a/docs/instances.md → docs/instances.mdx b/docs/instances.md → docs/instances.mdx
diff --git a/docs/introduction.md → docs/introduction.mdx b/docs/introduction.md → docs/introduction.mdx
diff --git a/docs/keyframes.md → docs/keyframes.mdx b/docs/keyframes.md → docs/keyframes.mdx
diff --git a/docs/labels.md → docs/labels.mdx b/docs/labels.md → docs/labels.mdx
diff --git a/docs/media-queries.md → docs/media-queries.mdx b/docs/media-queries.md → docs/media-queries.mdx
diff --git a/docs/migrating-to-emotion-10.md → docs/migrating-to-emotion-10.mdx b/docs/migrating-to-emotion-10.md → docs/migrating-to-emotion-10.mdx
@@ -10,9 +10,9 @@ Emotion 10 is a significant change to Emotion, so it requires some changes to yo
 
 # Thinking
 
-The most significant change in Emotion 10 is that it doesn't let you easily access the underlying class names. Instead of thinking in class names, you have to think in terms of styles and composing them together. (you can still use class names directly if you want to, but you won't get new features like zero-config server rendering)
+The most significant change in Emotion 10 is that it doesn't let you easily access the underlying class names. Instead of thinking in class names, you have to think in terms of styles and composing them together (you can still use class names directly if you want to, but you won't get new features like zero-config server rendering).
 
-For example, in Emotion 9, you might have had two classes from `css` and compose them together with `cx`, but in Emotion 10, you create 2 styles and compose them together in the css prop like this.
+For example, in Emotion 9, you might have had two classes from `css` and compose them together with `cx`, but in Emotion 10, you create two styles and compose them together in the `css` prop like this:
 
 ```jsx
 // Emotion 9
@@ -55,20 +55,22 @@ const SomeComponent = props => (
 
 Incremental migration is something really important to Emotion because we don't want anyone to have to rewrite their entire app.
 
-The upgrades to emotion 10 are split into two parts. The first part can be done automatically by using [`eslint-plugin-emotion`](./eslint-plugin-emotion#emotion-10-codemods).
+The upgrades to Emotion 10 are split into two parts. The first part can be done automatically by using [`eslint-plugin-emotion`](./eslint-plugin-emotion#emotion-10-codemods).
 
 ## Codemoddable
 
-- Change all react-emotion imports so that styled is imported from `@emotion/styled` and all the emotion exports are split into a second import.
+- Change all `react-emotion` imports so that `styled` is imported from `@emotion/styled` and all the `emotion` exports are split into a second import.
 
 ```jsx
 import styled, { css } from 'react-emotion'
+
 // ↓ ↓ ↓ ↓ ↓ ↓
+
 import styled from '@emotion/styled'
 import { css } from 'emotion'
 ```
 
-- Add a css call to the css prop when a template literal is used.
+- Add a `css` call to the `css` prop when a template literal is used.
 
 ```jsx
 let element = (
@@ -92,11 +94,24 @@ let element = (
 )
 ```
 
-- Add a `jsx` import and set jsx pragma
+- Add a `jsx` import and set the jsx pragma at the top of the source file.
 
 ```jsx
 import { css } from '@emotion/core'
 
+let element = (
+  <div
+    css={css`
+      color: hotpink;
+    `}
+  />
+)
+
+// ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+
 let element = (
   <div
     css={css`
@@ -126,9 +141,9 @@ render(
 )
 ```
 
-## Manual Steps over time
+## Manual Steps Over Time
 
-- Change css usage to css prop
+- Change `css` usage to `css` prop
 
 ```jsx
 import { css } from 'emotion'
@@ -141,6 +156,7 @@ let element = (
 )
 
 // ↓ ↓ ↓ ↓ ↓ ↓
+
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core'
 
@@ -153,7 +169,7 @@ let element = (
 )
 ```
 
-If you have components that accepts props like `wrapperClassName` or etc. you can use the [`ClassNames` component](./class-names.md).
+If you have components that accepts props like `wrapperClassName`, etc., you can use the [`ClassNames` component](./class-names.md).
 
 ```jsx
 import { css } from 'emotion'

diff --git a/docs/nested.md → docs/nested.mdx b/docs/nested.md → docs/nested.mdx
diff --git a/docs/object-styles.md → docs/object-styles.mdx b/docs/object-styles.md → docs/object-styles.mdx
diff --git a/docs/source-maps.md → docs/source-maps.mdx b/docs/source-maps.md → docs/source-maps.mdx
diff --git a/docs/ssr.md → docs/ssr.mdx b/docs/ssr.md → docs/ssr.mdx
diff --git a/docs/styled.md → docs/styled.mdx b/docs/styled.md → docs/styled.mdx
diff --git a/docs/testing.md → docs/testing.mdx b/docs/testing.md → docs/testing.mdx
diff --git a/docs/theming.md → docs/theming.mdx b/docs/theming.md → docs/theming.mdx
diff --git a/docs/typescript.md → docs/typescript.mdx b/docs/typescript.md → docs/typescript.mdx
diff --git a/docs/with-props.md → docs/with-props.mdx b/docs/with-props.md → docs/with-props.mdx