Skip to content
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

Algorithm for generating border shorthand is incorrect when individual side border declarations exist #87

Open
willtcarey opened this issue Jun 29, 2017 · 2 comments

Comments

@willtcarey
Copy link

My client bought an email template that I'm trying to inline into our emails using premailer. The template has the following css in it

.bb {
  border-bottom: 1px solid; }

.bt,
.bb {
  border-color: #dfdfdf; }

After going through the expand_shorthand phase the declarations have properties like

"border-bottom-width" => { :value => "1px" },
"border-bottom-style" => { :value => "solid" },
"border-bottom-color" => { :value => "#dfdfdf"},
"border-top-color" => { :value => "#dfdfdf"},
"border-left-color" => { :value => "#dfdfdf"},
"border-right-color" => { :value => "#dfdfdf"}

Then it goes through the create_shorthands phase and when it runs create_dimensions_shorthand! all the border-color declarations are collapsed back into one property which is still correct.

"border-bottom-width" => { :value => "1px" },
"border-bottom-style" => { :value => "solid" },
"border-color" => { :value => "#dfdfdf"}

The problem occurs at the next phase when it runs create_border_shorthand!. It runs through the declarations checking for border-width border-style and border-color. And I do have a border color declaration so it picks that up and creates a shorthand out of it for border: #dfdfdf which then overrides the border-bottom-width and border-bottom-style declarations.

So my suggestion would be when creating border shorthands to first check if there are any individual side border styles set and if so bail out. An alternate way to fix this would be to ensure that the border-bottom-width and border-bottom-style styles are set after the border shorthand so they override the shorthand properties but I don't know if there's a good way to do that.

Do you have any thoughts?

@kalilz4485
Copy link

I have a similar problem

"border-left-style" => { :value => "solid" },
"border-width" => { :value => "1px"}

gets transformed into

"border-left-style" => { :value => "solid" },
"border" => { :value => "1px"}

But border and border-width aren't the same thing, as border rewrites width, style and color
So in this case it's overwriting border-left-style (= we get no border while we should have one on the left)

So my suggestion would be when creating border shorthands to first check if there are any individual side border styles set and if so bail out. An alternate way to fix this would be to ensure that the border-bottom-width and border-bottom-style styles are set after the border shorthand so they override the shorthand properties but I don't know if there's a good way to do that.

We didn't have this issue in premailer 1.8.7 because the properties were sorted afterwards by name (which puts border before border-*) but this was removed in premailer/premailer@d135e0b
Could be added back in Declarations#to_s to make sure specific css properties are set after more global properties, but if it was removed somewhere it's not to be added back elsewhere I suppose. It's probably also an easier fix than check the presence of individual side border property though :)

@grosser
Copy link
Contributor

grosser commented Feb 5, 2021

PR welcome, even if it's just a test that reproduces it 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants