[Emotion] Convert final EuiDataGrid cell styles (Part 5)

packages/eui/.storybook/loki.ts

@@ -25,7 +25,7 @@ export const LOKI_SELECTORS = {
   /**
    * Portal element content selector
    */
-  portal: '#storybook-root',
+  portal: '#storybook-root > *',
 } as const;
 
 /**

packages/eui/.storybook/preview.tsx

@@ -35,11 +35,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
  */

packages/eui/changelogs/upcoming/8013.md

@@ -0,0 +1,7 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid`'s row, header, and footer cells to Emotion; Removed the following Sass variables and mixins:
+  - `$euiDataGridColumnResizerWidth`
+  - `@euiDataGridRowCell`
+  - `@euiDataGridHeaderCell`
+  - `@euiDataGridFooterCell`

packages/eui/cypress/support/component.tsx

@@ -30,5 +30,3 @@ Cypress.on('uncaught:exception', (err) => {
     return false;
   }
 });
-
-require(THEME_IMPORT); // defined by DefinePlugin in the cypress webpack config

packages/eui/cypress/webpack.config.js

@@ -10,8 +10,6 @@
 
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 
-const THEME_IMPORT = `'../../dist/eui_theme_${process.env.THEME}.css'`;
-
 const alias = {};
 const reactVersion = process.env.REACT_VERSION || '18';
 
@@ -72,7 +70,6 @@ module.exports = {
     }),
 
     new DefinePlugin({
-      THEME_IMPORT, // allow cypress/support/component.tsx to require the correct css file
       'process.env.REACT_VERSION': JSON.stringify(reactVersion),
     }),
   ],

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',

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**

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": {

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