components: Restrict imports of @emotion/css (#33051)

* Add @emotion/css to restricted imports list

* Temporarily disable no-restricted-imports for @emotion/css

.eslintrc.js

@@ -96,6 +96,11 @@ module.exports = {
 						message:
 							'`puppeteer-testing-library` is still experimental.',
 					},
+					{
+						name: '@emotion/css',
+						message:
+							'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support',
+					},
 				],
 			},
 		],

packages/components/src/base-field/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/base-field/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/card/card-body/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/card-divider/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/card-footer/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/card-header/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/card-media/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/card/component.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/card/card/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/card/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/divider/component.tsx

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';

packages/components/src/divider/styles.ts

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/elevation/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 import { isNil } from 'lodash';
 

packages/components/src/elevation/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Elevation = css`

packages/components/src/flex/flex-item/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**

packages/components/src/flex/flex/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**

packages/components/src/flex/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Flex = css`

packages/components/src/grid/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**

packages/components/src/scrollable/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/scrollable/styles.js

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
+
 /**
  * Internal dependencies
  */

packages/components/src/spacer/hook.ts

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**

packages/components/src/surface/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/surface/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/text/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 import { isPlainObject } from 'lodash';
 

packages/components/src/text/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/truncate/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**

packages/components/src/truncate/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Truncate = css`

packages/components/src/ui/context/use-context-system.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/control-group/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/control-group/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const first = css`

packages/components/src/ui/control-label/hook.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/control-label/styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/ui/form-group/form-group-styles.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const FormGroup = css`

packages/components/src/ui/form-group/use-form-group.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/item-group/styles.ts

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**

packages/components/src/ui/item-group/use-item-group.ts

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/item-group/use-item.ts

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**

packages/components/src/ui/popover/content.js

@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Popover as ReakitPopover } from 'reakit';