[Emotion] Delete distributed *.css files (#8045)

elastic · Sep 30, 2024 · b7b8f1d · b7b8f1d
1 parent 84a92d0
commit b7b8f1d
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 110 deletions.
diff --git a/packages/docusaurus-theme/src/theme/Root.tsx b/packages/docusaurus-theme/src/theme/Root.tsx
@@ -16,7 +16,6 @@ import Head from '@docusaurus/Head';
 import { Props } from '@theme/Root';
 import { css, Global } from '@emotion/react';
 import { useEuiTheme } from '@elastic/eui';
-import '@elastic/eui/dist/eui_theme_light.css';
 
 import { AppThemeProvider } from '../components/theme_context';
 import { getGlobalStyles } from './Root.styles';

diff --git a/packages/eui/changelogs/upcoming/8045.md b/packages/eui/changelogs/upcoming/8045.md
@@ -0,0 +1,8 @@
+**Breaking changes**
+
+- Removed the following exported `.css` files:
+  - `@elastic/eui/dist/eui_theme_light.css`
+  - `@elastic/eui/dist/eui_theme_light.min.css`
+  - `@elastic/eui/dist/eui_theme_dark.css`
+  - `@elastic/eui/dist/eui_theme_dark.min.css`
+- All EUI components are now on CSS-in-JS. A CSS file/import in consuming applications is no longer needed, and is safe to remove.
diff --git a/packages/eui/cypress/support/component-index.html b/packages/eui/cypress/support/component-index.html
@@ -5,7 +5,6 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <meta name="css-styles">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
   <title>Components App</title>
 </head>

diff --git a/packages/eui/cypress/webpack.config.js b/packages/eui/cypress/webpack.config.js
@@ -47,19 +47,6 @@ module.exports = {
           plugins: ['istanbul'],
         },
       },
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-            options: {
-              insert: 'meta[name="css-styles"]',
-            },
-          },
-          'css-loader',
-        ],
-        exclude: /node_modules/,
-      },
     ],
     strictExportPresence: false,
   },

diff --git a/packages/eui/scripts/compile-scss.js b/packages/eui/scripts/compile-scss.js
@@ -1,73 +1,14 @@
 const path = require('path');
 const util = require('util');
 const fs = require('fs');
-const globModule = require('glob');
 const copyFilePromise = util.promisify(fs.copyFile);
 
 const chalk = require('chalk');
-const postcss = require('postcss');
-const sass = require('sass');
-
-const postcssConfiguration = require('../postcss.config.js');
-
-const targetTheme = process.env['TARGET_THEME'];
-
-const writeFile = util.promisify(fs.writeFile);
-const mkdir = util.promisify(fs.mkdir);
-const glob = util.promisify(globModule);
-
-const postcssConfigurationWithMinification = {
-  ...postcssConfiguration,
-  plugins: [
-    ...postcssConfiguration.plugins,
-    require('cssnano')({ preset: 'default' }),
-  ],
-};
 
 async function compileScssFiles({
-  sourcePattern,
   destinationDirectory,
   docsVariablesDirectory,
 }) {
-  try {
-    await mkdir(destinationDirectory);
-  } catch (err) {
-    if (err.code !== 'EEXIST') {
-      throw err;
-    }
-  }
-
-  const inputFilenames = (await glob(sourcePattern, undefined)).filter(
-    (filename) => {
-      if (targetTheme == null) return true;
-      return filename === `src/themes/amsterdam/theme_${targetTheme}.scss`;
-    }
-  );
-
-  await Promise.all(
-    inputFilenames.map(async (inputFilename) => {
-      console.log(chalk`{cyan …} Compiling {gray ${inputFilename}}`);
-
-      try {
-        const { name } = path.parse(inputFilename);
-        const outputFilenames = await compileScssFile({
-          inputFilename,
-          outputCssFilename: path.join(destinationDirectory, `eui_${name}.css`),
-        });
-
-        console.log(
-          chalk`{green ✔} Finished compiling {gray ${inputFilename}} to ${outputFilenames
-            .map((filename) => chalk.gray(filename))
-            .join(', ')}`
-        );
-      } catch (error) {
-        console.log(
-          chalk`{red ✗} Failed to compile {gray ${inputFilename}} with ${error.stack}`
-        );
-      }
-    })
-  );
-
   // Copy static JSON Sass var files from src-docs/src/views/theme/_json to dist
   const jsonFilesToCopy = [
     'eui_theme_dark.json',
@@ -90,44 +31,8 @@ async function compileScssFiles({
   );
 }
 
-async function compileScssFile({ inputFilename, outputCssFilename }) {
-  const outputCssMinifiedFilename = outputCssFilename.replace(
-    /\.css$/,
-    '.min.css'
-  );
-
-  const { css: renderedCss } = sass.renderSync({
-    file: inputFilename,
-    outFile: outputCssFilename,
-    logger: sass.Logger.silent, // Silence warnings about division - we won't be on Sass for much longer
-  });
-
-  const { css: postprocessedCss } = await postcss(postcssConfiguration).process(
-    renderedCss,
-    {
-      from: outputCssFilename,
-      to: outputCssFilename,
-    }
-  );
-
-  const { css: postprocessedMinifiedCss } = await postcss(
-    postcssConfigurationWithMinification
-  ).process(renderedCss, {
-    from: outputCssFilename,
-    to: outputCssMinifiedFilename,
-  });
-
-  await Promise.all([
-    writeFile(outputCssFilename, postprocessedCss),
-    writeFile(outputCssMinifiedFilename, postprocessedMinifiedCss),
-  ]);
-
-  return [outputCssFilename, outputCssMinifiedFilename];
-}
-
 if (require.main === module) {
   compileScssFiles({
-    sourcePattern: path.join('src/themes/amsterdam', 'theme_*.scss'),
     destinationDirectory: 'dist',
     docsVariablesDirectory: 'src-docs/src/views/theme/_json',
   });