SHS-5967: FE Performance: CSS Optimization - Decanter Imports

[mariannuar]

Summary

• Remove decanter imports no longer needded
• Reorganized decanter import to support to avoid errors on compile
• Remove and copy missing styles into the existing local file for: decanter/core/src/scss/components/masthead into local components/masthead file and decanter/core/src/scss/components/alert into local components/global-message file

Need Review By (Date)

01/15

Urgency

medium

Steps to Test

1. On Colorful and Traditional, visit the following pages:

• '/',
• '/default-views/people',
• '/default-views/publications',
• '/news/jackelyn-hwang-wins-jane-addams-award-best-article-community-and-urban-sociology-section',
• '/events/colloquium-series/sociology-department-colloquium-robert-braun',
• '/people/abhinanda-sarkar',
• '/publications/privilege-and-punishment-how-race-and-class-matter-criminal-court',
• '/collection-real-world-examples',
• '/collection-real-world-examples-w-well',
• '/collection-real-examples-uniform-and-stretch',
• '/hero-images-main-region',
• '/componentshero-images-main-region/hero-gradient-slider',
• '/hero-images-main-region/hero-layered-slider',
• '/componentshero-images-main-region/hero-no-text',
• '/componentshero-images-main-region/hero-overlay',
• '/componentshero-images-main-region/tall-spotlight',
• '/componentshero-images-main-region/short-spotlight',
• '/components/photo-album',
• '/components/text-area-typography',
• '/components/vertical-timeline-view-using-events-ct',
• '/mixed-pages/mixed-page-raised-cards',
• '/collections-cards-uniform-and-stretch-1',
• '/mixed-pages/mixed-page',
• '/mixed-pages/mixed-page-wells',
• '/mixed-pages/mixed-page-wells-raised-cards',

2. Compare it with what's on https://hs-colorful.stanford.edu/ or https://hs-colorful-stage.stanford.edu/ (check for traditional too)
3. Confirm that there are no visual changes in the site, specially in the Alerts and Header as a whole (Stanford Branding, Main Menu, Search bar) We run VRT and Percy, and also did a manual testing to confirm this.
4. Here's a spreadsheet that contains all the information about the imports that were removed

Review Tasks

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Are PHP functions and variables in snake_case and not camelCase?
• Does Drupal code follow Drupal Coding Standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided?

Code security

• Is all user input properly sanitized when rendered?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

[ahughes3]

Tugboat has finished building the preview for this pull request!

Links:

• https://pr1716-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com
• https://hs-colorful-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com
• https://hs-traditional-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com
• https://english-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com
• https://history-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com
• https://west-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/678580335bab681e0929e26a

Visual Diffs:

• https://dashboard.tugboatqa.com/678580335bab681e0929e26a/visualdiffs

[callinmullaney]

@mariannuar Nice work! The removed decanter imports are accurate to the linked spreadsheet and I confirmed the removed import styles that were still in use for Alerts and Masthead we migrated to the Humsci Basic theme directly.

This does appear to cut 33kb of CSS (at least from colorful). Not a huge amount but definitely headed in the right direction:
Before:

After:

Also, checking on Percy's Visreg tests in appear there are only 5 files that recorded any sort of change. They all appear to be a slight font shifting type of diff that I would assume is due to page loading than a style change. I'm going to kick this over to Albert to review further.

[callinmullaney]

@ahughes3 This PR appears to be ready for your eyes. However, we may want to wait and get the Tugboat Visual Regression Tests working thoroughly before proceeding with merging. Better safe than sorry but I think this PR is looking good.

That being said, the Percy Visreg Tests aren't showing any significant diffs that warrant further investigation out of the 55 tests it runs. There is one Percy test I accidentally approved that is showing some differences (screenshot below) but this appears to be a page loading artifact than a result of style changes. When I reviewed the tugboat link of the page (https://hs-colorful-amt2rwlf6jno6mfqda6dtpgkpoahcqia.tugboatqa.com/components/photo-album) I'm not seeing any issues.