main: Stop importing patternfly.css

* Stop importing cockpit's base1/patternfly.css

This is deprecated API and will be dropped at some point, in favor
of projects shipping their own CSS.

Install and import the styles from PF4 now.

* Use webpack based string replacement for removing the font-face rules from PF4

Doing the seddery in Makefile breaks `npm run build`, webpack watching,
and is generally brittle.
Do the font replacement hacking with `string-replace-loader`, which fits into webpack much more nicely.

There is still some potential simplification by not duplicating the
entire scss loader chain.

Co-authored-by: Martin Pitt <martin@piware.de>

Closes #315
This commit is contained in:
Katerina Koukiou 2020-05-28 10:01:31 +02:00 committed by GitHub
parent 8adad16874
commit 96514e279e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 178 additions and 19 deletions

View file

@ -115,6 +115,9 @@ var babel_loader = {
module.exports = {
mode: production ? 'production' : 'development',
resolve: {
modules: [ nodedir ],
},
entry: info.entries,
externals: externals,
output: output,
@ -132,20 +135,63 @@ module.exports = {
use: babel_loader,
test: /\.(js|jsx)$/
},
/* HACK: remove unwanted fonts from PatternFly's css */
{
exclude: /node_modules/,
test: /\.scss$/,
test: /patternfly-4-cockpit.scss$/,
use: [
extract.loader,
{
loader: 'css-loader',
options: { url: false }
options: {
sourceMap: true,
url: false
}
},
{
loader: 'string-replace-loader',
options: {
multiple: [
{
search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
replace: "src:url('fonts/patternfly.woff')format('woff');",
},
{
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
replace: '',
},
]
},
},
{
loader: 'sass-loader',
}
options: {
sourceMap: true,
outputStyle: 'compressed',
},
},
]
}
},
{
test: /\.s?css$/,
exclude: /patternfly-4-cockpit.scss/,
use: [
extract.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'compressed',
},
},
]
},
]
},
plugins: plugins