From 323aaf9658bdc3e44fe96509adc2057ab86ca68b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 10 Sep 2024 13:00:42 -0700
Subject: [PATCH] [tech debt] Address various Emotion component post-conversion
 TODOs

---
 packages/eui/.storybook/preview.tsx                  |  5 -----
 packages/eui/generator-eui/changelog/index.js        |  6 ------
 .../generator-eui/changelog/templates/changelog.md   |  5 -----
 packages/eui/package.json                            |  4 ++--
 packages/eui/scripts/test-cypress.js                 | 12 ------------
 5 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx
index d8be14a6169..f4cd8e3fdd1 100644
--- a/packages/eui/.storybook/preview.tsx
+++ b/packages/eui/.storybook/preview.tsx
@@ -34,11 +34,6 @@ appendIconComponentCache(iconCache);
 import { EuiProvider } from '../src/components/provider';
 import { writingModeStyles } from './writing_mode.styles';
 
-// Import light theme for components still using Sass styling
-// TODO: Remove this import and the `yarn compile-scss &&` command
-// once all EUI components are converted to Emotion
-import '../dist/eui_theme_light.css';
-
 /**
  * Ensure that any provider errors throw & warn us early
  */
diff --git a/packages/eui/generator-eui/changelog/index.js b/packages/eui/generator-eui/changelog/index.js
index c456a47e085..6aa42a260d0 100644
--- a/packages/eui/generator-eui/changelog/index.js
+++ b/packages/eui/generator-eui/changelog/index.js
@@ -53,12 +53,6 @@ module.exports = class extends Generator {
         type: 'confirm',
         default: false,
       },
-      {
-        message: 'Does your PR contain Emotion conversions?',
-        name: 'emotionConversions',
-        type: 'confirm',
-        default: false,
-      },
       {
         message: 'Does your PR contain dependency updates?',
         name: 'dependencyUpdates',
diff --git a/packages/eui/generator-eui/changelog/templates/changelog.md b/packages/eui/generator-eui/changelog/templates/changelog.md
index 42b0f7992cb..1472557891f 100644
--- a/packages/eui/generator-eui/changelog/templates/changelog.md
+++ b/packages/eui/generator-eui/changelog/templates/changelog.md
@@ -25,11 +25,6 @@
 
 - Removed ...
 
-<%_ } -%>
-<%_ if (emotionConversions) { -%>
-**CSS-in-JS conversions**
-
-- Converted `EuiComponent` to Emotion; Removed `$euiComponentSassVariable`
 <%_ } -%>
 <%_ if (dependencyUpdates) { -%>
 **Dependency updates**
diff --git a/packages/eui/package.json b/packages/eui/package.json
index d8a248d9fed..7278d0edb40 100644
--- a/packages/eui/package.json
+++ b/packages/eui/package.json
@@ -42,8 +42,8 @@
     "release": "node ./scripts/release.js",
     "release-backport": "node ./scripts/release.js --type=backport",
     "release-rc": "node ./scripts/release.js --type=prerelease",
-    "storybook": "yarn compile-scss && storybook dev -p 6006",
-    "build-storybook": "yarn compile-scss && storybook build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "pre-push": "yarn test-staged"
   },
   "repository": {
diff --git a/packages/eui/scripts/test-cypress.js b/packages/eui/scripts/test-cypress.js
index e0cbde1c7f0..7fe30e1276a 100644
--- a/packages/eui/scripts/test-cypress.js
+++ b/packages/eui/scripts/test-cypress.js
@@ -18,7 +18,6 @@ const argv = yargs(hideBin(process.argv))
   })
   .options({
     'node-options': { type: 'string', default: '' },
-    'skip-css': { type: 'boolean' },
     dev: { type: 'boolean' },
     theme: { type: 'string', default: 'light', choices: ['light', 'dark'] },
     a11y: { type: 'boolean' },
@@ -32,23 +31,12 @@ const argv = yargs(hideBin(process.argv))
 const nodeOptions = argv['node-options'];
 const isDev = argv.hasOwnProperty('dev');
 const isA11y = argv.hasOwnProperty('a11y');
-const skipScss = argv.hasOwnProperty('skip-css');
 const theme = argv.theme;
 const reactVersion = argv['react-version'];
 
 const info = chalk.white;
 const log = chalk.grey;
 
-// compile scss -> css so tests can render correctly
-if (!skipScss) {
-  console.log(info('Compiling SCSS'));
-  execSync(`TARGET_THEME=${theme} yarn compile-scss`, {
-    stdio: 'inherit',
-  });
-} else {
-  console.log(info('Not compiling SCSS, disabled by --skip-css'));
-}
-
 // compile dev and a11y options for how to run tests (headless, local UI)
 // and whether to run component tests or axe checks.
 const testParams = isDev