Add exception option for scss_lint gem for UrlFormat

Question

I am using gem scss_lint for scss linting. The problem I am facing is that I have variables in some of my lines in css for the url, so linter reports an error:

I think there should be a way to exclude certain things on the check. I see that data: was whitelisted, but we sometimes use variables in our css because it is placed in cms.

 UrlFormat: Invalid URL '/response/${siteId}/artifact/${campaignAndToolPath}/assets/fonts/roboto-light-webfont.woff2': bad URI(is not URI?): /response/${siteId}/artifact/${campaignAndToolPath}/assets/fonts/roboto-light-webfont.woff2 

Code in which it is erroneous:

 @font-face { font-family: 'roboto'; src: url('/response/${siteId}/artifact/${campaignAndToolPath}/assets/fonts/roboto-italic-webfont.woff2') format('woff2'), url('/response/${siteId}/artifact/${campaignAndToolPath}/assets/fonts/roboto-italic-webfont.woff') format('woff'); font-weight: $regular; font-style: italic; } 

Perhaps there is a way to do

 UrlFormat: enabled: true ignore or exclude: [ - '${everythingbetween}' - '{{everything between}}' ] 

I am not good at Ruby to write something that allows me to check for such variables and ignore the variable itself or the entire string.

Would anyone be interested in this?

Ruby code for it.

 require 'uri' module SCSSLint # Checks the format of URLs for unnecessary protocols or domains. class Linter::UrlFormat < Linter include LinterRegistry def visit_script_funcall(node) return unless node.name == 'url' if url_string?(node.args[0]) url = node.args[0].value.value.to_s check_url(url, node) end yield end def visit_prop(node) if url_literal?(node.value) url = node.value.to_sass.sub(/^url\((.*)\)$/, '\\1') check_url(url, node) end yield end private def url_literal?(prop_value) return unless prop_value.is_a?(Sass::Script::Tree::Literal) return unless prop_value.value.is_a?(Sass::Script::Value::String) return unless prop_value.value.type == :identifier prop_value.to_sass.start_with?('url(') end def url_string?(arg) return unless arg.is_a?(Sass::Script::Tree::Literal) return unless arg.value.is_a?(Sass::Script::Value::String) arg.value.type == :string end def check_url(url, node) return if url.start_with?('data:') uri = URI(url) if uri.scheme || uri.host add_lint(node, "URL `#{url}` should not contain protocol or domain") end rescue URI::Error => ex add_lint(node, "Invalid URL `#{url}`: #{ex}") end end end 

I think the solution might be to simply ignore the variable in the way it is done for data: and not for an error, unless UrlFormat invalid due to lack of quotes or something else.

Any help would be appreciated.

Answer 1

This should work: the change I made is the line return if url.include?('${') . It ignores URLs containing the string ${ in the same way that it ignores URLs starting with data:

 def check_url(url, node) return if url.start_with?('data:') || url.include?('${') uri = URI(url) if uri.scheme || uri.host add_lint(node, "URL `#{url}` should not contain protocol or domain") end rescue URI::Error => ex add_lint(node, "Invalid URL `#{url}`: #{ex}") end