I'm using gem scss_lint
for scss linting. The issue I'm having is that I have variables in some of my strings in the css for the url so the linter reports an error:
I think there should be a way to exclude certain things in the check. I see that data:
has been whitelisted but we use variables in our css sometimes because it is put into a 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
The code it is erroring on is:
@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;
}
Maybe having a way to do
UrlFormat:
enabled: true
ignore or exclude: [
- '${everythingbetween}'
- '{{everything between}}'
]
I'm not well versed in Ruby in order to write something to allow for the checking of such variables and either ignoring the variable itself or the whole line.
Would someone be interested in tackling this?
The Ruby code for it is.
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 maybe the solution would be to just ignore the variable in the way it does for the data:
and not error unless the UrlFormat
in fact is invalid because of missing quotes or something.
Any help would be appreciated.
This should work: The change I made was this line return if url.include?('${')
. It ignores urls that contain the string ${
the same way it ignores urls that start 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With