From 311644bebbbe489336abba286cda58c3ce0fcc48 Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Thu, 15 Jun 2023 15:35:17 +0200
Subject: [PATCH] fix(css): Avoid importing palette.styl and utils.styl in each
 css of

legacy component. Prefer to import palette.styl in utils.styl to avoid
duplication, and to use not hashed css.
---
 react/CozyTheme/index.jsx                          | 12 +++++-------
 react/Dialog/index.jsx                             |  6 +-----
 .../__snapshots__/SquareAppIcon.spec.js.snap       | 14 +++++++-------
 react/utilities.js                                 |  5 -----
 stylus/cozy-ui/utils.styl                          |  1 +
 5 files changed, 14 insertions(+), 24 deletions(-)
 delete mode 100644 react/utilities.js

diff --git a/react/CozyTheme/index.jsx b/react/CozyTheme/index.jsx
index 9e1bc0fefc..7c8eedc0a7 100644
--- a/react/CozyTheme/index.jsx
+++ b/react/CozyTheme/index.jsx
@@ -2,19 +2,17 @@ import React, { createContext, useContext } from 'react'
 import cx from 'classnames'
 
 import MuiCozyTheme from '../MuiCozyTheme'
-import themesStyles from '../../stylus/settings/palette.styl'
 
 export const CozyThemeContext = createContext()
 
-const allStyles = {
-  'CozyTheme--normal': themesStyles['CozyTheme--normal'],
-  'CozyTheme--inverted': themesStyles['CozyTheme--inverted']
-}
-
 const CozyTheme = ({ variant, children, className }) => (
   <CozyThemeContext.Provider value={variant}>
     <MuiCozyTheme variant={variant}>
-      <div className={cx(className, allStyles[`CozyTheme--${variant}`])}>
+      <div
+        className={cx(className, {
+          [`CozyTheme--${variant}`]: Boolean(variant)
+        })}
+      >
         {children}
       </div>
     </MuiCozyTheme>
diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
index 8e9ae2b7b8..0ea9b6d6b3 100644
--- a/react/Dialog/index.jsx
+++ b/react/Dialog/index.jsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
 
-import themesStyles from '../../stylus/settings/palette.styl'
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
 import { useDialogEffects } from './DialogEffects'
@@ -29,10 +28,7 @@ const Dialog = props => {
 
   return (
     <Wrapper>
-      <MUIDialog
-        className={themesStyles[`CozyTheme--${cozyTheme}`]}
-        {...props}
-      />
+      <MUIDialog className={`CozyTheme--${cozyTheme}`} {...props} />
     </Wrapper>
   )
 }
diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
index 0abcaff00b..bafed3e5f8 100644
--- a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
+++ b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
@@ -6,7 +6,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-40"
@@ -55,7 +55,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-9"
@@ -104,7 +104,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-71"
@@ -207,7 +207,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-164"
@@ -317,7 +317,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-102"
@@ -366,7 +366,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-226"
@@ -415,7 +415,7 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
   data-testid="square-app-icon"
 >
   <div
-    class="palette__CozyTheme--normal___3UmMb"
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-318"
diff --git a/react/utilities.js b/react/utilities.js
deleted file mode 100644
index 224ca39a41..0000000000
--- a/react/utilities.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-disable no-unused-vars */
-
-// Special file for utilities to be included in the transpiled stylesheet
-import palette from '../stylus/utilities/palette.styl' // 130k
-import utilies from '../stylus/cozy-ui/utils.styl'
diff --git a/stylus/cozy-ui/utils.styl b/stylus/cozy-ui/utils.styl
index 1ba128aa8e..f3fd2017ed 100644
--- a/stylus/cozy-ui/utils.styl
+++ b/stylus/cozy-ui/utils.styl
@@ -2,3 +2,4 @@
   CSS utility classes only
 \*------------------------------------*/
 @require '../utilities/*'
+@require '../settings/palette.styl'