Skip to content

Use CSS url() instead of Sprocket functions

Muhammed Ali requested to merge gitlab-community/gitlab:url-assets-helper into master

What does this MR do and why?

Sprocket functions like image-url or asset-url or asset_path require Sprockets and SassC which are deprecated. In order to prepare to move away from this ecosystem this MR removes references of Sprockets CSS Asset Helpers and instead uses url()

Sprockets has a CSS Postprocessor for .css files https://github.com/rails/sprockets-rails/blob/master/lib/sprockets/railtie.rb#L120C1-L120C91 which will resolve any assets

Related MR !140611 (merged)

Example input/output (bin/rails gitlab:assets:compile) of before and after the changes in this MR

Original

Input

// app/assets/stylesheets/framework/diffs.scss#L222
        .top-handle {
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          top: 0;
          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
        }

        .bottom-handle {
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          bottom: 0;
          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
        }

Output

// public/assets/application-[hash].css
/* line 222, app/assets/stylesheets/framework/diffs.scss */
.diff-file .image .view.swipe .swipe-bar .top-handle {
  display: block;
  height: 14px;
  width: 15px;
  position: absolute;
  top: 0;
  background: url(./swipemode_sprites-522fecbb380f3edfa9b09006e88a51fbcb5c26d95dba87d2e09a363a863cd4e4.gif) 0 3px no-repeat;
}

/* line 231, app/assets/stylesheets/framework/diffs.scss */
.diff-file .image .view.swipe .swipe-bar .bottom-handle {
  display: block;
  height: 14px;
  width: 15px;
  position: absolute;
  bottom: 0;
  background: url(./swipemode_sprites-522fecbb380f3edfa9b09006e88a51fbcb5c26d95dba87d2e09a363a863cd4e4.gif) 0 -11px no-repeat;
}

Changed

Input

// app/assets/stylesheets/framework/diffs.scss#L222
// app/assets/stylesheets/framework/diffs.scss#L222
        .top-handle {
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          top: 0;
          background: url('swipemode_sprites.gif') 0 3px no-repeat;
        }

        .bottom-handle {
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          bottom: 0;
          background: url('swipemode_sprites.gif') 0 -11px no-repeat;
        }

Output

// public/assets/application-[hash].css
/* line 222, app/assets/stylesheets/framework/diffs.scss */
.diff-file .image .view.swipe .swipe-bar .top-handle {
  display: block;
  height: 14px;
  width: 15px;
  position: absolute;
  top: 0;
  background: url(./swipemode_sprites-522fecbb380f3edfa9b09006e88a51fbcb5c26d95dba87d2e09a363a863cd4e4.gif) 0 3px no-repeat;
}

/* line 231, app/assets/stylesheets/framework/diffs.scss */
.diff-file .image .view.swipe .swipe-bar .bottom-handle {
  display: block;
  height: 14px;
  width: 15px;
  position: absolute;
  bottom: 0;
  background: url(./swipemode_sprites-522fecbb380f3edfa9b09006e88a51fbcb5c26d95dba87d2e09a363a863cd4e4.gif) 0 -11px no-repeat;
}

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

Edited by Muhammed Ali

Merge request reports