[8.x] Replace `style` with `css` prop in CSP pack…

…age (#202013) (#202560)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Replace `style` with `css` prop in CSP package
(#202013)](#202013)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alberto
Blázquez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-02T17:58:18Z","message":"Replace
`style` with `css` prop in CSP package (#202013)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Default Edge</summary>\r\n<img
width=\"1028\" alt=\"Screenshot 2024-12-02 at 16 27
47\"\r\nsrc=\"https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Popovers</summary>\r\n<img width=\"175\"
alt=\"Screenshot 2024-12-02 at 16 27
57\"\r\nsrc=\"https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Stacked Edge Cases</summary>\r\n<img
width=\"1319\" alt=\"Screenshot 2024-12-02 at 16 28
03\"\r\nsrc=\"https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following
conditions. \r\n\r\nReviewers should verify this PR satisfies this list
as well.\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\n- Minor risk with low impact and severity:\r\n-
Only risk is CSP graph nodes showing with a different background
and\r\nborder","sha":"a32d9c782cefdb16c064f947ca10e49f3eb32cde","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","backport:version","v8.18.0"],"title":"Replace
`style` with `css` prop in CSP
package","number":202013,"url":"https://github.com/elastic/kibana/pull/202013","mergeCommit":{"message":"Replace
`style` with `css` prop in CSP package (#202013)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Default Edge</summary>\r\n<img
width=\"1028\" alt=\"Screenshot 2024-12-02 at 16 27
47\"\r\nsrc=\"https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Popovers</summary>\r\n<img width=\"175\"
alt=\"Screenshot 2024-12-02 at 16 27
57\"\r\nsrc=\"https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Stacked Edge Cases</summary>\r\n<img
width=\"1319\" alt=\"Screenshot 2024-12-02 at 16 28
03\"\r\nsrc=\"https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following
conditions. \r\n\r\nReviewers should verify this PR satisfies this list
as well.\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\n- Minor risk with low impact and severity:\r\n-
Only risk is CSP graph nodes showing with a different background
and\r\nborder","sha":"a32d9c782cefdb16c064f947ca10e49f3eb32cde"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202013","number":202013,"mergeCommit":{"message":"Replace
`style` with `css` prop in CSP package (#202013)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Default Edge</summary>\r\n<img
width=\"1028\" alt=\"Screenshot 2024-12-02 at 16 27
47\"\r\nsrc=\"https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Popovers</summary>\r\n<img width=\"175\"
alt=\"Screenshot 2024-12-02 at 16 27
57\"\r\nsrc=\"https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d\">\r\n\r\n</details>
\r\n\r\n<details><summary>Graph Stacked Edge Cases</summary>\r\n<img
width=\"1319\" alt=\"Screenshot 2024-12-02 at 16 28
03\"\r\nsrc=\"https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following
conditions. \r\n\r\nReviewers should verify this PR satisfies this list
as well.\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\n- Minor risk with low impact and severity:\r\n-
Only risk is CSP graph nodes showing with a different background
and\r\nborder","sha":"a32d9c782cefdb16c064f947ca10e49f3eb32cde"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alberto Blázquez <[email protected]>

x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx

@@ -49,6 +49,8 @@ export function DefaultEdge({
         path={edgePath}
         style={{
           stroke: euiTheme.colors[color],
+        }}
+        css={{
           strokeDasharray: '2,2',
         }}
         markerEnd={

x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx

@@ -128,7 +128,7 @@ export const SvgDefsMarker = () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <svg css={{ position: 'absolute', width: 0, height: 0 }}>
       <defs>
         <Marker id="primary" color={euiTheme.colors.primary} />
         <Marker id="danger" color={euiTheme.colors.danger} />

x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx

@@ -16,7 +16,7 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
     <>
       <NodeResizeControl
         position="right"
-        style={{ borderColor: 'transparent', background: 'transparent' }}
+        css={{ borderColor: 'transparent', background: 'transparent' }}
       >
         <Handle
           type="target"

x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx

@@ -177,7 +177,7 @@ export const NodeIcon = ({ icon, color, x, y }: NodeIconProps) => {
   return (
     <foreignObject x={x} y={y} width="50" height="50">
       <div
-        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
+        css={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
       >
         <EuiIcon type={getSpanIcon(icon) ?? icon} size="l" color={color ?? 'primary'} />
       </div>