Merge branch 'master' into fix/styled-options-dev-only-label

.changeset/long-ladybugs-pull.md

@@ -0,0 +1,5 @@
+---
+'@emotion/eslint-plugin': patch
+---
+
+Improved `syntax-preference` rule to support `css` function and check style types for arguments of `css` & styled calls.

.changeset/rich-walls-beam.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-preset-css-prop': patch
+---
+
+Fixed the invalid example in the README.

README.md

@@ -15,7 +15,7 @@
 ![@emotion/react gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/react.svg?label=@emotion/react%20gzip%20size)
 ![@emotion/styled size](https://img.shields.io/bundlephobia/min/@emotion/styled.svg?label=@emotion/styled%20size)
 ![@emotion/styled gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/styled.svg?label=@emotion/styled%20gzip%20size)
-[![slack](https://emotion-slack.now.sh/badge.svg)](https://emotion-slack.now.sh/)
+[![slack](https://img.shields.io/badge/join-slack-green)](https://join.slack.com/t/emotion-slack/shared_invite/zt-l7oe5x0x-2jsjNXOs95f5w4AdZWu9LA)
 [![spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/emotion)
 
 Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

docs/emotion-11.mdx

@@ -6,7 +6,16 @@ Emotion 11 is a slight evolution over the Emotion 10. It focuses mainly on the d
 
 # Package renaming
 
-One of the most significant changes is that most of the user-facing packages have been renamed:
+One of the most significant changes is that most of the user-facing packages have been renamed.
+
+Most of this renaming can be done automatically via a codemod, following these steps:
+
+1. [Install](https://github.com/emotion-js/emotion/tree/master/packages/eslint-plugin#installation) `@emotion/eslint-plugin`
+1. [Add it as a plugin](https://github.com/emotion-js/emotion/tree/master/packages/eslint-plugin#usage) to `.eslintrc`
+1. [Add Emotion 11 codemod rule](https://github.com/emotion-js/emotion/tree/master/packages/eslint-plugin#emotion-11-codemod)
+1. Run `eslint` with the `--fix` flag. For example: `yarn eslint --config .eslintrc --ext .js,.jsx "." --fix`
+
+The full list of renamed packages:
 - `@emotion/core` → `@emotion/react`
 - `emotion` → `@emotion/css`
 - `emotion-theming` → moved into ` @emotion/react`
@@ -17,8 +26,6 @@ One of the most significant changes is that most of the user-facing packages hav
 - `eslint-plugin-emotion` → `@emotion/eslint-plugin`
 - `jest-emotion` → `@emotion/jest`
 
-Most of this renaming can be done automatically via a codemod by running the `@emotion/pkg-renaming` rule from `@emotion/eslint-plugin` with `--fix` over your codebase.
-
 # Hooks
 
 Use hooks internally for improved bundle size and a better tree in React DevTools 🎉.

docs/typescript.mdx

@@ -57,12 +57,21 @@ import { css } from '@emotion/css'
 
 ### `css` prop
 
-When using our jsx pragma the support for `css` prop is being added only for components that accepts `className` prop, as our `jsx` factory function takes provided `css` prop, resolves it and pass the generated `className` to the rendered component.
+When using our JSX factories the support for `css` prop is being added only for components that accepts `className` prop as they take provided `css` prop, resolves it and pass the generated `className` to the rendered component.
 
-However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
+If using the automatic runtime you should just add this to your `tsconfig.json` to let TypeScript know where it should look for the `JSX` namespace:
+```json
+{
+  "compilerOptions": {
+    "jsxImportSource": "@emotion/react"
+  }
+}
+```
+
+The same `JSX` namespace is resolved if you are still using the classic runtime through the `@jsx` pragma. However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma or the automatic runtime. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
 
 ```ts
-import {} from '@emotion/react/types/css-prop'
+/// <reference types="@emotion/react/types/css-prop" />
 ```
 
 ## @emotion/styled
@@ -277,10 +286,10 @@ declare module '@emotion/react' {
 
 // You are also able to use a 3rd party theme this way:
 import '@emotion/react'
-import { MuiTheme } from 'material-ui'
+import { LibTheme } from 'some-lib' 
 
 declare module '@emotion/react' {
-  export interface Theme extends MuiTheme {}
+  export interface Theme extends LibTheme {}
 }
 ```
 
@@ -291,7 +300,7 @@ import styled from '@emotion/styled'
 
 const Button = styled('button')`
   padding: 20px;
-  background-color: ${props => props.theme.primary};
+  background-color: ${props => props.theme.someLibProperty};
   border-radius: 3px;
 `
 

packages/babel-plugin/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @emotion/babel-plugin
 
+## 11.1.2
+
+### Patch Changes
+
+- [`de378ab8`](https://github.com/emotion-js/emotion/commit/de378ab8693c74be5714c6c12ccc191ed2d7ac1a) [#2147](https://github.com/emotion-js/emotion/pull/2147) Thanks [@macalinao](https://github.com/macalinao)! - Fixed an issue with template strings minifier crashing on two consecutive interpolations without any meaningful string in between them.
+
+- Updated dependencies [[`ee6a673f`](https://github.com/emotion-js/emotion/commit/ee6a673f74e934bf738d5346ddfc7982caa23827)]:
+  - @emotion/memoize@0.7.5
+
 ## 11.0.0
 
 ### Major Changes

packages/babel-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emotion/babel-plugin",
-  "version": "11.0.0",
+  "version": "11.1.2",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-babel-plugin.cjs.js",
   "module": "dist/emotion-babel-plugin.esm.js",
@@ -17,7 +17,7 @@
     "@babel/plugin-syntax-jsx": "^7.12.1",
     "@babel/runtime": "^7.7.2",
     "@emotion/hash": "^0.8.0",
-    "@emotion/memoize": "^0.7.4",
+    "@emotion/memoize": "^0.7.5",
     "@emotion/serialize": "^1.0.0",
     "babel-plugin-macros": "^2.6.1",
     "convert-source-map": "^1.5.0",

packages/babel-preset-css-prop/README.md

@@ -153,13 +153,15 @@ Options for both `@emotion/babel-plugin` and `@babel/plugin-transform-react-jsx`
 ```json
 {
   "presets": [
-    "@emotion/babel-preset-css-prop",
-    {
-      "autoLabel": "dev-only",
-      "labelFormat": "[local]",
-      "useBuiltIns": false,
-      "throwIfNamespace": true
-    }
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "autoLabel": "dev-only",
+        "labelFormat": "[local]",
+        "useBuiltIns": false,
+        "throwIfNamespace": true
+      }
+    ]
   ]
 }
 ```

packages/cache/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @emotion/cache
 
+## 11.1.3
+
+### Patch Changes
+
+- [`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201) [#2180](https://github.com/emotion-js/emotion/pull/2180) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.
+
 ## 11.0.0
 
 ### Major Changes

packages/cache/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emotion/cache",
-  "version": "11.0.0",
+  "version": "11.1.3",
   "description": "emotion's cache",
   "main": "dist/emotion-cache.cjs.js",
   "module": "dist/emotion-cache.esm.js",

packages/cache/src/stylis-plugins.js

@@ -73,6 +73,7 @@ export let compat = element => {
 
   while (parent.type !== 'rule') {
     parent = parent.parent
+    if (!parent) return
   }
 
   // short-circuit for the simplest case

packages/css/CHANGELOG.md

@@ -1,5 +1,14 @@
 # emotion
 
+## 11.1.3
+
+### Patch Changes
+
+- [`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201) [#2180](https://github.com/emotion-js/emotion/pull/2180) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.
+
+- Updated dependencies [[`704b0092`](https://github.com/emotion-js/emotion/commit/704b0092ebba648c3937cc281e4d549565968201)]:
+  - @emotion/cache@11.1.3
+
 ## 11.0.0
 
 ### Major Changes

packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emotion/css",
-  "version": "11.0.0",
+  "version": "11.1.3",
   "description": "The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-css.cjs.js",
   "module": "dist/emotion-css.esm.js",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@emotion/babel-plugin": "^11.0.0",
-    "@emotion/cache": "^11.0.0",
+    "@emotion/cache": "^11.1.3",
     "@emotion/serialize": "^1.0.0",
     "@emotion/sheet": "^1.0.0",
     "@emotion/utils": "^1.0.0"

packages/css/test/__snapshots__/inject-global.test.js.snap

@@ -29,6 +29,14 @@ exports[`injectGlobal nested interpolated media query 1`] = `
 }"
 `;
 
+exports[`injectGlobal pseudo in @media 1`] = `
+"@media (min-width: 300px) {
+  .header:after {
+    content: '';
+  }
+}"
+`;
+
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
   display: -webkit-box;

packages/css/test/inject-global.test.js

@@ -64,4 +64,15 @@ describe('injectGlobal', () => {
     `
     expect(sheet).toMatchSnapshot()
   })
+  test('pseudo in @media', () => {
+    injectGlobal`
+      @media (min-width: 300px) {
+        .header:after {
+          content: '';
+        }
+      }
+    `
+
+    expect(sheet).toMatchSnapshot()
+  })
 })

packages/eslint-plugin/src/rules/syntax-preference.js

@@ -4,6 +4,9 @@
  */
 
 function isStringStyle(node) {
+  if (node.tag.type === 'Identifier' && node.tag.name === 'css') {
+    return true
+  }
   // shorthand notation
   // eg: styled.h1` color: red; `
   if (
@@ -25,6 +28,10 @@ function isStringStyle(node) {
 }
 
 function isObjectStyle(node) {
+  if (node.callee.type === 'Identifier' && node.callee.name === 'css') {
+    return true
+  }
+
   // shorthand notation
   // eg: styled.h1({ color: 'red' })
   if (
@@ -57,20 +64,14 @@ const MSG_PREFER_OBJECT_STYLE = 'Styles should be written using objects.'
 const MSG_PREFER_WRAPPING_WITH_CSS =
   'Prefer wrapping your string styles with `css` call.'
 
-const checkCssPropExpressionPreferringObject = (context, node) => {
+const checkExpressionPreferringObject = (context, node) => {
   switch (node.type) {
     case 'ArrayExpression':
       node.elements.forEach(element =>
-        checkCssPropExpressionPreferringObject(context, element)
+        checkExpressionPreferringObject(context, element)
       )
       return
-    case 'CallExpression':
-      context.report({
-        node,
-        message: MSG_PREFER_OBJECT_STYLE
-      })
-      return
-    case 'TaggedTemplateExpression':
+    case 'TemplateLiteral':
       context.report({
         node,
         message: MSG_PREFER_OBJECT_STYLE
@@ -97,6 +98,13 @@ const createPreferredObjectVisitor = context => ({
       })
     }
   },
+  CallExpression(node) {
+    if (isObjectStyle(node)) {
+      node.arguments.forEach(argument =>
+        checkExpressionPreferringObject(context, argument)
+      )
+    }
+  },
   JSXAttribute(node) {
     if (node.name.name !== 'css') {
       return
@@ -114,16 +122,16 @@ const createPreferredObjectVisitor = context => ({
         })
         return
       case 'JSXExpressionContainer':
-        checkCssPropExpressionPreferringObject(context, node.value.expression)
+        checkExpressionPreferringObject(context, node.value.expression)
     }
   }
 })
 
-const checkCssPropExpressionPreferringString = (context, node) => {
+const checkExpressionPreferringString = (context, node) => {
   switch (node.type) {
     case 'ArrayExpression':
       node.elements.forEach(element =>
-        checkCssPropExpressionPreferringString(context, element)
+        checkExpressionPreferringString(context, element)
       )
       return
     case 'ObjectExpression':
@@ -147,10 +155,9 @@ const checkCssPropExpressionPreferringString = (context, node) => {
 const createPreferredStringVisitor = context => ({
   CallExpression(node) {
     if (isObjectStyle(node)) {
-      context.report({
-        node,
-        message: MSG_PREFER_STRING_STYLE
-      })
+      node.arguments.forEach(argument =>
+        checkExpressionPreferringString(context, argument)
+      )
     }
   },
 
@@ -171,7 +178,7 @@ const createPreferredStringVisitor = context => ({
         })
         return
       case 'JSXExpressionContainer':
-        checkCssPropExpressionPreferringString(context, node.value.expression)
+        checkExpressionPreferringString(context, node.value.expression)
     }
   }
 })