DEV: Add SCSS helper to replace asset-uri and image-uri (#12664)

app/assets/stylesheets/common/base/onebox.scss

@@ -87,7 +87,7 @@ a.loading-onebox {
 
 @mixin onebox-favicon($class, $image) {
   &.#{$class} .source {
-    background: image-url("favicons/#{$image}.png") no-repeat 0% 50%;
+    background: absolute-image-url("/favicons/#{$image}.png") no-repeat 0% 50%;
     background-size: 16px 16px;
     padding-left: 20px;
   }
@@ -289,7 +289,9 @@ aside.onebox {
 
 @mixin gdocs-logo($type) {
   &.g-#{$type}-logo {
-    background: image-url("favicons/google_branding/logo_#{$type}_48px.png")
+    background: absolute-image-url(
+        "/favicons/google_branding/logo_#{$type}_48px.png"
+      )
       no-repeat;
   }
 }
@@ -316,7 +318,9 @@ aside.onebox {
     width: 128px;
     height: 128px;
     &.g-calendar-logo {
-      background: image-url("favicons/google_branding/logo_calendar_128px.png")
+      background: absolute-image-url(
+          "/favicons/google_branding/logo_calendar_128px.png"
+        )
         no-repeat;
     }
   }
@@ -635,7 +639,7 @@ aside.onebox.stackexchange .onebox-body {
     width: 60px;
     height: 50px;
     float: left;
-    background: image-url("favicons/pdf_64px.png") no-repeat;
+    background: absolute-image-url("/favicons/pdf_64px.png") no-repeat;
     background-size: 48px 48px;
     display: inline-block;
   }

app/assets/stylesheets/common/foundation/mixins.scss

@@ -194,3 +194,14 @@ $breakpoints: (
     @return "dark";
   }
 }
+
+@function absolute-image-url($path) {
+  // public_image_path is added by the stylesheet importer
+  // it returns a CDN or subfolder path (if applicable).
+  // SCSS will compile (and return the relative path) if public_image_path is missing.
+  @if variable-exists(public_image_path) {
+    @return url("#{$public_image_path}#{$path}");
+  } @else {
+    @return url("#{$path}");
+  }
+}

lib/stylesheet/functions.rb

@@ -3,9 +3,11 @@
 module Stylesheet
   module ScssFunctions
     def asset_url(path)
+      Discourse.deprecate("The `asset-url` SCSS function is deprecated. Use `absolute-image-url` instead.")
       SassC::Script::Value::String.new("url('#{ActionController::Base.helpers.asset_url(path.value)}')")
     end
     def image_url(path)
+      Discourse.deprecate("The `image-url` SCSS function is deprecated. Use `absolute-image-url` instead.")
       SassC::Script::Value::String.new("url('#{ActionController::Base.helpers.image_url(path.value)}')")
     end
   end

lib/stylesheet/importer.rb

@@ -152,8 +152,13 @@ module Stylesheet
       contents
     end
 
+    def public_image_path
+      image_path = UrlHelper.absolute("#{Discourse.base_path}/images")
+      "$public_image_path: \"#{image_path}\"; "
+    end
+
     def prepended_scss
-      "#{color_variables} @import \"common/foundation/variables\"; @import \"common/foundation/mixins\"; "
+      "#{color_variables} #{public_image_path} @import \"common/foundation/variables\"; @import \"common/foundation/mixins\"; "
     end
 
     def initialize(options)

spec/components/stylesheet/compiler_spec.rb

@@ -87,6 +87,35 @@ describe Stylesheet::Compiler do
     expect(css).not_to include('image-url')
   end
 
+  it "supports absolute-image-url" do
+    scss = Stylesheet::Importer.new({}).prepended_scss
+    scss += ".body{background-image: absolute-image-url('/favicons/github.png');}"
+    css, _map = Stylesheet::Compiler.compile(scss, "test.scss")
+
+    expect(css).to include('url("http://test.localhost/images/favicons/github.png")')
+    expect(css).not_to include('absolute-image-url')
+  end
+
+  it "supports absolute-image-url in subfolder" do
+    set_subfolder "/subfo"
+    scss = Stylesheet::Importer.new({}).prepended_scss
+    scss += ".body{background-image: absolute-image-url('/favicons/github.png');}"
+    css, _map = Stylesheet::Compiler.compile(scss, "test2.scss")
+
+    expect(css).to include('url("http://test.localhost/subfo/images/favicons/github.png")')
+    expect(css).not_to include('absolute-image-url')
+  end
+
+  it "supports absolute-image-url with CDNs" do
+    set_cdn_url "https://awesome.com"
+    scss = Stylesheet::Importer.new({}).prepended_scss
+    scss += ".body{background-image: absolute-image-url('/favicons/github.png');}"
+    css, _map = Stylesheet::Compiler.compile(scss, "test2.scss")
+
+    expect(css).to include('url("https://awesome.com/images/favicons/github.png")')
+    expect(css).not_to include('absolute-image-url')
+  end
+
   context "with a color scheme" do
     it "returns the default color definitions when no color scheme is specified" do
       css, _map = Stylesheet::Compiler.compile_asset("color_definitions")

spec/models/post_analyzer_spec.rb

@@ -119,7 +119,7 @@ describe PostAnalyzer do
     let(:raw_post_one_image_md) { "![sherlock](http://bbc.co.uk/sherlock.jpg)" }
     let(:raw_post_two_images_html) { "<img src='http://discourse.org/logo.png'> <img src='http://bbc.co.uk/sherlock.jpg'>" }
     let(:raw_post_with_avatars) { '<img alt="smiley" title=":smiley:" src="/assets/emoji/smiley.png" class="avatar"> <img alt="wink" title=":wink:" src="/assets/emoji/wink.png" class="avatar">' }
-    let(:raw_post_with_favicon) { '<img src="/assets/favicons/wikipedia.png" class="favicon">' }
+    let(:raw_post_with_favicon) { '<img src="/images/favicons/discourse.png" class="favicon">' }
     let(:raw_post_with_thumbnail) { '<img src="/assets/emoji/smiley.png" class="thumbnail">' }
     let(:raw_post_with_two_classy_images) { "<img src='http://discourse.org/logo.png' class='classy'> <img src='http://bbc.co.uk/sherlock.jpg' class='classy'>" }
     let(:raw_post_with_two_embedded_media) { '<video width="950" height="700" controls><source src="https://bbc.co.uk/news.mp4" type="video/mp4"></video><audio controls><source type="audio/mpeg" src="https://example.com/audio.mp3"></audio>' }

spec/models/post_spec.rb

@@ -241,7 +241,7 @@ describe Post do
     let(:post_one_image) { post_with_body("![sherlock](http://bbc.co.uk/sherlock.jpg)", newuser) }
     let(:post_two_images) { post_with_body("<img src='http://discourse.org/logo.png'> <img src='http://bbc.co.uk/sherlock.jpg'>", newuser) }
     let(:post_with_avatars) { post_with_body('<img alt="smiley" title=":smiley:" src="/assets/emoji/smiley.png" class="avatar"> <img alt="wink" title=":wink:" src="/assets/emoji/wink.png" class="avatar">', newuser) }
-    let(:post_with_favicon) { post_with_body('<img src="/assets/favicons/wikipedia.png" class="favicon">', newuser) }
+    let(:post_with_favicon) { post_with_body('<img src="/images/favicons/discourse.png" class="favicon">', newuser) }
     let(:post_image_within_quote) { post_with_body('[quote]<img src="coolimage.png">[/quote]', newuser) }
     let(:post_image_within_code) { post_with_body('<code><img src="coolimage.png"></code>', newuser) }
     let(:post_image_within_pre) { post_with_body('<pre><img src="coolimage.png"></pre>', newuser) }