sts-sponsors team mailing list archive

[Peter Makowski <mp+439739@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:css-bundle-optimisation-MAASENG-1480 into maas-site-manager:main.

Commit message:
optimise CSS bundle
- import all styles into a single file
- remove additional preprocessor data


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/439739

QA Steps
Verify that all pages and navigation work the same as before.


output CSS file size

before
944.42 kB │ gzip: 157.72 kB

after
210.46 kB │ gzip:  28.78 kB
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:css-bundle-optimisation-MAASENG-1480 into maas-site-manager:main.

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 9923a4c..7abf2c3 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -1,18 +1,53 @@
+@use "sass:math";
+
+@import "@/settings.scss";
+@import "vanilla-framework";
 @include vf-base;
-@include vanilla;
-// @include vf-p-table-sortable;
-// @include vf-p-table-expanding;
+
+// patterns
+@include vf-b-placeholders;
 @include vf-p-grid;
-@include vf-l-application;
+@include vf-p-buttons;
+@include vf-p-forms;
+@include vf-p-links;
+@include vf-p-side-navigation;
+@include vf-p-navigation;
+@include vf-p-headings;
+@include vf-u-off-screen;
+@include vf-p-search-box;
+@include vf-p-form-tick-elements;
+@include vf-p-tooltips;
 
-@import "patterns_icons"; // include common styles shared by all icons
+// icons
+@include vf-p-icons;
 @include vf-p-icons-common;
+@include vf-p-icon-close;
+@include vf-p-icon-search;
 @include vf-p-icon-status-failed-small;
 @include vf-p-icon-status-waiting-small;
 @include vf-p-icon-status-succeeded-small;
-@include vf-p-icons;
-@import "./utils";
-@import "./patterns_icons";
-@import "./patterns_typography";
-@include maas-icons;
-@include maas-typography;
+@include vf-p-icon-settings;
+
+// Utilities
+@include vf-u-text-muted;
+@include vf-u-vertical-spacing;
+@include vf-u-vertically-center;
+@include vf-u-hide;
+
+// layout
+@include vf-l-application;
+@include vf-l-application-panels;
+@include vf-l-full-width;
+@include vf-l-site;
+
+@import "@/utils";
+@import "@/patterns_icons";
+@import "@/patterns_typography";
+
+// components styles
+@import "@/components/MainLayout/MainLayout.scss";
+@import "@/components/Navigation/Navigation.scss";
+@import "@/components/TokensCreate/TokensCreate.scss";
+@import "@/components/SitesList/components/ColumnsVisibilityControl.scss";
+@import "@/components/SitesList/components/SitesTable.scss";
+@import "@/components/Placeholder/Placeholder.scss";
diff --git a/frontend/src/_patterns_icons.scss b/frontend/src/_patterns_icons.scss
index 5b953e0..5fd0e2d 100644
--- a/frontend/src/_patterns_icons.scss
+++ b/frontend/src/_patterns_icons.scss
@@ -6,14 +6,12 @@
   background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 165.5 174.3' width='16px' height='16px' xmlns='http://www.w3.org/2000/svg' %3E%3Cellipse cx='15.57' cy='111.46' rx='13.44' ry='13.3' /%3E%3Cpath d='M156.94 101.45H31.88a18.91 18.91 0 0 1 .27 19.55c-.09.16-.2.31-.29.46h125.08a6 6 0 0 0 6.06-5.96v-8.06a6 6 0 0 0-6-6Z' /%3E%3Cellipse cx='15.62' cy='63.98' rx='13.44' ry='13.3' /%3E%3Cpath d='M156.94 53.77H31.79a18.94 18.94 0 0 1 .42 19.75l-.16.24h124.89a6 6 0 0 0 6.06-5.94v-8.06a6 6 0 0 0-6-6Z' /%3E%3Cellipse cx='16.79' cy='16.5' rx='13.44' ry='13.3' /%3E%3Cpath d='M156.94 6.5H33.1a19.15 19.15 0 0 1 2.21 5.11A18.82 18.82 0 0 1 33.42 26l-.29.46h123.81a6 6 0 0 0 6.06-5.9V12.5a6 6 0 0 0-6-6Z' /%3E%3Cellipse cx='15.57' cy='158.94' rx='13.44' ry='13.3' /%3E%3Cpath d='M156.94 149H31.88a18.88 18.88 0 0 1 .27 19.5c-.09.16-.19.31-.29.46h125.08A6 6 0 0 0 163 163v-8.06a6 6 0 0 0-6-6Z' /%3E%3C/svg%3E");
 }
 
-@mixin maas-icons {
-  .p-icon--sidebar-toggle {
-    @extend %icon;
-    @include maas-icon-sidebar-collapse();
-  }
+.p-icon--sidebar-toggle {
+  @extend %icon;
+  @include maas-icon-sidebar-collapse();
+}
 
-  .p-icon--maas {
-    @extend %icon;
-    @include maas-icon-maas-logo();
-  }
-}
\ No newline at end of file
+.p-icon--maas {
+  @extend %icon;
+  @include maas-icon-maas-logo();
+}
diff --git a/frontend/src/_patterns_typography.scss b/frontend/src/_patterns_typography.scss
index dba8f61..a629d0f 100644
--- a/frontend/src/_patterns_typography.scss
+++ b/frontend/src/_patterns_typography.scss
@@ -1,13 +1,11 @@
-@mixin maas-typography {
+.p-heading--small {
+  @extend %table-header-label;
+  color: $color-dark;
+  margin-bottom: $sp-unit * 0.25;
+  text-transform: uppercase;
+}
+.is-dark {
   .p-heading--small {
-    @extend %table-header-label;
-    color: $color-dark;
-    margin-bottom: $sp-unit * 0.25;
-    text-transform: uppercase;
+    color: $color-light;
   }
-  .is-dark {
-    .p-heading--small {
-      color: $color-light;
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/MainLayout/MainLayout.tsx b/frontend/src/components/MainLayout/MainLayout.tsx
index d033495..8180690 100644
--- a/frontend/src/components/MainLayout/MainLayout.tsx
+++ b/frontend/src/components/MainLayout/MainLayout.tsx
@@ -4,7 +4,6 @@ import { Col, Row, usePrevious } from "@canonical/react-components";
 import classNames from "classnames";
 import { Outlet, useLocation } from "react-router-dom";
 
-import "./MainLayout.scss";
 import Navigation from "@/components/Navigation";
 import RemoveRegions from "@/components/RemoveRegions";
 import { useAppContext } from "@/context";
diff --git a/frontend/src/components/MainLayout/MainLayout.scss b/frontend/src/components/MainLayout/_MainLayout.scss
similarity index 100%
rename from frontend/src/components/MainLayout/MainLayout.scss
rename to frontend/src/components/MainLayout/_MainLayout.scss
diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx
index 1849bba..1aa767f 100644
--- a/frontend/src/components/Navigation/Navigation.tsx
+++ b/frontend/src/components/Navigation/Navigation.tsx
@@ -5,7 +5,6 @@ import useLocalStorageState from "use-local-storage-state";
 
 import NavigationBanner from "./NavigationBanner";
 import NavigationCollapseToggle from "./NavigationCollapseToggle";
-import "./Navigation.scss";
 import NavigationItems from "./NavigationItems";
 import type { NavItem } from "./types";
 
diff --git a/frontend/src/components/Navigation/Navigation.scss b/frontend/src/components/Navigation/_Navigation.scss
similarity index 90%
rename from frontend/src/components/Navigation/Navigation.scss
rename to frontend/src/components/Navigation/_Navigation.scss
index d6d1283..a4c4d5f 100644
--- a/frontend/src/components/Navigation/Navigation.scss
+++ b/frontend/src/components/Navigation/_Navigation.scss
@@ -1,10 +1,5 @@
 .l-navigation {
-  @include vf-transition(
-    $property: #{width,
-    box-shadow,
-    background},
-    $duration: fast
-  );
+  @include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
   &:hover,
   &:focus-within,
   &.is-pinned {
@@ -50,16 +45,9 @@
   }
 }
 .p-panel.is-dark {
-  background: inherit;
-
   .p-panel__header {
     background-color: inherit;
-    @include vf-transition(
-      $property: #{width,
-      box-shadow,
-      background},
-      $duration: fast
-    );
+    @include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
   }
 
   .p-panel__logo {
@@ -119,10 +107,7 @@
     text-align: left;
     justify-content: flex-start;
   }
-  .p-side-navigation--icons
-    .p-side-navigation__item
-    .p-side-navigation__item
-    .p-side-navigation__link {
+  .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link {
     padding-left: 4rem;
   }
 }
diff --git a/frontend/src/components/Placeholder/Placeholder.tsx b/frontend/src/components/Placeholder/Placeholder.tsx
index 6f0375b..4ef41b4 100644
--- a/frontend/src/components/Placeholder/Placeholder.tsx
+++ b/frontend/src/components/Placeholder/Placeholder.tsx
@@ -2,8 +2,6 @@ import type { ReactNode } from "react";
 
 import classNames from "classnames";
 
-import "./Placeholder.scss";
-
 type Props = {
   className?: string;
   isLoading?: boolean;
diff --git a/frontend/src/components/Placeholder/Placeholder.scss b/frontend/src/components/Placeholder/_Placeholder.scss
similarity index 100%
rename from frontend/src/components/Placeholder/Placeholder.scss
rename to frontend/src/components/Placeholder/_Placeholder.scss
diff --git a/frontend/src/components/SitesList/components/ColumnsVisibilityControl.tsx b/frontend/src/components/SitesList/components/ColumnsVisibilityControl.tsx
index 83b8178..033f6a8 100644
--- a/frontend/src/components/SitesList/components/ColumnsVisibilityControl.tsx
+++ b/frontend/src/components/SitesList/components/ColumnsVisibilityControl.tsx
@@ -1,6 +1,5 @@
 import { ContextualMenu, Icon, CheckboxInput } from "@canonical/react-components";
 
-import "./ColumnsVisibilityControl.scss";
 import type { SitesColumn } from "./SitesTable";
 
 function ColumnsVisibilityControl({ columns }: { columns: SitesColumn[] }) {
diff --git a/frontend/src/components/SitesList/components/SitesTable.tsx b/frontend/src/components/SitesList/components/SitesTable.tsx
index d325840..aeb280b 100644
--- a/frontend/src/components/SitesList/components/SitesTable.tsx
+++ b/frontend/src/components/SitesList/components/SitesTable.tsx
@@ -13,7 +13,6 @@ import { isDev } from "@/constants";
 import { useAppContext } from "@/context";
 import type { UseSitesQueryResult } from "@/hooks/api";
 import { getCountryName, getTimeByUTCOffset, getTimezoneUTCString } from "@/utils";
-import "./SitesTable.scss";
 
 const createAccessor =
   <T, K extends keyof T>(keys: K[] | K) =>
diff --git a/frontend/src/components/SitesList/components/ColumnsVisibilityControl.scss b/frontend/src/components/SitesList/components/_ColumnsVisibilityControl.scss
similarity index 97%
rename from frontend/src/components/SitesList/components/ColumnsVisibilityControl.scss
rename to frontend/src/components/SitesList/components/_ColumnsVisibilityControl.scss
index 8343345..d3aa038 100644
--- a/frontend/src/components/SitesList/components/ColumnsVisibilityControl.scss
+++ b/frontend/src/components/SitesList/components/_ColumnsVisibilityControl.scss
@@ -1,5 +1,3 @@
-@include vf-p-icon-settings;
-
 .columns-visibility-checkbox {
   &:first-of-type label {
     padding-top: $sph--small;
diff --git a/frontend/src/components/SitesList/components/SitesTable.scss b/frontend/src/components/SitesList/components/_SitesTable.scss
similarity index 100%
rename from frontend/src/components/SitesList/components/SitesTable.scss
rename to frontend/src/components/SitesList/components/_SitesTable.scss
diff --git a/frontend/src/components/TokensCreate/TokensCreate.tsx b/frontend/src/components/TokensCreate/TokensCreate.tsx
index f055ce5..ea6a9ab 100644
--- a/frontend/src/components/TokensCreate/TokensCreate.tsx
+++ b/frontend/src/components/TokensCreate/TokensCreate.tsx
@@ -4,7 +4,6 @@ import { Button, Input, Label, Notification } from "@canonical/react-components"
 import { Field, Formik, Form } from "formik";
 import * as Yup from "yup";
 
-import "./TokensCreate.scss";
 import { humanIntervalToISODuration } from "./utils";
 
 import { useAppContext } from "@/context";
diff --git a/frontend/src/components/TokensCreate/TokensCreate.scss b/frontend/src/components/TokensCreate/_TokensCreate.scss
similarity index 100%
rename from frontend/src/components/TokensCreate/TokensCreate.scss
rename to frontend/src/components/TokensCreate/_TokensCreate.scss
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 1f5d507..61bc0d3 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -22,16 +22,4 @@ export default defineConfig({
   resolve: {
     alias: { "@": path.resolve(__dirname, "src") },
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `
-          @use "sass:math";
-          @import "./src/settings.scss";
-          @import "node_modules/vanilla-framework";
-          @include vanilla;
-        `,
-      },
-    },
-  },
 });