Skip to content

[Emotion] Delete distributed *.css files #8045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 4 commits into from
Sep 30, 2024
Merged

[Emotion] Delete distributed *.css files #8045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
372635f
Remove compiled `dist/*.css` files from build
cee-chen Sep 26, 2024
e90ee14
Delete EUI+ CSS import
cee-chen Sep 26, 2024
750278e
Remove CSS files from Cypress webpack config
cee-chen Sep 26, 2024
8146c37
changelog
cee-chen Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/docusaurus-theme/src/theme/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 8 additions & 0 deletions packages/eui/changelogs/upcoming/8045.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
1 change: 0 additions & 1 deletion packages/eui/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 0 additions & 13 deletions packages/eui/cypress/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
95 changes: 0 additions & 95 deletions packages/eui/scripts/compile-scss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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',
});
Expand Down