build: Move stylesheet processing into pkg/lib/build-common.js to enable reusing

There are some quite delibarate hacks there, it worths to export these
so that other projects can keep in sync with cockpit more easily.
This commit is contained in:
Katerina Koukiou 2023-03-27 21:46:55 +02:00 committed by Martin Pitt
parent 37cba5f761
commit 6073b2703a
2 changed files with 43 additions and 34 deletions

View file

@ -107,8 +107,6 @@ async function build() {
// dynamic imports which need node_modules
const copy = (await import('esbuild-plugin-copy')).default;
const esbuild = (await import(useWasm ? 'esbuild-wasm' : 'esbuild')).default;
const sassPlugin = (await import('esbuild-sass-plugin')).sassPlugin;
const replace = (await import('esbuild-plugin-replace')).replace;
const cleanPlugin = (await import('./pkg/lib/esbuild-cleanup-plugin.js')).cleanPlugin;
const cockpitCompressPlugin = (await import('./pkg/lib/esbuild-compress-plugin.js')).cockpitCompressPlugin;
@ -118,6 +116,8 @@ async function build() {
const eslintPlugin = (await import('./pkg/lib/esbuild-eslint-plugin.js')).eslintPlugin;
const stylelintPlugin = (await import('./pkg/lib/esbuild-stylelint-plugin.js')).stylelintPlugin;
const esbuildStylesPlugins = (await import('./pkg/lib/esbuild-common.js')).esbuildStylesPlugins;
const { entryPoints, assetFiles, redhat_fonts } = getFiles(args.onlydir);
const tests = getTestFiles();
const testEntryPoints = tests.map(test => "pkg/" + test + ".js");
@ -130,38 +130,7 @@ async function build() {
...args.no_stylelint ? [] : [stylelintPlugin({ filter: /pkg\/.*\.(css?|scss?)$/ })],
...args.no_eslint ? [] : [eslintPlugin({ filter: /pkg\/.*\.(jsx?|js?)$/ })],
cockpitJSResolvePlugin,
// Redefine grid breakpoints to count with our shell
// See https://github.com/patternfly/patternfly-react/issues/3815 and
// [Redefine grid breakpoints] section in pkg/lib/_global-variables.scss for explanation
replace({
include: /\.css$/,
values: {
'576px': '236px',
'768px': '428px',
'992px': '652px',
'1200px': '876px',
'1450px': '1100px',
}
}),
replace({
include: /DataList.js$/,
values: {
'import stylesGrid': "// HACK: revert when https://github.com/patternfly/patternfly-react/pull/8864 is released",
stylesGrid: 'styles',
}
}),
sassPlugin({
loadPaths: [...nodePaths, 'node_modules'],
quietDeps: true,
async transform(source, resolveDir, path) {
if (path.includes('patternfly-4-cockpit.scss')) {
return source
.replace(/url.*patternfly-icons-fake-path.*;/g, 'url("../base1/fonts/patternfly.woff") format("woff");')
.replace(/@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g, '');
}
return source;
}
}),
...esbuildStylesPlugins
];
const getTime = () => new Date().toTimeString().split(' ')[0];

40
pkg/lib/esbuild-common.js Normal file
View file

@ -0,0 +1,40 @@
import { replace } from 'esbuild-plugin-replace';
import { sassPlugin } from 'esbuild-sass-plugin';
// List of directories to use when resolving import statements
const nodePaths = ['pkg/lib'];
export const esbuildStylesPlugins = [
// Redefine grid breakpoints to count with our shell
// See https://github.com/patternfly/patternfly-react/issues/3815 and
// [Redefine grid breakpoints] section in pkg/lib/_global-variables.scss for explanation
replace({
include: /\.css$/,
values: {
'576px': '236px',
'768px': '428px',
'992px': '652px',
'1200px': '876px',
'1450px': '1100px',
}
}),
replace({
include: /DataList.js$/,
values: {
'import stylesGrid': "// HACK: revert when https://github.com/patternfly/patternfly-react/pull/8864 is released",
stylesGrid: 'styles',
}
}),
sassPlugin({
loadPaths: [...nodePaths, 'node_modules'],
quietDeps: true,
async transform(source, resolveDir, path) {
if (path.includes('patternfly-4-cockpit.scss')) {
return source
.replace(/url.*patternfly-icons-fake-path.*;/g, 'url("../base1/fonts/patternfly.woff") format("woff");')
.replace(/@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g, '');
}
return source;
}
}),
]