From 27a6f7f3c1998872471e3c0d6c9990dcf14c8616 Mon Sep 17 00:00:00 2001 From: Katerina Koukiou Date: Tue, 9 Jun 2020 14:52:03 +0200 Subject: [PATCH] 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. Follow https://github.com/cockpit-project/starter-kit/blob/master/webpack.config.js approach on how to use PF CSS. Closes #96 --- lib/patternfly/_fonts.scss | 36 + lib/patternfly/patternfly-4-cockpit.scss | 15 + lib/patternfly/patternfly-cockpit.scss | 11 + .../patternfly-overrides-variables.scss | 87 ++ lib/patternfly/patternfly-overrides.scss | 753 ++++++++++++++++++ package.json | 6 +- src/app.js | 2 + src/index.html | 1 - webpack.config.js | 71 +- 9 files changed, 976 insertions(+), 6 deletions(-) create mode 100644 lib/patternfly/_fonts.scss create mode 100644 lib/patternfly/patternfly-4-cockpit.scss create mode 100644 lib/patternfly/patternfly-cockpit.scss create mode 100644 lib/patternfly/patternfly-overrides-variables.scss create mode 100644 lib/patternfly/patternfly-overrides.scss diff --git a/lib/patternfly/_fonts.scss b/lib/patternfly/_fonts.scss new file mode 100644 index 00000000..b3cb18a0 --- /dev/null +++ b/lib/patternfly/_fonts.scss @@ -0,0 +1,36 @@ +/* + * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/_fonts.scss + */ + +@mixin printRedHatFont( +$weightValue: 400, +$weightName: "Regular", +$familyName: "RedHatText", +$style: "normal", +$relative: true +) { + $filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName; + @font-face { + font-family: $familyName; + src: url('#{$filePath}.woff2') format('woff2'); + font-style: #{$style}; + font-weight: $weightValue; + text-rendering: optimizeLegibility; + } +} + +@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay"); +@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay"); +@include printRedHatFont(300, "Black", $familyName: "RedHatDisplay"); +@include printRedHatFont(300, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay"); +@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay"); +@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay"); +@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay"); +@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay"); + +@include printRedHatFont(300, "Bold"); +@include printRedHatFont(300, "BoldItalic", $style: "italic"); +@include printRedHatFont(300, "Italic"); +@include printRedHatFont(700, "Medium"); +@include printRedHatFont(700, "MediumItalic", $style: "italic"); +@include printRedHatFont(400, "Regular"); diff --git a/lib/patternfly/patternfly-4-cockpit.scss b/lib/patternfly/patternfly-4-cockpit.scss new file mode 100644 index 00000000..476c8982 --- /dev/null +++ b/lib/patternfly/patternfly-4-cockpit.scss @@ -0,0 +1,15 @@ +/* + * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-4-cockpit.scss + */ + +/* Set fake font and icon path variables - we are going to indentify these through + * patternfly.sed and remove the relevant font-face declarations + */ +$pf-global--font-path: 'patternfly-fonts-fake-path'; +$pf-global--fonticon-path: 'patternfly-icons-fake-path'; +$pf-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free + +@import '~@patternfly/patternfly/patternfly-base.scss'; + +/* Import our own fonts since the PF4 font-face rules are filtered out with patternfly.sed */ +@import "./fonts"; diff --git a/lib/patternfly/patternfly-cockpit.scss b/lib/patternfly/patternfly-cockpit.scss new file mode 100644 index 00000000..9473708d --- /dev/null +++ b/lib/patternfly/patternfly-cockpit.scss @@ -0,0 +1,11 @@ +/* + * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-cockpit.scss + */ + +$icon-font-path: 'patternfly-icons-fake-path/'; +$font-path: 'patternfly-fonts-fake-path/'; + +@import "./patternfly-overrides-variables"; +@import "~patternfly/dist/sass/patternfly"; +@import "./patternfly-4-cockpit.scss"; +@import "./patternfly-overrides.scss"; diff --git a/lib/patternfly/patternfly-overrides-variables.scss b/lib/patternfly/patternfly-overrides-variables.scss new file mode 100644 index 00000000..9696c84b --- /dev/null +++ b/lib/patternfly/patternfly-overrides-variables.scss @@ -0,0 +1,87 @@ +/* + * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-overrides-variables.scss + */ + +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000; +$gray-darker: lighten($gray-base, 13.5%); // #222 +$gray-dark: lighten($gray-base, 20%); // #333 +$gray: lighten($gray-base, 33.5%); // #555 +$gray-light: lighten($gray-base, 46.7%); // #777 +$gray-lighter: lighten($gray-base, 93.5%); // #eee + +$brand-primary: #06c; +$brand-success: #92d400; +$brand-info: #73bcf7; +$brand-warning: #f0ab00; +$brand-danger: #c9190b; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +$body-bg: #fafafa; +//** Global text color on ``. +$text-color: #151515; + + +$navbar-pf-vertical-bg-color: $text-color; + +//** Global textual link color. +//$link-color: var(--pf-global--link--Color); +//** Link hover color set via `darken()` function. +//$link-hover-color: var(--pf-global--link--Color--hover); +$link-color: #06c; +$link-hover-color: #004080; +//** Link hover decoration. +$link-hover-decoration: underline; + +//** Global color for active items (e.g., navs or dropdowns). +$component-active-color: var(--pf-global--active-color--100); +//** Global background color for active items (e.g., navs or dropdowns). +$component-active-bg: $brand-primary; + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +$btn-font-weight: normal; + +$btn-default-color: $brand-primary; +$btn-default-bg: #fff; +$btn-default-border: $brand-primary; + +$btn-primary-color: #fff; +$btn-primary-bg: $brand-primary; +$btn-primary-border: $brand-primary; + +$btn-success-color: #fff; +$btn-success-bg: $brand-success; +$btn-success-border: $btn-success-bg; + +$btn-info-color: #fff; +$btn-info-bg: $brand-info; +$btn-info-border: $btn-info-bg; + +$btn-warning-color: #fff; +$btn-warning-bg: $brand-warning; +$btn-warning-border: $btn-warning-bg; + +$btn-danger-color: #fff; +$btn-danger-bg: $brand-danger; +$btn-danger-border: $btn-danger-bg; + +$btn-link-disabled-color: $gray-light; + +$line-height-base: 1.5; +$font-size-base : 16px; diff --git a/lib/patternfly/patternfly-overrides.scss b/lib/patternfly/patternfly-overrides.scss new file mode 100644 index 00000000..ad5fb792 --- /dev/null +++ b/lib/patternfly/patternfly-overrides.scss @@ -0,0 +1,753 @@ +/* + * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-overrides.scss + */ + +// Global Cockpit overrides for PatternFly variables + +// Fonts +$font-family-base: "RedHatText", "Open Sans", Helvetica, Arial, sans-serif; +$font-family-mono: SFMono-Regular, menlo, monaco, consolas, "Liberation Mono", Courier New, monospace; + +// Resize headings +h1, h2, h3, h4, h5, h6 { + line-height: var(--pf-global--LineHeight--sm); + font-family: var(--pf-global--FontFamily--redhatfont--heading--sans-serif); + + .breadcrumb + & { + // Vertically align contents of headings directly following breadcrumbs + display: flex; + align-items: baseline; + } +} + +h1 { + font-size: var(--pf-global--FontSize--4xl); +} + +h2 { + font-size: var(--pf-global--FontSize--3xl); +} + +h3 { + font-size: var(--pf-global--FontSize--2xl); +} + +h4 { + font-size: var(--pf-global--FontSize--xl); +} + +h4 { + font-size: var(--pf-global--FontSize--lg); +} + +// Restyle inputs & dropdowns +.input-group-addon, +.bootstrap-select.btn-group .btn, +.content-header-extra .dropdown-toggle, +.dropdown-toggle, +.form-control:not(.ct-select):not(.rbt-input):not(select) { + background-image: none !important; +} + +.input-group-addon, +.bootstrap-select.btn-group .btn, +.content-header-extra .dropdown-toggle, +.dropdown-toggle, +.form-control:not(.ct-select) { + border-radius: 3px; + border-color: var(--pf-global--BorderColor--300); + border-bottom-color: var(--pf-global--Color--200); + color: var(--pf-global--Color--100); + box-shadow: none !important; + min-height: 2.25rem; + + &:not(.bootstrap-select):not(.dropdown-form-control) { + padding: 1px 0.5rem; + } + + .fa-caret-down { + align-self: center; + + &::before { + content: "\f0d7"; + } + } + + &::placeholder { + color: var(--pf-global--Color--dark-200); + font-style: normal; + } + + &:active, &:focus, &:hover { + border-color: var(--pf-global--BorderColor--300); + border-bottom-color: var(--pf-global--primary-color--100); + color: var(--pf-global--Color--100); + } + + &:focus { + // Take 1px from the padding and add it to the border + padding-bottom: 0; + border-bottom-width: 2px; + } + + &[aria-disabled=true], + &:disabled { + background-color: var(--pf-global--disabled-color--300); + border-color: var(--pf-global--disabled-color--300); + color: var(--pf-global--disabled-color--100); + cursor: not-allowed; + } + + .has-error &, + &.has-error { + position: relative; + + &, &:hover, &:focus { + border-color: var(--pf-global--BorderColor--300); + border-bottom: 2px solid var(--pf-global--danger-color--100); + } + } +} + +// Truncate text in Cockpit/PF3 dropdowns (when necessary) +.dropdown-toggle > span { + overflow: hidden; + text-overflow: ellipsis; +} + +// Fix split dropdowns +.input-group:not(.combobox-with-reset){ + display: inline-flex; + + .combobox-container & { + width: 100%; + } + + > .form-control { + display: flex; + flex: auto; + } + + > .input-group-addon, + > .dropdown, + > .dropdown-toggle { + display: flex; + width: auto; + align-items: stretch; + } + + > .input-group-btn { + width: auto; + + > .btn { + min-width: 2.5rem; + } + } +} + +// Select dropdowns in Composer & typeahead find +.rbt-input.form-control, +select.form-control { + --dropdown-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23151515' d='M18.804 1h8.392c.58 0 .87.701.46 1.112L23.46 6.31a.653.653 0 0 1-.922 0l-4.194-4.197A.651.651 0 0 1 18.805 1z'/%3E%3C/svg%3E"); + --dropdown-background: var(--pf-global--BackgroundColor--100); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--dropdown-image) no-repeat 100% 50%, var(--dropdown-background) !important; + padding-right: 2.5em !important; +} + +// Adjust typeahead find style +.rbt { + &-input { + // Support typehead hints + &-hint { + // Stretch the hint and its input child 100% tall + &, + > input { + height: 100%; + } + + // Shave off the border and padding, as these misalign the elemnt + // (as this widget uses inline styles (ugh!), we _have to_ use !important) + > input { + border-width: 0 1px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + } + } + + // Adjust spinner position + &-aux { + right: 2rem !important; + } +} + +// Adjust dropdown menus +.dropdown-menu { + > li { + padding: 0; + + > a { + padding: 0.5rem 1rem; + } + + &:not(.disabled) > a { + color: var(--pf-global--Color--100); + + &:active, + &:focus, + &:hover { + background-color: var(--pf-global--BackgroundColor--light-300); + border-color: var(--pf-global--BackgroundColor--light-300); + } + + } + + &.active > a, + > a:active { + // PF3 reverts the active color with an !important + // so we also use an !important here to override it + color: var(--pf-global--Color--100) !important; + } + + &.active > a { + // PF3 also modifies these colors with an !important + &, + &:active, + &:focus, + &:hover { + color: var(--pf-global--Color--100) !important; + background-color: var(--pf-global--BackgroundColor--light-300) !important; + border-color: var(--pf-global--BackgroundColor--light-300) !important; + } + } + + &.selected > a { + color: var(--pf-global--Color--100); + background-color: var(--pf-global--BackgroundColor--light-300); + border-color: var(--pf-global--BackgroundColor--light-300); + } + } + + // Stretch dropdown menus to at least the width of the dropdown + .dropdown > & { + min-width: 100%; + } +} + +// Restyle buttons +.pagination a[role=button], +.btn { + padding: 0.375rem 1rem; + transition: background 0.3s, border 0.3s, color 0.3s; + + &:not(.dropdown-toggle):not(.dropdown):not(.bootstrap-select):not(.ct-select) { + background-image: none !important; + border-radius: 3px; + + &:not(:active):not(:focus):not(:hover) { + box-shadow: none !important; + } + + &:not(:disabled):not([aria-disabled=true]):not(.btn-link) { + &:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) { + &:active, &:focus, &:hover { + border-color: var(--pf-global--primary-color--100); + box-shadow: inset 0 0 0 1px var(--pf-global--primary-color--100); + } + } + } + + &.btn-primary { + &:active, &:focus, &:hover { + background-color: var(--pf-global--primary-color--200); + border-color: var(--pf-global--primary-color--200); + } + } + &.btn-success { + &:active, &:focus, &:hover { + background-color: var(--pf-global--success-color--200); + border-color: var(--pf-global--success-color--200); + } + } + &.btn-info { + &:active, &:focus, &:hover { + background-color: var(--pf-global--info-color--200); + border-color: var(--pf-global--info-color--200); + } + } + &.btn-warning { + &:active, &:focus, &:hover { + background-color: var(--pf-global--warning-color--200); + border-color: var(--pf-global--warning-color--200); + } + } + &.btn-danger { + &:active, &:focus, &:hover { + background-color: var(--pf-global--danger-color--200); + border-color: var(--pf-global--danger-color--200); + } + } + + &[aria-disabled=true], + &.disabled, + &:disabled { + &:not(.btn-link):not(a) { + &, &:hover { + background-color: var(--pf-global--disabled-color--200) !important; + border-color: var(--pf-global--disabled-color--200) !important; + color: var(--pf-global--disabled-color--100) !important; + cursor: default; + + // Backgrounds are a bit too visually weighty in button groups + .btn-group > & { + background-color: var(--pf-global--disabled-color--300) !important; + } + } + } + } + } + + @at-root .btn { + &-primary, + &-success, + &-info, + &-warning, + &-danger { + &:active, &:focus, &:hover { + box-shadow: none !important; + } + } + } + + // Shrink embedded buttons + .ct-form &, + .content-filter &, + .listing-ct-head &, + .listing-ct-body &, + .listing-ct-item &, + .action &, + .panel-heading &, + .panel tr & { + padding: 0.125rem 0.5rem; + } + + // Restyle button dropdowns to have button borders + .btn-group > & + .dropdown-toggle { + border-color: var(--pf-global--primary-color--100); + + &:hover, &:focus { + border-width: 1px; + } + } + + // Center-align icon buttons + &.pficon, + &.fa { + display: inline-flex; + align-items: center; + justify-content: center; + } + + // Fix up panel action buttons + .panel-actions & { + display: inline-flex; + align-items: center; + min-height: 2rem; + } +} + +// Unround touching corners in button and input groups +.btn-group, +.input-group { + > :not(:first-of-type) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + > :not(:last-of-type) { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } +} + +// Adjust height of inline edit buttons +.form-control-pf-editable > button { + max-height: 100%; +} + +// Pagination buttons +.pagination { + ul, li { + margin: 0; + padding: 0; + } + + li { + display: flex; + } + + a[role=button] { + display: flex; + height: 2.25rem; + align-items: center; + + &[aria-disabled=true], + &:disabled { + // Backgrounds are a bit too visually weighty in pagination + background-color: var(--pf-global--disabled-color--300) !important; + } + } +} + +// Kebab menu buttons should get special treatment +.dropdown-kebab-pf > button { + border: none; + padding: 0.5rem 1rem !important; +} + +// Restyle modals +.modal { + &-header { + background: var(--pf-global--BackgroundColor--100); + padding: 0 0 1.5rem; + } + + &-title { + font-size: 1.5rem; + font-weight: var(--pf-global--FontWeight--normal); + line-height: 1.3; + } + + &-content { + padding: 2rem; + } + + &-footer { + > .pf-c-button:not(:last-child) { + --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md); + margin-right: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2); + } + --pf-c-modal-box__footer--MarginTop: var(--pf-global--spacer--xl); + margin-top: var(--pf-c-modal-box__footer--MarginTop); + text-align: unset; + padding: 0; + + > .pf-c-button:first-of-type { + --pf-c-modal-box__footer__c-button--first-of-type--MarginLeft: 0; + margin-left: var(--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft); + } + } + + &-body { + padding: 0; + } +} + +// Adjust list group font sizes +.list-group { + font-size: var(--pf-global--FontSize--sm); + + &-item { + .dialog-list-ct > &.active { + background-color: var(--pf-global--active-color--100); + color: var(--pf-global--Color--light-100); + } + + > p { + font-size: var(--pf-global--FontSize--md); + } + } + + // Navigation should be standard size + nav > & { + font-size: var(--pf-global--FontSize--md); + } + +} + +// Adjust list views +.list-view-pf { + .list-group-item-heading { + font-size: var(--pf-global--FontSize--md); + font-weight: 600; + } +} + +// Standardize small font size to PF4 small font +small { + font-size: var(--pf-global--FontSize--sm); +} + +@media screen and (min-width: 768px) { + // Add PF4 padding to desktop mode + .content, + .page-ct, + .container, + .container-fluid { + padding: 2rem 3rem; + + .breadcrumb, + .breadcrumb + & { + padding-top: 0; + } + + .cards-pf + & { + padding-top: 1rem; + } + } + + // Rely on page-ct padding; don't duplicate + .page-ct .container, + .page-ct .container-fluid { + padding: 0; + } + + // Remove excess padding from dialogs + .modal-dialog .content { + padding: 0; + } +} + +// Change label size & weight to match PF4 +label { + font-weight: normal; +} + +.help-block, +.label, +.list-group-item-heading, +.control-label, +.info-table-ct > tbody > tr > td:first-child, +th > label { + font-weight: normal; + font-size: var(--font-size-s); +} + +// Adjust labels in tables +// (used in accounts & containers) +.info-table-ct > tbody > tr > td:first-child, +td > label, +th > label { + vertical-align: baseline; + // Fake spacing (not quite right, but close) + padding: 0.125rem 0.25rem 0 0.5rem; +} + +// Adjust nav tab sizes +.nav-tabs { + font-size: var(--font-size-s); + + > li { + + > a { + padding: 0.75rem 1rem; + position: relative; + } + + &.active > a { + + &::before { + position: absolute; + height: 2px; + top: -1px; + left: -1px; + right: -1px; + content: ""; + background: var(--pf-global--active-color--100); + pointer-events: none; + } + + // listing-ct uses tertitiary nav, which has a bottom line + .listing-ct-panel &::before { + top: auto; + bottom: 0; + } + } + + } +} + +// Add a PF4 shadow to panels +.panel { + box-shadow: var(--pf-global--BoxShadow--sm); +} + +// Change breadcrumb font size +.breadcrumb { + padding: 1rem 0; + font-size: var(--pf-global--FontSize--sm); +} + +// Adjust modal dialog sizes +.modal { + &-dialog { + width: auto; + max-width: 45rem; + } + + &-sm { + max-width: 35rem; + } + + &-lg { + max-width: 60rem; + } +} + +// Bump down graph text size +.server-graph { + font-size: var(--pf-global--FontSize--xs); +} + +// Restyle nav tabs (in content header only, for services) +// in Cockpit, nav-tabs are also used in lists +// and Cockpit's lists use underlines, not overlines +.content-header-extra > .nav-tabs > li { + position: relative; + + &.active::after { + position: absolute; + background: var(--pf-global--primary-color--100); + content: ""; + height: 2px; + left: 0; + top: 0; + width: 100%; + z-index: 1; + } +} + +// Flatten the progress bar trough +.progress { + box-shadow: none; +} + +// Adjust spacing of expand/collapse divider +.expand-collapse-pf .expand-collapse-pf-separator.bordered { + margin-top: 1rem; +} + +// Restyle slider to look more modern (PF4-like) +.slider { + &-selection { + background: var(--pf-global--active-color--100); + } + + &-track { + border: none; + background: var(--pf-global--BorderColor--100); + } + + &.slider-horizontal .slider-track { + height: 0.25rem; + margin-top: -0.125rem; + } + + &-handle { + background: var(--pf-global--primary-color--100); + border: none; + width: 0.75rem; + height: 0.75rem; + margin: 0.125rem 0 0 0.125rem; + position: relative; + + &.slider-horizontal { + /* Move right by half the width */ + margin-left: -0.375rem; + } + + /* Replace native outline with a stylized one */ + &:focus { + --focus-offset: -3px; + outline: none; + + &::after { + content: ''; + position: absolute; + top: var(--focus-offset); + left: var(--focus-offset); + right: var(--focus-offset); + bottom: var(--focus-offset); + border: 2px solid var(--pf-global--primary-color--100); + border-radius: 50%; + opacity: 0.5; + } + } + + &:focus, + &:active { + background: var(--pf-global--primary-color--200); + } + } + + &-pf { + margin: 0 1rem 0 0; + min-height: 2.25rem; + position: relative; + + > * { + margin: 0; + } + + /* Slider labels */ + > b { + color: var(--pf-global--Color--300); + font: inherit; + font-size: var(--pf-global--FontSize--xs); + position: absolute; + top: 1.5rem; + + &:first-child { + left: 0; + } + + &:last-child { + right: 0; + } + } + + /* Readjust the tooltip for our needs */ + .tooltip { + margin: -2.75rem 0 0 -2px !important; + /* Center horizontally based on its own width */ + transform: translateX(-50%); + /* Don't trap mouse hovering */ + pointer-events: none; + } + } +} + +/* Round off badges, similar to PF4 */ +.badge { + border-radius: 30em; +} + +/* Fix PF3 carets */ +.caret { + /* PF3 oddly uses borders and a dropdown triangle */ + border: none; + + &::before { + /* Use a solid triangle, like PF4, not the lined "v" icon */ + content: "\f0d7"; + } +} + +// Fix small icon size (for Composer) +.pf-icon-small::before { + // PF3 uses (1.7em * 12px = 20.4px); PF4 1.25rem = 20px + font-size: 1.25rem; +} + +// Fix small list icon size (for Composer) +.list-pf-icon-small::before { + // PF3 uses (1.4em * 12px = 16.8px); PF4 1rem = 16px + font-size: 1rem; +} + +:root { + font-size: $font-size-base; +} diff --git a/package.json b/package.json index 20e186c8..1cccf167 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "devDependencies": { "@babel/core": "^7.5.4", "@babel/preset-env": "^7.5.4", + "@patternfly/patternfly": "^2.71.6", "babel-eslint": "^9.0.0", "babel-loader": "^8.0.6", "chrome-remote-interface": "^0.25.5", @@ -28,15 +29,18 @@ "eslint-plugin-node": "^9.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", - "extract-text-webpack-plugin": "^4.0.0-beta.0", "htmlparser": "^1.7.7", "jed": "^1.1.1", "less": "^3.0.4", "less-loader": "^5.0.0", + "mini-css-extract-plugin": "^0.9.0", + "node-sass": "^4.14.1", "po2json": "^0.4.5", "qunit": "^2.9.3", + "sass-loader": "^8.0.2", "sizzle": "^2.3.3", "stdio": "^0.2.7", + "string-replace-loader": "^2.3.0", "webpack": "^4.35.3", "webpack-cli": "^3.3.5" }, diff --git a/src/app.js b/src/app.js index ff603e83..84124c8c 100644 --- a/src/app.js +++ b/src/app.js @@ -1,5 +1,7 @@ "use strict"; +import '../lib/patternfly/patternfly-cockpit.scss'; + import cockpit from 'cockpit'; import moment from 'moment'; diff --git a/src/index.html b/src/index.html index 97a2445b..722a61c0 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,6 @@ Software Updates - diff --git a/webpack.config.js b/webpack.config.js index ee13fe9d..e1bd2675 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,6 @@ const path = require("path"); const copy = require("copy-webpack-plugin"); -const extract = require("extract-text-webpack-plugin"); +const extract = require("mini-css-extract-plugin"); const fs = require("fs"); const webpack = require("webpack"); const CompressionPlugin = require("compression-webpack-plugin"); @@ -80,7 +80,7 @@ info.files = files; var plugins = [ new copy(info.files), - new extract("[name].css") + new extract({filename: "[name].css"}) ]; /* Only minimize when in production mode */ @@ -116,6 +116,9 @@ var babel_loader = { module.exports = { mode: production ? 'production' : 'development', entry: info.entries, + resolve: { + alias: { 'font-awesome': path.resolve(nodedir, 'font-awesome-sass/assets/stylesheets') }, + }, externals: externals, output: output, devtool: "source-map", @@ -133,9 +136,69 @@ module.exports = { test: /\.js$/ }, { - exclude: /node_modules/, test: /\.less$/, - loader: extract.extract('css-loader!less-loader') + exclude: /node_modules/, + use: [ + extract.loader, + 'css-loader', + 'less-loader', + ] + }, + /* HACK: remove unwanted fonts from PatternFly's css */ + { + test: /patternfly-cockpit.scss$/, + use: [ + extract.loader, + { + loader: 'css-loader', + options: { + sourceMap: true, + url: false, + }, + }, + { + loader: 'string-replace-loader', + options: { + multiple: [ + { + search: /src:url[(]"patternfly-icons-fake-path\/glyphicons-halflings-regular[^}]*/g, + replace: 'font-display:block; src:url("../base1/fonts/glyphicons.woff") format("woff");', + }, + { + search: /src:url[(]"patternfly-fonts-fake-path\/PatternFlyIcons[^}]*/g, + replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");', + }, + { + search: /src:url[(]"patternfly-fonts-fake-path\/fontawesome[^}]*/, + replace: 'font-display:block; src:url("../base1/fonts/fontawesome.woff?v=4.2.0") format("woff");', + }, + { + search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g, + replace: 'src:url("../base1/fonts/patternfly.woff") format("woff");', + }, + { + search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g, + replace: '', + }, + ] + }, + }, + { + loader: 'sass-loader', + options: { + sassOptions: { + includePaths: [ + // Teach webpack to resolve these references in order to build PF3 scss + path.resolve(nodedir, 'font-awesome-sass', 'assets', 'stylesheets'), + path.resolve(nodedir, 'patternfly', 'dist', 'sass'), + path.resolve(nodedir, 'bootstrap-sass', 'assets', 'stylesheets'), + ], + outputStyle: 'compressed', + }, + sourceMap: true, + }, + }, + ] } ] },