Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-6134

Remove Campaign Theme Legacy CSS

XMLWordPrintable

    • Icon: Epic Epic
    • Resolution: Merged
    • Icon: Should have Should have
    • None
    • None
    • CampaignsLegacyCSS
    • Campaigns, Campaign: Antarctic, Campaign: Arctic, Campaign: Climate Emergency, Campaign: Forest, Campaign: Oceans, Campaign: Oil, Campaign: Plastic, Code Refactoring, Maintenance, Performance, Styling/Theme, Technical Debt

      Now we have the needed variables, we can replace legacy CSS files with a visually identical but significantly less complex and less buggy list of variable values.

      Mostly the legacy code we'll be able to remove is everything in https://github.com/greenpeace/planet4-plugin-gutenberg-blocks/tree/master/assets/src/styles/campaigns 
      This is a total of almost 4000 lines of CSS overrides and confusing mixins in this folder alone, with more scattered throughout multiple places. Since so many things are overridden, we can hardly do any change to our code without risking a fallout effect. 

      planet4-plugin-gutenberg-blocks/assets/src/styles/campaigns $ find . -name '*\.*' | xargs wc -l
     86 ./block-overrides/_campaign_submenu.scss
    169 ./block-overrides/_campaign_split_two_columns.scss
     64 ./block-overrides/_campaign_happy_point.scss
     47 ./block-overrides/_campaign_content_covers.scss
     81 ./block-overrides/_campaign_articles.scss
    100 ./block-overrides/_campaign_carousel.scss
      0 ./block-overrides/_campaign_buttons.scss
    308 ./block-overrides/_campaign_columns.scss
     11 ./block-overrides/_campaign_carousel_header.scss
     23 ./block-overrides/_campaign_counter.scss
     13 ./block-overrides/_campaign_social_media_cards.scss
    162 ./components/_campaign_covers.scss
     25 ./components/_campaign_video.scss
    340 ./themes/_theme_oceans.scss
    305 ./themes/_theme_arctic.scss
    484 ./themes/_theme_climate.scss
    455 ./themes/_theme_oil.scss
    419 ./themes/_theme_plastic.scss
    437 ./themes/_theme_forest.scss
    243 ./themes/_theme_antarctic.scss
    133 ./base/_mixins.scss
      5 ./base/_google_fonts.scss
     10 ./base/_variables.scss
     37 ./base/_fonts.scss
   3957 total

      As a reference, if you execute the same command as above to count the lines of all our base CSS in master theme, the total is currently 5244, and that number already includes some additional lines to add the variables needed for the conversion. We'll be able to remove a considerable amount of complexity from our code base (maybe 25% of all lines of CSS), while offering the same and even more features.

      The new theme footprint instead is a single small list of key value pairs that doesn't add any complexity to our code base. In fact it doesn't even need to live in our code base.

            Unassigned Unassigned
            pvincent Pieter Vincent
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: