Using the Rails asset pipeline for images

[tijmenb]

In Rails we use helpers to refer to assets in CSS:

background-image: image-url("icon-pointer.png");
background-image: asset-url("icon-pointer.png");

This makes the asset pipeline in Rails work: instead of linking to icon-pointer.png, it will link to the fingerprinted version of the file.

Currently GOV.UK Frontend just uses url("file.png") in the CSS, so Rails won't point the correct assets:

govuk-frontend/package/tools/_file-url.scss

Line 4 in 5bb66d6

@return url($govuk-global-images + $file);

For GOV.UK to use GOV.UK Frontend, we'll need a way to override the govuk-file-url or to instruct it to use asset-url.

Options

Defining the function first

I thought maybe defining the govuk-file-url function above the @import for GOV.UK Frontend would work, but the later definition overrides this.

Defining the function last

This doesn't work because govuk-file-url is already used by the CSS.

Conditionally defining the function

I though maybe if we wrap the function in a conditional like below, our override might work.

@if function-exists('govuk-file-url') == false {
  @function govuk-file-url($file) {
    @return url($govuk-global-images + $file);
  }
}

Unfortunately SCSS errors out with:

Functions may not be defined within control directives or other mixins.

Conditional inside function

This works:

$govuk-use-rails: true;

@function govuk-file-url($file) {
  @if $govuk-use-rails {
    @return asset-url($file);
  } else {
    @return url($govuk-global-images + $file);
  }
}

---

This follows a spike into using GOV.UK Frontend on GOV.UK (alphagov/govuk_publishing_components#328).

[36degrees]

Hey @tijmenb,

Thanks for raising – can you take a look at #733 and see if it'll address your needs?

Ta

[tijmenb]

@36degrees tested by hacking it into the PR: alphagov/govuk_publishing_components@643c482. Works well! 👌

[NickColley]

Thanks for the great issue @tijmenb 👍