diff --git a/README.md b/README.md index 9060dd29a..3f946eb8e 100644 --- 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 index c22a2c3c8..3b2079a6c 100644 --- 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 index 775296e90..25b2f9ebd 100644 --- 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 index 2f058080b..c1ff906b2 100644 --- 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 index 380fd0303..5ccd9ccb0 100644 --- 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 index 3d478e5e2..1bff7dd6b 100644 --- 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 index e42aefcbd..626af2012 100644 --- 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 index e0e6d1803..0367d7d12 100644 --- 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 index 9820f886a..ed1faa069 100644 --- 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 index 3057b9698..baf4dbc47 100644 --- 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 index 7e472b619..00e47ccff 100644 --- 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 index 9a2398b6d..ddb70314f 100644 --- 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 index b88a8bc2d..980f61813 100644 --- 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 index 50eec2bf4..cf3063dba 100644 --- a/packages/styled/types/base.d.ts +++ b/packages/styled/types/base.d.ts @@ -128,7 +128,6 @@ export interface CreateStyled { ): CreateStyledComponent< Pick, ForwardedProps> & { theme?: Theme - as?: React.ElementType }, {}, { @@ -142,7 +141,6 @@ export interface CreateStyled { ): CreateStyledComponent< PropsOf & { theme?: Theme - as?: React.ElementType }, {}, { @@ -161,7 +159,6 @@ export interface CreateStyled { ): CreateStyledComponent< Pick, ForwardedProps> & { theme?: Theme - as?: React.ElementType } > @@ -171,7 +168,6 @@ export interface CreateStyled { ): CreateStyledComponent< PropsOf & { theme?: Theme - as?: React.ElementType } > diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx index e64d7c5f0..45d88699f 100644 --- a/packages/styled/types/tests.tsx +++ b/packages/styled/types/tests.tsx @@ -181,4 +181,39 @@ const Input5 = styled.input` ` ; ; + // $ExpectError + ; + + const ComposedWithAs = styled(StyledWithAs)` + flex-direction: column; + ` + ; + ; + // $ExpectError + ; + + const ComponentWithAs: React.FC<{ as: string; className?: string }> = ({ + as, + className + }) =>
{as}
+ + const StyledComp = styled(ComponentWithAs)` + background: orange; + ` + ; + // $ExpectError + ; + + const ComponentWithoutAs: React.FC<{ className?: string }> = props => ( +
+ ) + const StyledCompWithoutAs = styled(ComponentWithoutAs)` + background: hotpink; + ` + // $ExpectError + ; + // $ExpectError + ; + // $ExpectError + ; } diff --git a/scripts/replace-slack-link.js b/scripts/replace-slack-link.js new file mode 100644 index 000000000..76ebe1662 --- /dev/null +++ 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 index 5839199a3..cbcf763cd 100644 --- a/site/src/components/SiteHeader.js +++ b/site/src/components/SiteHeader.js @@ -146,7 +146,7 @@ export default function SiteHeader() {
  • - + Slack