diff --git a/.changeset/healthy-worms-speak.md b/.changeset/healthy-worms-speak.md deleted file mode 100644 index ece7a4647..000000000 --- a/.changeset/healthy-worms-speak.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@emotion/babel-plugin": patch ---- - -Fixed an issue with template strings minifier crashing on two consecutive interpolations without any meaningful string in between them. diff --git a/.changeset/long-ladybugs-pull.md b/.changeset/long-ladybugs-pull.md new file mode 100644 index 000000000..1299bf347 --- /dev/null +++ b/.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. diff --git a/.changeset/nasty-starfishes-retire.md b/.changeset/nasty-starfishes-retire.md deleted file mode 100644 index 87aabc92f..000000000 --- a/.changeset/nasty-starfishes-retire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@emotion/react': patch ---- - -Improved label extraction from the stack traces to handle components with numbers in their names. diff --git a/.changeset/perfect-spoons-whisper.md b/.changeset/perfect-spoons-whisper.md deleted file mode 100644 index b7c8d337e..000000000 --- a/.changeset/perfect-spoons-whisper.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@emotion/react': patch ---- - -Fixed an issue with `css` prop type not being added to all components that accept a string `className` correctly. diff --git a/.changeset/rich-walls-beam.md b/.changeset/rich-walls-beam.md new file mode 100644 index 000000000..2c81a0c38 --- /dev/null +++ b/.changeset/rich-walls-beam.md @@ -0,0 +1,5 @@ +--- +'@emotion/babel-preset-css-prop': patch +--- + +Fixed the invalid example in the README. diff --git a/.changeset/unlucky-swans-care.md b/.changeset/unlucky-swans-care.md deleted file mode 100644 index 9b81ea7ac..000000000 --- a/.changeset/unlucky-swans-care.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@emotion/memoize": patch ---- - -Fixed an issue with prototype properties not being correctly handled. diff --git a/README.md b/README.md index f4c0f045a..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://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. 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 a71e04e13..25b2f9ebd 100644 --- a/docs/typescript.mdx +++ b/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' +/// ``` ## @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; ` diff --git a/packages/babel-plugin/CHANGELOG.md b/packages/babel-plugin/CHANGELOG.md index be39c7411..1c1f328fe 100644 --- a/packages/babel-plugin/CHANGELOG.md +++ b/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 diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index 40053366a..0eb04256a 100644 --- a/packages/babel-plugin/package.json +++ b/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", diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md index a3505f09a..80336ae3c 100644 --- a/packages/babel-preset-css-prop/README.md +++ b/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 + } + ] ] } ``` diff --git a/packages/cache/CHANGELOG.md b/packages/cache/CHANGELOG.md index a2f3254ed..a1df978e0 100644 --- a/packages/cache/CHANGELOG.md +++ b/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 diff --git a/packages/cache/package.json b/packages/cache/package.json index e82185cbb..5ad3ec2a3 100644 --- a/packages/cache/package.json +++ b/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", diff --git a/packages/cache/src/stylis-plugins.js b/packages/cache/src/stylis-plugins.js index 1e8db8c0c..62e5904c1 100644 --- a/packages/cache/src/stylis-plugins.js +++ b/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 diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 862c48049..d30051325 100644 --- a/packages/css/CHANGELOG.md +++ b/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 diff --git a/packages/css/package.json b/packages/css/package.json index a32ceffe6..257fae2c1 100644 --- a/packages/css/package.json +++ b/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" diff --git a/packages/css/test/__snapshots__/inject-global.test.js.snap b/packages/css/test/__snapshots__/inject-global.test.js.snap index bd96806bb..def7a1604 100644 --- a/packages/css/test/__snapshots__/inject-global.test.js.snap +++ b/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; diff --git a/packages/css/test/inject-global.test.js b/packages/css/test/inject-global.test.js index 212c4937d..44e9d0d66 100644 --- a/packages/css/test/inject-global.test.js +++ b/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() + }) }) diff --git a/packages/eslint-plugin/src/rules/syntax-preference.js b/packages/eslint-plugin/src/rules/syntax-preference.js index 60cd65fca..891713a87 100644 --- a/packages/eslint-plugin/src/rules/syntax-preference.js +++ b/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) } } }) diff --git a/packages/eslint-plugin/test/rules/syntax-preference.test.js b/packages/eslint-plugin/test/rules/syntax-preference.test.js index a94c080f0..58e2c9d0d 100644 --- a/packages/eslint-plugin/test/rules/syntax-preference.test.js +++ b/packages/eslint-plugin/test/rules/syntax-preference.test.js @@ -51,6 +51,14 @@ ruleTester.run('syntax-preference (string)', rule, { { code: `const Foo = () =>
`, options: ['string'] + }, + { + code: `css\`color: hotpink;\``, + options: ['string'] + }, + { + code: `css(cls, css\`color: hotpink;\`)`, + options: ['string'] } ], @@ -61,7 +69,7 @@ ruleTester.run('syntax-preference (string)', rule, { errors: [ { message: 'Styles should be written using strings.', - type: 'CallExpression' + type: 'ObjectExpression' } ] }, @@ -71,7 +79,7 @@ ruleTester.run('syntax-preference (string)', rule, { errors: [ { message: 'Styles should be written using strings.', - type: 'CallExpression' + type: 'ObjectExpression' } ] }, @@ -118,6 +126,16 @@ ruleTester.run('syntax-preference (string)', rule, { type: 'ObjectExpression' } ] + }, + { + code: `css(cls, { color: 'hotpink' })`, + options: ['string'], + errors: [ + { + message: 'Styles should be written using strings.', + type: 'ObjectExpression' + } + ] } ] }) @@ -140,6 +158,10 @@ ruleTester.run('syntax-preference (object)', rule, { { code: `const Foo = () =>
`, options: ['object'] + }, + { + code: `const Foo = () =>
`, + options: ['object'] } ], @@ -207,6 +229,20 @@ ruleTester.run('syntax-preference (object)', rule, { type: 'TaggedTemplateExpression' } ] + }, + { + code: `const Foo = () =>
`, + options: ['object'], + errors: [ + { + message: 'Styles should be written using objects.', + type: 'Literal' + }, + { + message: 'Styles should be written using objects.', + type: 'TaggedTemplateExpression' + } + ] } ] }) 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 9d346a208..1bff7dd6b 100644 --- a/packages/is-prop-valid/src/props.js +++ b/packages/is-prop-valid/src/props.js @@ -186,6 +186,11 @@ const props = { autoSave: true, // color is for Safari mask-icon link 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 @@ -199,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 e2110760a..626af2012 100644 --- a/packages/jest/package.json +++ b/packages/jest/package.json @@ -36,8 +36,8 @@ } }, "devDependencies": { - "@emotion/css": "11.0.0", - "@emotion/react": "11.1.1", + "@emotion/css": "11.1.3", + "@emotion/react": "11.1.5", "@types/jest": "^26.0.14", "dtslint": "^0.3.0", "enzyme-to-json": "^3.6.1", diff --git a/packages/memoize/CHANGELOG.md b/packages/memoize/CHANGELOG.md index 860bb3cc2..c50440fd2 100644 --- a/packages/memoize/CHANGELOG.md +++ b/packages/memoize/CHANGELOG.md @@ -1,5 +1,11 @@ # @emotion/memoize +## 0.7.5 + +### Patch Changes + +- [`ee6a673f`](https://github.com/emotion-js/emotion/commit/ee6a673f74e934bf738d5346ddfc7982caa23827) [#2141](https://github.com/emotion-js/emotion/pull/2141) Thanks [@ChALkeR](https://github.com/ChALkeR)! - Fixed an issue with prototype properties not being correctly handled. + ## 0.7.4 ### Patch Changes diff --git a/packages/memoize/package.json b/packages/memoize/package.json index 77907a630..3feaa423f 100644 --- a/packages/memoize/package.json +++ b/packages/memoize/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/memoize", - "version": "0.7.4", + "version": "0.7.5", "description": "emotion's memoize utility", "main": "dist/emotion-memoize.cjs.js", "module": "dist/emotion-memoize.esm.js", diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index 1fa9557ad..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.1", + "@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 eda8ef8b5..ed1faa069 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,39 @@ # @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 + +- [`71ca9be3`](https://github.com/emotion-js/emotion/commit/71ca9be3368ddb0a95ef5b2db7a97c67ab440593) [#2181](https://github.com/emotion-js/emotion/pull/2181) Thanks [@101arrowz](https://github.com/101arrowz)! - Fixed some typing issues with React components with custom generic render functions. + +## 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.1.2 + +### Patch Changes + +- [`3f8bf70e`](https://github.com/emotion-js/emotion/commit/3f8bf70e995267ace1e04b6a97df35ae23902fed) [#2132](https://github.com/emotion-js/emotion/pull/2132) Thanks [@dcastil](https://github.com/dcastil)! - `displayName`s have been added to `Global` and `ClassNames` components so React Developer Tools should display those better now. + +* [`1ee34005`](https://github.com/emotion-js/emotion/commit/1ee34005a5e02c9041b36f73395700f1965388eb) [#2122](https://github.com/emotion-js/emotion/pull/2122) Thanks [@dcastil](https://github.com/dcastil)! - Improved label extraction from the stack traces to handle components with numbers in their names. + +- [`e5843530`](https://github.com/emotion-js/emotion/commit/e58435308d880a69c6ccfde15d745e6c95d3c333) [#2140](https://github.com/emotion-js/emotion/pull/2140) Thanks [@hasparus](https://github.com/hasparus)! - Fixed an issue with `css` prop type not being added to all components that accept a string `className` correctly. + +- Updated dependencies [[`5469d003`](https://github.com/emotion-js/emotion/commit/5469d0034d055a34587e9d05332f6da4d4722b1c)]: + - @emotion/sheet@1.0.1 + ## 11.1.1 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 208597bf5..baf4dbc47 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/react", - "version": "11.1.1", + "version": "11.1.5", "main": "dist/emotion-react.cjs.js", "module": "dist/emotion-react.esm.js", "browser": { @@ -27,9 +27,9 @@ }, "dependencies": { "@babel/runtime": "^7.7.2", - "@emotion/cache": "^11.0.0", + "@emotion/cache": "^11.1.3", "@emotion/serialize": "^1.0.0", - "@emotion/sheet": "^1.0.0", + "@emotion/sheet": "^1.0.1", "@emotion/utils": "^1.0.0", "@emotion/weak-memoize": "^0.2.5", "hoist-non-react-statics": "^3.3.1" @@ -48,10 +48,10 @@ }, "devDependencies": { "@babel/core": "^7.7.2", - "@emotion/css": "11.0.0", + "@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/class-names.js b/packages/react/src/class-names.js index 650028a5d..bb44d02e4 100644 --- a/packages/react/src/class-names.js +++ b/packages/react/src/class-names.js @@ -142,3 +142,7 @@ export const ClassNames: React.AbstractComponent< } return ele }) + +if (process.env.NODE_ENV !== 'production') { + ClassNames.displayName = 'EmotionClassNames' +} diff --git a/packages/react/src/global.js b/packages/react/src/global.js index ffa6b8870..3c76ff0e2 100644 --- a/packages/react/src/global.js +++ b/packages/react/src/global.js @@ -136,3 +136,7 @@ export let Global: React.AbstractComponent< return null }) + +if (process.env.NODE_ENV !== 'production') { + Global.displayName = 'EmotionGlobal' +} 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/react/types/index.d.ts b/packages/react/types/index.d.ts index 43bf6032b..0f3575333 100644 --- a/packages/react/types/index.d.ts +++ b/packages/react/types/index.d.ts @@ -1,5 +1,5 @@ // Definitions by: Junyoung Clare Jang -// TypeScript Version: 3.2 +// TypeScript Version: 3.4 import { EmotionCache } from '@emotion/cache' import { diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts index db09ddcfe..d43bee28c 100644 --- a/packages/react/types/jsx-namespace.d.ts +++ b/packages/react/types/jsx-namespace.d.ts @@ -4,9 +4,9 @@ import { Theme } from './index' type WithConditionalCSSProp

= 'className' extends keyof P ? string extends P['className' & keyof P] - ? P & { css?: Interpolation } - : P - : P + ? { css?: Interpolation } + : {} + : {} // unpack all here to avoid infinite self-referencing when defining our own JSX namespace type ReactJSXElement = JSX.Element diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx index 95ae48b92..520efceb5 100644 --- a/packages/react/types/tests.tsx +++ b/packages/react/types/tests.tsx @@ -231,3 +231,19 @@ const anim1 = keyframes` ? true : false } + +// RMWC-like component test +declare const OtherComponent: { + ( + props: + | React.AllHTMLAttributes + | React.ComponentPropsWithRef, + ref: any + ): JSX.Element + displayName?: string +} +; { + console.log(ev.currentTarget.value) + }} +/> diff --git a/packages/server/package.json b/packages/server/package.json index fc69bc188..bc6835ceb 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -28,8 +28,8 @@ } }, "devDependencies": { - "@emotion/babel-plugin": "11.0.0", - "@emotion/css": "11.0.0", + "@emotion/babel-plugin": "11.1.2", + "@emotion/css": "11.1.3", "@emotion/css-prettifier": "1.0.0", "@types/node": "^10.11.4", "dtslint": "^0.3.0" diff --git a/packages/sheet/CHANGELOG.md b/packages/sheet/CHANGELOG.md index 9fd62e3b6..802b2cc4c 100644 --- a/packages/sheet/CHANGELOG.md +++ b/packages/sheet/CHANGELOG.md @@ -1,5 +1,11 @@ # @emotion/sheet +## 1.0.1 + +### Patch Changes + +- [`5469d003`](https://github.com/emotion-js/emotion/commit/5469d0034d055a34587e9d05332f6da4d4722b1c) [#2149](https://github.com/emotion-js/emotion/pull/2149) Thanks [@Andarist](https://github.com/Andarist)! - Do not log failed rule insertions in the speedy mode for vendor-prefixed pseudo-elements/classes like `::-moz-placeholder`. + ## 1.0.0 ### Major Changes diff --git a/packages/sheet/package.json b/packages/sheet/package.json index 2435af1aa..1d064108e 100644 --- a/packages/sheet/package.json +++ b/packages/sheet/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/sheet", - "version": "1.0.0", + "version": "1.0.1", "description": "emotion's stylesheet", "main": "dist/emotion-sheet.cjs.js", "module": "dist/emotion-sheet.esm.js", diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js index 5e71daf67..768bde0f0 100644 --- a/packages/sheet/src/index.js +++ b/packages/sheet/src/index.js @@ -135,7 +135,12 @@ export class StyleSheet { // the big drawback is that the css won't be editable in devtools sheet.insertRule(rule, sheet.cssRules.length) } catch (e) { - if (process.env.NODE_ENV !== 'production') { + if ( + process.env.NODE_ENV !== 'production' && + !/:(-moz-placeholder|-ms-input-placeholder|-moz-read-write|-moz-read-only){/.test( + rule + ) + ) { console.error( `There was a problem inserting the following rule: "${rule}"`, e 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 b1c8e12c4..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", @@ -12,8 +12,8 @@ }, "dependencies": { "@babel/runtime": "^7.7.2", - "@emotion/babel-plugin": "^11.0.0", - "@emotion/is-prop-valid": "^1.0.0", + "@emotion/babel-plugin": "^11.1.2", + "@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.1", + "@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/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js index 8329fb253..13162e0f6 100644 --- a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js +++ b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js @@ -16,7 +16,7 @@ export const replaceRenderer = ({ setHeadComponents([