Update dependency @cypress/webpack-preprocessor to v6.0.1 (#80217)

* Update dependency @cypress/webpack-preprocessor to v6.0.1

* fix type errors

* restore old checksum for scenes

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

package.json

@@ -81,7 +81,7 @@
     "@betterer/betterer": "5.4.0",
     "@betterer/cli": "5.4.0",
     "@betterer/eslint": "5.4.0",
-    "@cypress/webpack-preprocessor": "6.0.0",
+    "@cypress/webpack-preprocessor": "6.0.1",
     "@emotion/eslint-plugin": "11.11.0",
     "@grafana/eslint-config": "6.0.1",
     "@grafana/eslint-plugin": "link:./packages/grafana-eslint-rules",

packages/grafana-ui/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { css, CSSObject, cx } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 
 import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
@@ -224,7 +224,7 @@ export const getButtonStyles = (props: StyleProps) => {
   };
 };
 
-function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill): CSSObject {
+function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill) {
   let outlineBorderColor = color.border;
   let borderColor = 'transparent';
   let hoverBorderColor = 'transparent';
@@ -293,7 +293,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
 }
 
 function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
-  const disabledStyles: CSSObject = {
+  const disabledStyles = {
     cursor: 'not-allowed',
     boxShadow: 'none',
     color: theme.colors.text.disabled,

packages/grafana-ui/src/components/Select/resetSelectStyles.ts

@@ -13,7 +13,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     groupHeading: () => ({}),
     indicatorsContainer: () => ({}),
     indicatorSeparator: () => ({}),
-    input: function (originalStyles: CSSObjectWithLabel): CSSObjectWithLabel {
+    input: function (originalStyles: CSSObjectWithLabel) {
       return {
         ...originalStyles,
         color: 'inherit',
@@ -37,7 +37,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     multiValueRemove: () => ({}),
     noOptionsMessage: () => ({}),
     option: () => ({}),
-    placeholder: (originalStyles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    placeholder: (originalStyles: CSSObjectWithLabel) => ({
       ...originalStyles,
       color: theme.colors.text.secondary,
     }),

packages/grafana-ui/src/themes/GlobalStyles/elements.ts

@@ -1,4 +1,4 @@
-import { css, CSSObject } from '@emotion/react';
+import { css } from '@emotion/react';
 
 import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
 
@@ -144,7 +144,7 @@ export function getElementStyles(theme: GrafanaTheme2) {
   });
 }
 
-export function getVariantStyles(variant: ThemeTypographyVariant): CSSObject {
+export function getVariantStyles(variant: ThemeTypographyVariant) {
   return {
     margin: 0,
     fontSize: variant.fontSize,

packages/grafana-ui/src/themes/mixins.ts

@@ -1,4 +1,3 @@
-import { CSSObject } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
@@ -55,14 +54,14 @@ export const focusCss = (theme: GrafanaTheme | GrafanaTheme2) => {
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;
 };
 
-export function getMouseFocusStyles(theme: GrafanaTheme | GrafanaTheme2): CSSObject {
+export function getMouseFocusStyles(theme: GrafanaTheme | GrafanaTheme2) {
   return {
     outline: 'none',
     boxShadow: `none`,
   };
 }
 
-export function getFocusStyles(theme: GrafanaTheme2): CSSObject {
+export function getFocusStyles(theme: GrafanaTheme2) {
   return {
     outline: '2px dotted transparent',
     outlineOffset: '2px',
@@ -74,7 +73,7 @@ export function getFocusStyles(theme: GrafanaTheme2): CSSObject {
 }
 
 // max-width is set up based on .grafana-tooltip class that's used in dashboard
-export const getTooltipContainerStyles = (theme: GrafanaTheme2): CSSObject => ({
+export const getTooltipContainerStyles = (theme: GrafanaTheme2) => ({
   overflow: 'hidden',
   background: theme.colors.background.secondary,
   boxShadow: theme.shadows.z2,

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx

@@ -1,4 +1,4 @@
-import { css, CSSObject } from '@emotion/css';
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -25,12 +25,11 @@ export function OptionsPaneItemOverrides({ overrides }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const common: CSSObject = {
+  const common = {
     width: 8,
     height: 8,
     borderRadius: theme.shape.radius.circle,
     marginLeft: theme.spacing(1),
-    position: 'relative',
     top: '-1px',
   };
 
@@ -40,10 +39,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     rule: css({
       ...common,
+      position: 'relative',
       backgroundColor: theme.colors.primary.main,
     }),
     data: css({
       ...common,
+      position: 'relative',
       backgroundColor: theme.colors.warning.main,
     }),
   };