Merge branch 'master' into fix-is-prop-valid

emotion-js · Feb 8, 2021 · a83fb7a · a83fb7a
2 parents 850738e + 2fe9e0e
commit a83fb7a
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 20 deletions.
diff --git a/README.md b/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://img.shields.io/badge/join-slack-green)](https://join.slack.com/t/emotion-slack/shared_invite/zt-jwd6t4bn-3byTBItoXuwPl5uU~8Qbdg/)
+[![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.

diff --git a/docs/emotion-11.mdx b/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 🎉.

diff --git a/docs/typescript.mdx b/docs/typescript.mdx
@@ -286,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 {}
 }
 ```
 
@@ -300,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;
 `
 

diff --git a/packages/is-prop-valid/CHANGELOG.md b/packages/is-prop-valid/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/is-prop-valid
 
+## 1.1.0
+
+### Minor Changes
+
+- [`f3c2e81d`](https://github.com/emotion-js/emotion/commit/f3c2e81d10b63811ebbc6c5b11fa3553a2605f44) [#2232](https://github.com/emotion-js/emotion/pull/2232) Thanks [@ka2jun8](https://github.com/ka2jun8)! - Added `option` & `fallback` AMP props to the list of valid props.
+
 ## 1.0.0
 
 ### Major Changes

diff --git a/packages/is-prop-valid/package.json b/packages/is-prop-valid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/is-prop-valid",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A function to check whether a prop is valid for HTML and SVG elements",
   "main": "dist/emotion-is-prop-valid.cjs.js",
   "module": "dist/emotion-is-prop-valid.esm.js",

diff --git a/packages/is-prop-valid/src/props.js b/packages/is-prop-valid/src/props.js
@@ -188,6 +188,9 @@ const props = {
   color: true,
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#incremental_This_API_has_not_been_standardized
   incremental: true,
+  // used in amp html for indicating the fallback behavior
+  // https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/
+  fallback: true,
   // https://html.spec.whatwg.org/multipage/interaction.html#inert
   inert: true,
   // itemProp, itemScope, itemType are for
@@ -201,7 +204,11 @@ const props = {
   itemID: true,
   itemRef: true,
   // used in amp html for eventing purposes
+  // https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes/
   on: true,
+  // used in amp html for indicating that the option is selectable
+  // https://amp.dev/documentation/components/amp-selector/
+  option: true,
   // results show looking glass icon and recent searches on input
   // search fields in WebKit/Blink
   results: true,

diff --git a/packages/jest/package.json b/packages/jest/package.json
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@emotion/css": "11.1.3",
-    "@emotion/react": "11.1.4",
+    "@emotion/react": "11.1.5",
     "@types/jest": "^26.0.14",
     "dtslint": "^0.3.0",
     "enzyme-to-json": "^3.6.1",

diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
@@ -20,7 +20,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.1.4",
+    "@emotion/react": "11.1.5",
     "react": "16.14.0"
   },
   "homepage": "https://emotion.sh",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/react
 
+## 11.1.5
+
+### Patch Changes
+
+- [`4d2e732e`](https://github.com/emotion-js/emotion/commit/4d2e732e9f0c8385c77c7bc43d4ccea7b30b9d37) [#2206](https://github.com/emotion-js/emotion/pull/2206) Thanks [@jimmydief](https://github.com/jimmydief)! - Added export for `SerializedStyles` Flow type.
+
 ## 11.1.4
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/react",
-  "version": "11.1.4",
+  "version": "11.1.5",
   "main": "dist/emotion-react.cjs.js",
   "module": "dist/emotion-react.esm.js",
   "browser": {
@@ -51,7 +51,7 @@
     "@emotion/css": "11.1.3",
     "@emotion/css-prettifier": "1.0.0",
     "@emotion/server": "11.0.0",
-    "@emotion/styled": "11.0.0",
+    "@emotion/styled": "11.1.5",
     "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
     "html-tag-names": "^1.1.2",

diff --git a/packages/react/src/index.js b/packages/react/src/index.js
@@ -1,5 +1,6 @@
 // @flow
 import pkg from '../package.json'
+export type { SerializedStyles } from '@emotion/utils'
 export { withEmotionCache, CacheProvider } from './context'
 export { jsx } from './jsx'
 export { jsx as createElement } from './jsx'

diff --git a/packages/styled/CHANGELOG.md b/packages/styled/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @emotion/styled
 
+## 11.1.5
+
+### Patch Changes
+
+- [`d0293508`](https://github.com/emotion-js/emotion/commit/d0293508016dc07c5ad502b9eb0bec99ede1d37b) [#2240](https://github.com/emotion-js/emotion/pull/2240) Thanks [@wolszczak96](https://github.com/wolszczak96)! - `as` prop has been removed from TypeScript declarations for composite components. This prop has not actually been handled by default by `styled` for those components - to make `styled` handle it you need to provide a custom `shouldForwardProp` that doesn't forward the `as` prop.
+
+- Updated dependencies [[`f3c2e81d`](https://github.com/emotion-js/emotion/commit/f3c2e81d10b63811ebbc6c5b11fa3553a2605f44)]:
+  - @emotion/is-prop-valid@1.1.0
+
 ## 11.0.0
 
 ### Major Changes

diff --git a/packages/styled/package.json b/packages/styled/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/styled",
-  "version": "11.0.0",
+  "version": "11.1.5",
   "description": "styled API for emotion",
   "main": "dist/emotion-styled.cjs.js",
   "module": "dist/emotion-styled.esm.js",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@babel/runtime": "^7.7.2",
     "@emotion/babel-plugin": "^11.1.2",
-    "@emotion/is-prop-valid": "^1.0.0",
+    "@emotion/is-prop-valid": "^1.1.0",
     "@emotion/serialize": "^1.0.0",
     "@emotion/utils": "^1.0.0"
   },
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
-    "@emotion/react": "11.1.4",
+    "@emotion/react": "11.1.5",
     "dtslint": "^0.3.0",
     "react": "16.14.0"
   },

diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
@@ -128,7 +128,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     Pick<PropsOf<C>, ForwardedProps> & {
       theme?: Theme
-      as?: React.ElementType
     },
     {},
     {
@@ -142,7 +141,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     PropsOf<C> & {
       theme?: Theme
-      as?: React.ElementType
     },
     {},
     {
@@ -161,7 +159,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     Pick<PropsOf<C>, ForwardedProps> & {
       theme?: Theme
-      as?: React.ElementType
     }
   >
 
@@ -171,7 +168,6 @@ export interface CreateStyled {
   ): CreateStyledComponent<
     PropsOf<C> & {
       theme?: Theme
-      as?: React.ElementType
     }
   >
 

diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
@@ -181,4 +181,39 @@ const Input5 = styled.input`
   `
   ;<StyledWithAs as="section" />
   ;<StyledWithAs as={Section} />
+  // $ExpectError
+  ;<StyledWithAs as="random string" />
+
+  const ComposedWithAs = styled(StyledWithAs)`
+    flex-direction: column;
+  `
+  ;<ComposedWithAs as="section" />
+  ;<ComposedWithAs as={Section} />
+  // $ExpectError
+  ;<ComposedWithAs as="random string" />
+
+  const ComponentWithAs: React.FC<{ as: string; className?: string }> = ({
+    as,
+    className
+  }) => <div className={className}>{as}</div>
+
+  const StyledComp = styled(ComponentWithAs)`
+    background: orange;
+  `
+  ;<StyledComp as="random string" />
+  // $ExpectError
+  ;<StyledComp as={Section} />
+
+  const ComponentWithoutAs: React.FC<{ className?: string }> = props => (
+    <div {...props} />
+  )
+  const StyledCompWithoutAs = styled(ComponentWithoutAs)`
+    background: hotpink;
+  `
+  // $ExpectError
+  ;<StyledCompWithoutAs as="random string" />
+  // $ExpectError
+  ;<StyledCompWithoutAs as="section" />
+  // $ExpectError
+  ;<StyledCompWithoutAs as={Section} />
 }
diff --git a/scripts/replace-slack-link.js b/scripts/replace-slack-link.js
@@ -0,0 +1,24 @@
+// slack invite links expire after 30 days and you can't(at least as far as i can tell) create tokens for things like slackin anymore
+
+const fs = require('fs')
+
+const slackInviteLink = process.argv[2]
+
+const siteHeaderPath = `${__dirname}/../site/src/components/SiteHeader.js`
+const readmePath = `${__dirname}/../README.md`
+
+const slackInviteLinkRegex = /https:\/\/join\.slack\.com\/t\/emotion-slack\/shared_invite\/[^/]+\//
+
+const siteHeader = fs.readFileSync(siteHeaderPath, 'utf8')
+
+fs.writeFileSync(
+  siteHeaderPath,
+  siteHeader.replace(slackInviteLinkRegex, slackInviteLink)
+)
+
+const readme = fs.readFileSync(readmePath, 'utf8')
+
+fs.writeFileSync(
+  readmePath,
+  readme.replace(slackInviteLinkRegex, slackInviteLink)
+)
diff --git a/site/src/components/SiteHeader.js b/site/src/components/SiteHeader.js
@@ -146,7 +146,7 @@ export default function SiteHeader() {
               </HeaderLink>
             </li>
             <li>
-              <HeaderLink to="https://join.slack.com/t/emotion-slack/shared_invite/zt-jwd6t4bn-3byTBItoXuwPl5uU~8Qbdg">
+              <HeaderLink to="https://join.slack.com/t/emotion-slack/shared_invite/zt-l7oe5x0x-2jsjNXOs95f5w4AdZWu9LA">
                 Slack
               </HeaderLink>
             </li>