New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow CSS functions to be used when expanding dimensions shorthand #126
Conversation
133d2e1
to
2be107c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not a fan of adding 2 replacements for every property to cover an edge-case :(
... also the 2 replacements depending on a magic var is not great either
I was kinda hoping it would go
'margin: ; margin-left: auto; margin-right: auto;'
-> {margin: 'calc(1em / 4 * var(--foo))', 'margin-left': 'auto'}
-> {margin-right: 'calc(1em / 4 * var(--foo))', 'margin-left': 'auto'}
without caring for what exactly is in the expression
2be107c
to
720eb34
Compare
Copying this over from the unrelated issue in #125 so we have it here... If the value is being split on whitespace using commas as parameter separators, then the However, if you did {
"margin-left" => "calc(1em/4*4)",
"margin-right" => "calc(1em/4*4)",
"margin-top" => "calc(1em/4*4)",
"margin-bottom" => "calc(1em/4*4)"
} Which is correct, but only because of the lack of whitespace in the "margin: calc(1em / 4)"
{
"margin-top" => "calc(1em",
"margin-right" => "/",
"margin-bottom" => "4)",
"margin-left" => "/"
}
"margin: calc(1em /4)"
{
"margin-top" => "calc(1em",
"margin-right" => "/4)",
"margin-bottom" => "calc(1em",
"margin-left" => "/4)"
}
"margin: calc(1em / 4 * 4)"
# in current master
ArgumentError (Cannot parse calc(1em / 4 * 4))
"margin: calc(1em / 4 * 4)"
# in v1.7.1:
{}
# With commas:
"margin: clamp(1rem, 2.5vw, 2rem)"
{
"margin-top" => "clamp(1rem,",
"margin-right" => "2.5vw,",
"margin-bottom" => "2rem)",
"margin-left" => "2.5vw,"
} With my PR, the expected values are expanded: "margin: calc(1em / 4)"
{
"margin-top" => "calc(1em / 4)",
"margin-right" => "calc(1em / 4)",
"margin-bottom" => "calc(1em / 4)",
"margin-left" => "calc(1em / 4)"
}
"margin: calc(1em /4)"
{
"margin-top" => "calc(1em /4)",
"margin-right" => "calc(1em /4)",
"margin-bottom" => "calc(1em /4)",
"margin-left" => "calc(1em /4)"
}
"margin: calc(1em / 4 * 4)"
{
"margin-top" => "calc(1em / 4 * 4)",
"margin-right" => "calc(1em / 4 * 4)",
"margin-bottom" => "calc(1em / 4 * 4)",
"margin-left" => "calc(1em / 4 * 4)"
}
"margin: clamp(1rem, 2.5vw, 2rem)"
{
"margin-top" => "clamp(1rem, 2.5vw, 2rem)",
"margin-right" => "clamp(1rem, 2.5vw, 2rem)",
"margin-bottom" => "clamp(1rem, 2.5vw, 2rem)",
"margin-left" => "clamp(1rem, 2.5vw, 2rem)"
} So basically The |
Just dropping in to check in on this PR. Any thoughts on this? |
lib/css_parser/rule_set.rb
Outdated
value.gsub!(RE_FUNCTIONS) { |c| c.gsub(/\s+/, WHITESPACE_REPLACEMENT) } | ||
|
||
matches = value.strip.split(/\s+/) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would this be better ?
- keep the replacement close together
- replace less if all have the same values
- do not produce extra hash and string objects
value.gsub!(RE_FUNCTIONS) { |c| c.gsub(/\s+/, WHITESPACE_REPLACEMENT) } | |
matches = value.strip.split(/\s+/) | |
value.gsub!(RE_FUNCTIONS) { |c| c.gsub!(/\s+/, WHITESPACE_REPLACEMENT); c } | |
matches = value.strip.split(/\s+/) | |
matches.each { |c| c.gsub!(WHITESPACE_REPLACEMENT, ' '); c } |
... and ideally wrap this up in a preserve_whitespace_in_functions
method
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
New version pushed, using #split_value_preserving_function_whitespace
if that name is okay. How's this look?
7fe280f
to
91386df
Compare
lib/css_parser/rule_set.rb
Outdated
replacement = {top => t, right => r, bottom => b, left => l}.transform_values do |replacement_value| | ||
replacement_value.gsub(WHITESPACE_REPLACEMENT, ' ') | ||
end |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we don't need this then right ?
lib/css_parser/rule_set.rb
Outdated
matches.each do |c| | ||
c.gsub!(WHITESPACE_REPLACEMENT, ' ') | ||
end | ||
|
||
matches |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
each already returns matches
matches.each do |c| | |
c.gsub!(WHITESPACE_REPLACEMENT, ' ') | |
end | |
matches | |
matches.each do |c| | |
c.gsub!(WHITESPACE_REPLACEMENT, ' ') | |
end |
91386df
to
2b65639
Compare
thx! 1.10.0 |
Using CSS functions causes
CssParser::RuleSet#expand_dimensions_shorthand!
to raise anArgumentError
. What we attempt to do here is handle functions by using a temporary string replacement to sanely handle arguments like