CSS layer support, to contain PatternFly and layer on top (instead of mishmash everything together)

[garrett]

Examples: https://css-tricks.com/css-cascade-layers/#aa-quick-example

• We could layer in PatternFly, PF overrides, Cockpit libraries, and then optionally local CSS
• This solves a problem where we might want to reset some or all of PF styles locally; especially useful for overrides
• This would make sure overrides always would take precedence over PF, and Cockpit related CSS would take precedence over PF
• Supported in all browsers since 2022 (so this means it’s in Firefox extended support release too)
• This probably requires some minor changes to the build system, where @import is used

esbuild has supported layers for a few years as well.

Examples of CSS layers:

Linking:

@import `patternfly.css` layer(patternfly)

Embedding:

@layer patternfly {
   /*...*/
}

Nesting (which I'm not asking for, but it exists) works too, like thus:

@import `patternfly-foo.css` layer(patternfly.foo)

Embedding with nested layers (also not really asking for):

@layer patternfly {
   @layer foo {
      /*...*/
   }
}

Just showing that nesting exists, so if it helps abstract the implementation, then we can consider it. But the simplest approach would be to have PatternFly in its own import or wrapping all of PatternFly in its own layer (in the embedded method).

When you have a layer, everything that isn't in a layer is applied after the layers are applied. So isolating PatternFly into its own layer makes sure it is applied first and then everything else is applied after. We could layer patternfly, then overrides, and even have local layers, but we cannot use layers in Cockpit until at least PatternFly itself is in a layer.

[jelly]

pkg/lib/esbuild-common.js already modifies the scss and css already. The PatternFly components in Cockpit likely import styles as css.

However in some instances we also import scss in a component or via patternfly-5-cockpit.scss. As the scss we process with the sass plugin in Cockpit is:

[jelle@t14s][~/projects/cockpit/main]%./build.js
/home/jelle/projects/cockpit/main/pkg/lib/patternfly/patternfly-5-cockpit.scss
/home/jelle/projects/cockpit/main/pkg/lib/page.scss
/home/jelle/projects/cockpit/main/pkg/users/users.scss
/home/jelle/projects/cockpit/main/pkg/kdump/kdump.scss
/home/jelle/projects/cockpit/main/pkg/systemd/terminal.scss
/home/jelle/projects/cockpit/main/pkg/static/login.scss
/home/jelle/projects/cockpit/main/pkg/systemd/hwinfo.scss
/home/jelle/projects/cockpit/main/pkg/shell/shell.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-logs-panel.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-plot.scss
/home/jelle/projects/cockpit/main/node_modules/@patternfly/patternfly/patternfly-charts.scss
/home/jelle/projects/cockpit/main/pkg/networkmanager/networking.scss
/home/jelle/projects/cockpit/main/pkg/lib/context-menu.scss
/home/jelle/projects/cockpit/main/pkg/systemd/services.scss
/home/jelle/projects/cockpit/main/pkg/selinux/setroubleshoot.scss
/home/jelle/projects/cockpit/main/pkg/packagekit/updates.scss
/home/jelle/projects/cockpit/main/pkg/storaged/storage.scss
/home/jelle/projects/cockpit/main/pkg/apps/application.scss
/home/jelle/projects/cockpit/main/pkg/systemd/logs.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-table.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-dialog.scss
/home/jelle/projects/cockpit/main/pkg/metrics/metrics.scss
/home/jelle/projects/cockpit/main/pkg/sosreport/sosreport.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-shutdown.scss
/home/jelle/projects/cockpit/main/pkg/systemd/timers.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-listing-panel.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-truncate.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/healthCard.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/motdCard.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-firewalld-request.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/configurationCard.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/usageCard.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/systemInformationCard.scss
/home/jelle/projects/cockpit/main/pkg/systemd/service-details.scss
/home/jelle/projects/cockpit/main/pkg/lib/serverTime.scss
/home/jelle/projects/cockpit/main/pkg/systemd/page-status.scss
/home/jelle/projects/cockpit/main/pkg/lib/menu-select-widget.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/shutdownStatus.scss
/home/jelle/projects/cockpit/main/pkg/shell/credentials.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/cryptoPolicies.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/realmd.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/lastLogin.scss
/home/jelle/projects/cockpit/main/pkg/systemd/overview-cards/insights.scss
/home/jelle/projects/cockpit/main/pkg/networkmanager/wireguard.scss
/home/jelle/projects/cockpit/main/pkg/lib/cockpit-components-password.scss
/home/jelle/projects/cockpit/main/pkg/systemd/reporting.scss
15:15:49: Build finished

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: {
            // Do not override the sm breakpoint as for width < 768px the left nav is hidden
            '768px': '428px',
            '992px': '652px',
            '1200px': '876px',
            '1450px': '1100px',
        }
    }),

This seems to be really hard to achieve.

[garrett]

This seems to be really hard to achieve.

:cry:

Hopefully PatternFly will do something on their end at some point in time. They have an open issue on it @

• https://github.com/patternfly/patternfly/issues/6433