Separate legacy CSS from Barcelona CSS

Created on 29 August 2024, 3 months ago
Updated 5 September 2024, 3 months ago

Problem/Motivation

The team theming for the Barcelona Event site needs to be able to work quickly Adding new components to the Bluecheese theme without updating everything in the existing BlueCheese theme and without breaking legacy styles.

Steps to reproduce

If you create any component on the site it will load both the existing styles.css and the new global-styles.css files which can lead to conflicts in styling.

Proposed resolution

  • Remove all CSS from the global bluecheese Library
  • Create legacy-global and barcelona-global where legacy loads the old styles.css and barcelona loads the new global-styles.css
  • Add a barcelona content type based on the component content type
  • Create preprocessing function at HTML level to only attach barcelona libraries to barcelona content type and otherwise load the legacy library
  • Update storybook to load global-styles.css in a .storybook/preview-head.html so that all components share the global styles.
πŸ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States biz123

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @biz123
  • Pipeline finished with Success
    3 months ago
    Total: 137s
    #268601
  • Status changed to Needs review 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States biz123
  • πŸ‡ΊπŸ‡ΈUnited States drumm NY, US

    Breaking legacy styles is not a concern right now, we’re activating parts of the migrated site piece-by-piece, so we have a chance to review and catch any legacy styles that got into a non-ideal place. To reduce potential long-term technical debt, I think its better to go ahead and aggressively adapt legacy styles as they get in the way, rather than leave them in a separate silo.

  • Pipeline finished with Success
    3 months ago
    Total: 144s
    #268615
  • Pipeline finished with Success
    3 months ago
    Total: 149s
    #268620
  • Pipeline finished with Success
    3 months ago
    Total: 157s
    #268623
  • Pipeline finished with Success
    3 months ago
    Total: 154s
    #268626
  • Pipeline finished with Success
    3 months ago
    Total: 157s
    #268632
  • Status changed to Needs work 3 months ago
  • πŸ‡ͺπŸ‡ΈSpain fjgarlin

    I left some comments in the MR and @drumm did so in this issue as well. Before we move forward with architectural decisions (in both CSS and Drupal content types configuration), let's try to agree on what would be valid vs not.

  • Pipeline finished with Success
    3 months ago
    Total: 137s
    #269748
  • Pipeline finished with Success
    3 months ago
    Total: 135s
    #269752
  • Pipeline finished with Success
    3 months ago
    Total: 137s
    #273715
  • Pipeline finished with Success
    3 months ago
    Total: 138s
    #273719
  • πŸ‡ΊπŸ‡ΈUnited States spicy.werewolf
  • πŸ‡ΊπŸ‡ΈUnited States spicy.werewolf
  • Status changed to Fixed 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States spicy.werewolf
Production build 0.71.5 2024